Menampilkan Google Maps V3 pada halaman website Oleh: Hasyemi Rafsanjani Asyari
Sekilas tentang Google Maps, ya semua mungkin hampir sudah tahu merupakan salah satu produk dari Google. Dengan Google Maps kita bisa menampilkan peta digital ke dalam website kita. Google Maps API sendiri bukan hanya tersedia untuk web, tapi juga tersedia untuk Android, dan beberapa platform lainnya. Untuk versi web yaitu menggunakan bahasa pemrograman JavaScript (JS) sampai saat ini dibuat kini sudah masuk ke versi Google Maps API V.3. Pada tutorial kali ini kita akan mencoba menampilkan Maps biasa, menampilkan marker, dan juga menampilkan info windows pada marker. Dan juga beberapa property atau options yang bisa digunakan pada maps kita.
Hai salam kenal, ini adalah tutorial pertama yang coba saya buat. Berhubung akhir-akhir ini sedang buat aplikasi web berbasis GIS (Geographic Information System) maka disini saya akan memberikan tutorial bagaimana caranya untuk menampilkan Google Maps pada website dengan lebih mudah.
Mengenal Google Maps API Sekilas tentang Google Maps, ya semua mungkin hampir sudah tahu merupakan salah satu produk dari Google. Dengan Google Maps kita bisa menampilkan peta digital ke dalam website kita. Google Maps API sendiri bukan hanya tersedia untuk web, tapi juga tersedia untuk Android, dan beberapa platform lainnya. Untuk versi web yaitu menggunakan bahasa pemrograman JavaScript (JS) sampai saat ini dibuat kini sudah masuk ke versi Google Maps API V.3. Pada tutorial kali ini kita akan mencoba menampilkan Maps biasa, menampilkan marker, dan juga menampilkan info windows pada marker. Dan juga beberapa property atau options yang bisa digunakan pada maps kita. Yuk mari kita coba
Preparation Sebelum kita mulai, ada baiknya baca doa dan niat dulu :-D
Yang pasti kita perlu siapkan text editor, saya menggunakan Sublime Text Editor. Di tutorial ini diharapkan sebelumnya sudah punya basic HTML, CSS dan juga JavaScript.
Basic Maps Untuk menampilkan maps secara biasa caranya sangat sederhana: 1. Langkah pertama adalah kita perlu mengimport API javascript dari google pada tag . <script src="https://maps.googleapis.com/maps/api/js"> 2. Selanjutnya buat sebuah elemen
baru, yang nantinya digunakan untuk menampilkan google maps kita. Kita berikan atribut 'id' map-canvas dan kita set width dan heightnya agar maps bisa terlihat.
3. Hal yang terakhir yang perlu dilakukan adalah membuat script javasript untuk menampilkannya ke dalam div. <script> function initialize() { var mapCanvas = document.getElementById('map-canvas'); var mapOptions = { center: new google.maps.LatLng(-6.402484, 106.794243), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions) } google.maps.event.addDomListener(window, 'load', initialize); Penjelasan dari script ini adalah kita menggunakan API Javascript dari google maps untuk menampilkan maps. Kita buat variabel pertama yaitu mapCanvas yaitu elemen HTML div yang akan digunakan untuk menampilkan maps. Variabel kedua adalah variabel untuk pengaturan/options dari google maps. ada banyak yang bisa kita gunakan nantinya. Kita akan bahas beberapa diantaranya. Di code ini, beberapa properties yang kita gunakan adalah center, zoom, dan juga mapTypeID. ❍
center digunakan untuk menentukan titik tengah dari maps yang kita buat. Disini kita isi dengan laitude dan juga longitude. Di option ini saya menggunakan position latLang dari
❍
❍
wilayah Depok. zoom digunakan untuk menentukan level zooming maps akan ditampilkan. Semakin besar angka zoom maka akan semakin zoom ini atau semakin dekat maps akan ditampilkan mapTypeId digunakan untuk memilih type maps yang ingin ditampilkan, ada option HYBIRD, ROADMAP, TERRAIN dan juga SATELITE Selanjutnya buat variabel maps dengan parameter mapCanvas dan mapOptions lalu, tinggal addDomListener sehingga script google maps akan dijalankan ketika window atau documet html di load. Dan yeay, kalian berhasil menampilkan peta google secara basic/dasar.
Macam-Macam Properties Google Maps Google Maps punya banyak properties yang bisa kita gunakan, beberapa diantaranya adalah: 1. disableDoubleClickZoom diisi dengan boolean, ini untuk mengatur apakah maps akan zooming ketika di double click 2. draggable yaitu mengatur apakah maps bisa di drag atau tidak. 3. keyboardShortcut yaitu mengatur apakah maps bisa dikendalikan dengan keyboard atau tidak 4. scrollwheel digunakan untuk mengatur apakah scrollwheel bisa digunakan pada maps 5. streetViewControl digunakan untuk mengatur apakah di maps kita akan ada control untuk
menampilkan street view dan masih banyak lagi control-control yang ada. Untuk menggunakannya, kita perlu meletakannya di mapOptions kita. var mapOptions = { center: new google.maps.LatLng(-6.402484, 106.794243), zoom: 10, scrollwheel: false, keyboardShortcut: false, draggable: false, mapTypeId: google.maps.MapTypeId.ROADMAP }
Menampilkan Marker Untuk menampilkan marker caranya sangat mudah, tambahkan script ini kedalam javascript kita di awal: var marker = new google.maps.Marker({ position: new google.maps.LatLng(-6.402484, 106.794243), map: map, title: 'Hello World!' }); Maka hasilnya kita telah menambahkan marker kedalam maps kita dengan posisi di Depok.
Menampilkan infoWindow pada Marker Info Window adalah panel seperti tooltips yang akan muncul ketika kita click pada marker. Caranya sangat mudah masukan code berikut kedalam function initialize di awal: var contentinfo = '
TES INFO WINDOW
'+ '
Hello World
'+ '
This is a link
'; var infowindow = new google.maps.InfoWindow({ content: contentinfo }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); Disini infoWindows sama halnya dengan sebuah content html. variabel contentinfo adalah content
html dari info window yang akan muncul. Kalian bisa dengan mudah merubahnya, dengan menggunakan tag HTML. Selanjutnya kita buat sebuah infowindow baru dengan content string dari html kita, lalu hal terakhir adalah kita tambahkan events pada google maps, ketika marker di click maka akan membuka info window. Hasil akhirnya adalah akan seperti berikut ini:
Ya itulah akhirnya, kita telah berhasil membuat dan menampilkan peta google maps sederhana ke dalam website kita. Sangat mudah dan bisa disesuaikan dengan tampilan yang anda mau.
Source Code Lengkap <style> #map-canvas { width: 500px; height: 500px; }
<script src="https://maps.googleapis.com/maps/api/js"> <script> function initialize() { var mapCanvas = document.getElementById('map-canvas'); var mapOptions = { center: new google.maps.LatLng(-6.402484, 106.794243), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions) var marker = new google.maps.Marker({ position: new google.maps.LatLng(-6.402484, 106.794243), map: map, title: 'Hello World!' }); var contentinfo = '
TES INFO WINDOW
'+ '
Hello World
'+ '
This is a link
'; var infowindow = new google.maps.InfoWindow({ content: contentinfo }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } google.maps.event.addDomListener(window, 'load', initialize);
Sekian tutorial saya hari ini, untuk tutorial selanjutnya saya akan masih mencoba membahas tentang Google Maps API diantaranya adalah menampilkan custom marker, menampilkan banyak marker, geolocation, geocoding, dan banyak lagi. Terima Kasih. Semoga bermanfaat. Jika ada pertanyaan, silahkan jangan malu bertanya :D
Tentang Penulis
Hasyemi Rafsanjani Asyari null. I'm proud to be Stalker. Currently Mahasiswa Politeknik Negeri Jakarta. Currently Microsoft Student Partners Indonesia Regional Jabodetabek. Founder of a Company.
