Cara membuat web gis dengan Google maps API

Google maps API

Kali ini bonbonwebtutorial ingin bahas tentang google maps api nih gan lihat aja disini kami menyediakan contohnya juga lohhh.

Pengantar Google Maps API
Dasar Dasar Google Maps API
Marker dan InfoWindows
Multiple Marker
Integrasi Google Maps API+PHP+MySQL

Google maps API??? Apa itu?

Sebelum membahas Google Maps API, kita harus paham dulu dengan API. API adalah kependekan dari Application programming interface. Dengan bahasa yang lebih sederhana, API adalah fungsi fungsi pemrograman yang disediakan oleh aplikasi atau layanan agar layananan tersebut bisa di integrasikan dengan aplikasi yang kita buat.

Jadi Google maps API adalah fungsi fungsi pemrograman yang disediakan oleh Google maps agar Google maps bisa di integrasikan kedalam Web atau aplikasi yang sedang buat.

Google maps API sendiri menyediakan fungsi yang sangat banyak, berikut ini adalah pembagiannya

Google maps Javascript API v3

ini adalah google maps API yang akan kita pelajari. embel embel javascript menunjukan API ini tersedia dalam bahasa javascript.

Google Maps API Webservice

Layanan Google maps API untuk fungsi lanjutan seperti direction, Geocoding, Distance Matrix API dan elevation API.

Listing dan Keterangan

Penjelasan : Tag html yang dititip dengan </html>adalah kerangka dari suatu web kemudian terdapat meta charset="utf-8" merupakan parsing code, <meta name="viewport" content="initial-scale=1.0"> untuk membuat responsif pada web mobile, program diatas juga terdapat style css untuk memodifikasi web yang diatur adalah #map yang berfungsi memodifikasi yang ber-idkan map, dan yang terakhir di tag head adalah didalam css html,body yang diatur dengan height: 100%; margin: 0; padding: 0;.

Penjelasan : Tag body yang ditutub dengan </body> adalah isi dari suatu web, kemudian tag div untuk membuat id=”map”, dan yang terakhir Javascript yang ditutup dengan tag javascript juga dan function untung fungsi yang utama untuk membangun suatu halaman web. Didalam Javascript, dideklarasikan variabel global yaitu map, fungsi initMap() ini adalah fungsi yang diberi nama initMap didalam fungsi tersebut terdapat data koordinat marker, kemudian variabel location yang mendeklarasikan sebuah array dengan memiliki sepuluh. Fungsi ini akan dieksekusi ketikan fungsi tersebut dipanggil. Location memiliki nilai yaitu: nama lokasi, latitude dan longitude, urutan, dan yang terakhir gambar yang akan ditampilkan didalam web.

Variabel map dibuat baru cara mnggantinya menggunakan new google.maps.Map sebagai variabel yang akan dipanggil, yang pertama dipanggil adalah center: {lat:-3.790694, lng:114.776768}. Beserta zoom untuk tingkat tampilan besar peta yang akan tampil.

for (var i = 0; i <locations.length; i++) untuk perulangannya perulangan data koordinat, array yang memiliki sepuluh nilai tadi akan dipanggil berulang disini. Variabel marker sebagai inisialisai marker(penanda) didalam nya dideklarasikan locations[i][1] menandakan sebagai latitude,locations[i][2] menandakan sebagai longtitude ini akan diulang , infowindow didalamnya terdapat locations[i][0] menandakan sebagai nama tempat +"<br>"+locations[i][4] untuk menampilkan gambar); saat marker diklik maka akan muncul sebuah dialog dan gambar, untuk mendapatkan data koordinat dilakukanlah perulangan. Selanjutnya pada google.maps.event dipasang sebuah listerner, dan setContent untuk meletakkan marker dengan info window.

Penjelasan: Script src menunjukkan listing script yang bertugas untuk menampilkan data-data tadi ke peta halaman web. Berdasarkan src yang meiliki API Key sekian dan fungsi initMap tadi, dipanggil pada bagian ini.

jika mau modulnya ada nih gan silahkan klik DI SINI

1. Tampilan webnya