Assalamualaikum...
Kali ini kita akan belajar bagaimana memasang Peta Lokasi di Website yang langsung include dengan google Map...
Langsung saja dah,,,hehe
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:
1. Maps.Google
Jika ingin link langsung, sobat tinggal meload javascript-javascript tersebut dengan cara menambahkan script di bawah ini di dalam tag <head></head> pada halaman HTML sobat:
<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>
Setelah itu, kita tinggal menambahkan sebuah DIV di dalam HTML kamu. Buatlah sebuah div di body dengan atribut "id" yaitu map dengan isi kosong. Cara membuatnya adalah dengan membuat kode berikut pada HTML sobat:
<div id="map" style="height: 250px"></div>
Jangan lupa dengan menambahkan style height. Ini sangat berpengaruh, karena jika tidak diberikan atribut itu, div tidak akan menampilkan peta, karena tidak dispesifikasikan tinggi divnya.
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 satu persatu 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!
Treneng..., 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
<!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>
