Dalam banyak penggunaan peta dalam web banyak yang menggunakan google map, karena google map sudah menyediakan API yang dengan mudah untuk diintegrasikan ke dalam web. Namun ada yang lebih mudah lagi, yaitu dengan menggunakan jquery plugin yang bernama gmaps.js.
Selain fungsi standar layaknya sebuah peta yang dapat menampilkan lokasi yang spesifik, kita juga bisa menentukan level zoom yang digunakan, menambahkan marker/tanda pada peta, menuju ke lokasi tertentu berdasarkan pengguna (HTML5 geolocation), mendefinisikan rute, dan lain sebagainya dengan cukup menambahkan beberapa baris kode.
Gmaps.js juga memiliki fungsi callback untuk diintegrasikan dengan event/fungsi.
Berikut beberapa contoh sederhana.
Penggunaan Dasar.
Cukup dengan menuliskan seperti ini:
new GMaps({
div: '#map',
lat: -12.043333,
lng: -77.028333
});
Dapat ditambahkan dengan parameter zoom, secara default zoom yang digunakan adalah 15.
Menambahkan Marker
map.addMarker({
lat: -12.043333,
lng: -77.028333,
title: 'Lima',
click: function(e) {
alert('You clicked in this marker');
}
});
Dengan HTML5 Geolocation
Dengan geolocation kita bisa mendapatkan lokasi kita berada, hal ini bisa diintegrasikan misal dengan phonegap.
GMaps.geolocate({
success: function(position) {
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function(error) {
alert('Geolocation failed: '+error.message);
},
not_supported: function() {
alert("Your browser does not support geolocation");
},
always: function() {
alert("Done!");
}
});
Untuk dokumentasi dan contoh yang lebih banyak silahkan ke http://hpneo.github.com/gmaps/