Pada artikel Memasang Google Map pada website telah dibahas bagaimana kode sederhana untuk menampilkan google map pada website menggunakan html dan javascript. Pada artikel kali ini akan di bahas bagaimana menambahkan marker / penanda pada google map yang telah dibuat.
Untuk membuat tanda baru kita bisa gunakan kode dibawah ini:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude
map: map,
title: 'Bandung'
});Kode Lengkapnya akan terlihat seperti ini
<!DOCTYPE html>
<html>
<head>
<!-- Load google API -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var options = {
center:new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude bandung
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP // Tipe ROADMAP
};
// create map object
var map=new google.maps.Map(document.getElementById("googleMap"),options);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude
map: map,
title: 'Bandung'
});
}
// membuat Event Listener untuk memanggil fungsi initialize pada saat halaman selesai di load
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<!-- Map container -->
<div id="googleMap" style="width:500px;height:280px;"></div>
</body>
</html>Multiple Marker
Untuk membuat lebih dari satu marker, kita hanya perlu menambahkan variable marker diatas dan mengganti sesuai opsi yang diinginkan.
function initialize() {
var options = {
center:new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude bandung
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP // Tipe ROADMAP
};
// create map object
var map=new google.maps.Map(document.getElementById("googleMap"),options);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude
map: map,
title: 'Bandung'
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-6.211544,106.845172), // longitude latitude
map: map,
title: 'Jakarta'
});
}
// membuat Event Listener untuk memanggil fungsi initialize pada saat halaman selesai di load
google.maps.event.addDomListener(window, 'load', initialize);
No Comments
Leave a comment Cancel