Google Map merupakan salah satu layanan peta yg disediakan oleh google. Dengan google map kita dapat mencari lokasi berdasarkan nama tempat, latitude-longitude.
Google menyediakan map API ini yang bisa diakses oleh beberapa jenis device web (java script), ios, android.
Yang akan kita bahas dalam posting ini dimulai dengan API untuk web base (menggunakan java script). API yg digunakan disini adalah : Google Map Javascript API v3.
Ini merupakan api versi yang ke 3.
Sebelum masuk ke tutorial, akan akan coba memahami apa itu latitude longitude yg digunakan di google map. Latitude dan Longitude ini umamnya juga digunakan di perangkat GPS.
Latitude atau Lintang (garis horizontal) adalah jarak sudut, dalam derajat, menit, dan detik dari titik utara atau selatan dari Khatulistiwa.
Longitude atau Bujur (garis vertikal) adalah jarak sudut, dalam derajat, menit, dan detik, dari titik timur atau barat Meridian.
Ada dua macam data Latitude dan Longitude, yaitu format Decimal dan format Degrees Minutes Seconds. Mungkin lebih mudah menjelaskannya dengan format Degrees Minutes Seconds. Contoh, untuk lokasi tertentu, data Longlat yang diperoleh adalah -6.191067, 106.829607.
Decimal Format :
-6.191067, 106.829607
jika di konvert ke Degrees Minutes Seconds Format menjadi:
-6° 11′ 27.8412″, 106° 49′ 46.5846″
Cara membaca data format Degrees Minutes Seconds yakni, angka sebelum titik artinya degrees/derajat. Nilai Negatif berarti South (latitudes) atau West (longitudes) sedangkan nilai positif berarti arah sebaliknya. Kemudian untuk tujuan presisi, derajat bujur dan lintang telah dibagi menjadi menit (‘) dan detik (“) Ada 60 menit dalam setiap derajat. Setiap menit dibagi menjadi 60 detik. Maka itu, angka selalu lebih kecil dari 60. Setiap detik dibagi lagi menjadi sepersepuluh, seperseratus, atau bahkan seperseribu.
Cara membaca data format Decimal lebih kompleks, terutama untuk angka setelah titik. Angka depan sebelum titik sama artinya degrees/derajat. Nilai Negatif berarti South (latitudes) atau West (longitudes) sedangkan nilai positif berarti arah sebaliknya. Sebaiknya dikonversi terlebih dahulu data Latitude Longitude anda ke dalam format Degrees Minutes Seconds.
Sekarang kita akan membahas penggunaan google map api.
Pertama kita login ke google developer console (https://console.developers.google.com/project), kemudian kita pilih project atau create project baru.
Kemudian kita masuk ke project yang kita pilih. Kemudian aktifkan 'Google Maps JavaScript API v3', sampai statusnya ON.
API ini free tapi mempunyai limit quota : 25,000 requests/day
Agar quota menjadi unlimited tentu kita harus melakukan pembayaran.
Klik left menu Credential, create Browser Key
Maka api key akan tergenerate otomatis.
API key inilah yang akan kita gunakan untuk mengakses java script api.
format : https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&sensor={SET_TO_TRUE_OR_FALSE}
Sebenarnya kita juga bisa mengakses tanpa api key, dengan memanggil url :
http://maps.googleapis.com/maps/api/js?sensor=false
Tapi dengan menggunakan api-key kita dapat memantau berapa kali API yang sudah kita buat ini diakses (memantau trafict).
Berikut ini beberapa contoh pemakaian google map API.
1. Menampilkan google map di browser
untuk create object map, kita gunakan script :
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
kemudian kita arahkan ke tag html dimana map akan ditampilkan,
Map option ini bisa kita isi : zoom level, draggable, center (posisi awal), map type
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width:300px ; height:300px; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrhdvZDWKYeeQALfZSFbRH1GvWL2QfnhY&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-6.175486, 106.825407),
zoom: 15
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div style="border: 1px; padding: 50px;" >
<div id="map-canvas" />
</div>
</body>
</html>
2. Menampilkan Marker
Marker adalah suatu icon atau penanda jika map itu diklik.
untuk menampilkan marker, buat object Marker :
marker = new google.maps.Marker()
Untuk memberikan event pada saat marker diklik atau didrag, digunakan map Listener
google.maps.event.addListener(map, 'click', function(event) { });
google.maps.event.addListener(marker, 'dragend', function() { });
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width:300px ; height:300px; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrhdvZDWKYeeQALfZSFbRH1GvWL2QfnhY&sensor=true">
</script>
<script type="text/javascript">
var marker = null;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-6.175486, 106.825407),
zoom: 15
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
if (marker != undefined){
marker.setMap(null);
marker=null;
}
if (marker == null) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Your base',
// Allowing to move the marker
draggable: true,
animation: google.maps.Animation.DROP
});
updateFieldsAndCenter(map, marker);
google.maps.event.addListener(marker, 'dragend', function() {
updateFieldsAndCenter(map, marker);
});
}
});
}
//==triger map jika ada perubahan lat - long
function updateMapAndCenter(map, marker) {
// Center to marker position
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
}
function updateFieldsAndCenter(map, marker) {
// Center to marker position
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
// Change the value
document.getElementById("_lat").value = marker.getPosition().lat();
document.getElementById("_lng").value = marker.getPosition().lng();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div style="border: 1px; padding: 50px;" >
<div id="map-canvas" />
</div>
<div style=" padding: 10px;" >latitude : <input name="_lat" id="_lat" type="text" /></div>
<div style=" padding: 10px;" >longitude : <input name="_lng" id="_lng" type="text" /></div>
</body>
</html>
3. Geocoding (menampikan map berdasarkan latitude longitude atau address)
Google map api juga mempunyai function untuk melakukan geocoding. kita dapat menampilkan peta berdasarkan address atau latitude-longitude yg diinputkan
Menggunakan object Geocoder.
geocoder = new google.maps.Geocoder();
Untuk melakukan pencarian berdasarkan address, panggil method geocode() menggunakan parameter 'address'
geocoder.geocode( { 'address': YOUR_ADDRESS}, function(results, status) { });
Sedangkan untuk pencarian berdasarkan koordinat, menggunakan parameter 'latlng'
geocoder.geocode( { 'latLng': YOUR_LOCATION}, function(results, status) { });
var marker = null;
var geocoder = null;
var map = null;
var infowindow = new google.maps.InfoWindow();
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(-6.175486, 106.825407),
zoom: 15
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
function codeAddress() {
var address = document.getElementById('_place').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function codeLatLng() {
var input = document.getElementById('_latlng').value;
var latlngStr = input.split(',', 2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
}
4. Menampilkan InfoWindow
InfoWindow merupakan popup sebagai penanda suatu lokasi. InfoWindow ini bisa kita isi tulisan atau gambar.
Create object InfoWindow
var infowindow = new google.maps.InfoWindow();
untuk meletakkan InfoWindow ke map diposisi mana gunakan open()
infowindow.open(_map, _marker);
untuk mengisi InfoWindow gunakan setContent()
infowindow.setContent(YOUR_CONTENT);
var marker = null;
var infowindow = new google.maps.InfoWindow();
var geocoder = new google.maps.Geocoder();
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-6.1562567856741826, 106.7647933959961),
zoom: 15
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
if (marker != undefined){
marker.setMap(null);
marker=null;
}
if (marker == null) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Your base',
// Allowing to move the marker
draggable: true,
animation: google.maps.Animation.DROP
});
marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_shadow.png');
updateFieldsAndCenter(map, marker);
google.maps.event.addListener(marker, 'dragend', function() {
updateFieldsAndCenter(map, marker);
});
}
geocodePosition(marker.getPosition(),map,marker);
//infowindow.setContent("Alamat : ");
//infowindow.open(map, marker);
});
}
function geocodePosition(pos,_map,_marker) {
var latlng = new google.maps.LatLng(pos.lat(), pos.lng());
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
//console.log("status "+results[1].formatted_address);
var getAddress= results[1].formatted_address;
infowindow.setContent("Address : "+getAddress);
infowindow.open(_map, _marker);
} else {
alert( 'No results found' );
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
}
5. Menampilkan banyak marker dengan icon berbeda beda.
untuk menampilkan banyak marker kita bisa melakukan perulangan (for)
sedangkan untuk menampilkan marker dengan icon tertentu, gunakan setIcon().
marker_new.setIcon(YOUR_ICON);
var locations = [
{"lat":"-6.180406243016221", "lng":"106.83826446533203", "icon":"http://google.com/mapfiles/ms/micons/pink-pushpin.png" },
{"lat":"-6.178870267906449", "lng":"106.84032440185547", "icon":"http://labs.google.com/ridefinder/images/mm_20_gray.png" },
{"lat":"-6.181430223945644", "lng":"106.84109687805176", "icon":"http://google.com/mapfiles/arrow.png" },
{"lat":"-6.183051523030183", "lng":"106.84453010559082", "icon":"http://maps.google.com/mapfiles/kml/pal2/icon12.png" },
{"lat":"-6.178742269779404", "lng":"106.84208393096924", "icon":"http://maps.google.com/mapfiles/ms/icons/red-dot.png" } ,
{"lat":"-6.179680921992184", "lng":"106.84358596801758", "icon":"http://maps.google.com/mapfiles/kml/pal3/icon4.png" }
];
var marker = null;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-6.180406243016221, 106.83826446533203),
zoom: 15
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
for(var n=0 ; n<locations.length ; n++){
var latLng_item = new google.maps.LatLng(locations[n].lat, locations[n].lng);
// Creating a marker and putting it on the map
var marker_new = new google.maps.Marker({
position: latLng_item,
title: 'sample'
});
marker_new.setIcon(locations[n].icon);
marker_new.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Untuk mengexplore lebih lanjut tentang google map api, bisa langsung ke documentasinya
Sekian dulu pembahasannya, pada posting selajutnya akan dibahasa penggunakan google map api di android.
Selamat mencoba, terima kasih :)
- Referensi :
No comments:
Post a Comment