Menambahkan Peta ke Halaman HTML
Kali ini saya akan membuat tutorial bagaimana cara menambahkan dan juga mengkustomisasi Google Map API pada website kamu dengan menggunakan jQuery. Sebagai contoh, saya berikan suatu halaman web yang saya buat di sini:Langkah-langkah yang harus dilakukan yaitu kita meload jquery terlebih dahulu. File yang harus kita load ada tiga, yaitu google map API, jquery, dan Google Map jQuery library. Masing-masing file dapat dilink langsung atau didownload di sini:
- http://maps.google.com/maps/api/js?sensor=true
- http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
- http://jagocoding.com/uploads/resources/jquery.fn.gmap.js
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type="text/javascript" src="http://jagocoding.com/uploads/resources/jquery.fn.gmap.js"></script>
<div id="map" style="height: 250px"></div>
Setelah itu, maka selanjutnya adalah membuat script untuk menambahkan peta ke dalam div yang idnya adalah map, maka yang dilakukan adalah memasukkan script jQuery di bawah 3 javascript di atas, yaitu:
<script type="text/javascript">
$().ready(function(){
$('#map').gmap().bind('init', function(ev, map) {
$('#map').gmap('addMarker', {
'position': '-6.730545, 107.038738',
'bounds': true
});
$('#map').gmap('option', 'zoom', 10);
});
});
</script>
Nah, script di atas ini adalah script untuk meload google map dengan menggunakan library dari jquery.fn.gmap.js di atas. $('#map') adalah nama id untuk menunjukkan elemen mana yang akan dibuat peta. Kebetulan di sini adalah elemen dengan id "map", jadi dibuat seperti itu, memakai #map. Ada banyak options, tidak saya sebutkan satu2 karena banyak, hehe.. Saya beritahu yang pentingnya saja. Behaviour addMarker berfungsi untuk menambahkan sebuah marker (penunjuk) pada peta. Di situ ada option position "-6.730545, 107.038738". Koordinat itu adalah koordinat rumah saya di Cipanas, Cianjur hehe. Nah, kemudian setelah itu ada option zoom yang artinya kita mengeset berapa zoom yang akan kita pakai. Semakin tinggi zoom maka akan semakin dekat.Sekarang, coba refresh halaman HTML kamu!
Voila, halaman web kamu sekarang sudah berisi peta dari Google... :)
Mengubah Gambar dari Marker (Penunjuk Peta)
Untuk mengubah icon/gambar dari marker (penunjuk peta), kita dapat menggunakan option "icon" di dalam behaviour addMarker. Simpelnya, kita bisa menambahkan dari kode di atas:<script type="text/javascript">
$().ready(function(){
$('#map').gmap().bind('init', function(ev, map) {
$('#map').gmap('addMarker', {
'position': '-6.730545, 107.038738',
'bounds': true,
'icon': new google.maps.MarkerImage('images/marker.png')
});
$('#map').gmap('option', 'zoom', 10);
});
});
</script>
Objek google.maps.MarkerImage adalah objek bawaan dari googlemap API untuk menambahkan gambar yang akan digunakan pada googlemap. Dengan menambahkan "icon", maka gambar penunjuk akan berubah sesuai dengan gambar yang ada, misalnya marker.png.Menambahkan Konten HTML Ketika Marker Diklik
Kita dapat menambahkan konten pada cloud ketika marker atau penunjuk diklik. Dengan menggunakan event click bawaan jQuery, kita bisa memanipulasi event tersebut, misalnya dengan menambahkan alert pemberitahuan, maupun dengan memunculkan konten HTML pada peta. Sekarang saya akan membuat bagaimana si penunjuk dapat mengeluarkan deskripsi ketika diklik. Caranya dengan menambahkan behaviour openInfoWindow dan option content di dalamnya.<script type="text/javascript">
$().ready(function(){
$('#map').gmap().bind('init', function(ev, map) {
$('#map').gmap('addMarker', {
'position': '-6.730545, 107.038738',
'bounds': true
}).click(function(){
$('#map').gmap('openInfoWindow', {
'content': '<p>Isikan konten di sini, konten dapat berupa <strong>HTML</strong></p>'
}, this);
});
$('#map').gmap('option', 'zoom', 10);
});
});
</script>
Kode lengkap
Seperti biasa, saya akan memberikan sebuah kode HTML lengkap dan siap pakai untuk kamu gunakan. Silakan copas kode-kode berikut untuk web kamu.<!DOCTYPE html>
<html>
<head>
<title>Contoh Google Map API - Jagocoding.com</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://jagocoding.com/uploads/resources/jquery.fn.gmap.js"></script>
<script type="text/javascript">
$().ready(function(){
$('#map').gmap().bind('init', function(ev, map) {
$('#map').gmap('addMarker', {
'position': '-6.730545, 107.038738',
'bounds': true
}).click(function(){
$('#map').gmap('openInfoWindow', {
'content': '<p>Isikan konten di sini, konten dapat berupa <strong>HTML</strong></p>'
}, this);
});
$('#map').gmap('option', 'zoom', 10);
});
});
</script>
</head>
<body>
<div id="map" style="height: 250px"></div>
</body>
</html>
OK selamat mencoba mencoba sahabat2 JACO... Untuk pertanyaan dkk, silakan komentar aja :)
