Cara Menciptakan Web Gis Dengan Google Maps Api
Google maps API
Kali ini bonbonwebtutorial ingin bahas perihal google maps api nih gan lihat aja disini kami menyediakan misalnya juga lohhh.
- 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 yakni abreviasi dari Application programming interface. Dengan bahasa yang lebih sederhana, API yakni fungsi fungsi pemrograman yang disediakan oleh aplikasi atau layanan semoga layananan tersebut sanggup di integrasikan dengan aplikasi yang kita buat.
Jadi Google maps API yakni fungsi fungsi pemrograman yang disediakan oleh Google maps semoga Google maps sanggup di integrasikan kedalam Web atau aplikasi yang sedang buat.
Google maps API sendiri menyediakan fungsi yang sangat banyak, berikut ini yakni pembagiannya
Google maps Javascript API v3
ini yakni 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 ibarat direction, Geocoding, Distance Matrix API dan elevation API.
Listing dan Keterangan
Penjelasan : Tag html yang dititip dengan </html>adalah kerangka dari suatu web lalu terdapat meta charset="utf-8" merupakan parsing code, <meta name="viewport" content="initial-scale=1.0"> untuk menciptakan responsif pada web mobile, aktivitas diatas juga terdapat style css untuk memodifikasi web yang diatur yakni #map yang berfungsi memodifikasi yang ber-idkan map, dan yang terakhir di tag head yakni didalam css html,body yang diatur dengan height: 100%; margin: 0; padding: 0;.
Penjelasan : Tag body yang ditutub dengan </body> yakni isi dari suatu web, lalu tag div untuk menciptakan 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 yakni fungsi yang diberi nama initMap didalam fungsi tersebut terdapat data koordinat marker, lalu variabel location yang mendeklarasikan sebuah array dengan mempunyai sepuluh. Fungsi ini akan dihukum ketikan fungsi tersebut dipanggil. Location mempunyai nilai yaitu: nama lokasi, latitude dan longitude, urutan, dan yang terakhir gambar yang akan ditampilkan didalam web.
Variabel map dibuat gres cara mnggantinya menggunakan new google.maps.Map sebagai variabel yang akan dipanggil, yang pertama dipanggil yakni 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 mempunyai sepuluh nilai tadi akan dipanggil berulang disini. Variabel marker sebagai inisialisai marker(penanda) didalam nya dideklarasikan locations[i][1] mengambarkan sebagai latitude,locations[i][2] mengambarkan sebagai longtitude ini akan diulang , infowindow didalamnya terdapat locations[i][0] mengambarkan sebagai nama daerah +"<br>"+locations[i][4] untuk menampilkan gambar); ketika marker diklik maka akan muncul sebuah obrolan dan gambar, untuk mendapat 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 bab ini.
jika mau modulnya ada nih gan silahkan klik DI SINI
1. Tampilan webnya
Keterangan : Map menunjukkan tampilan peta dan kalau marker diklik maka akan tampil gambar dan nama tempatnya yang telah berhasil dibangun.
jika mau source codenya yang lengkap silahkan klik DISINI