Membuat Google Maps Marker

Jaka Kamis, 16 Maret 2017 14:22:35 Web Development 26652

Bagaimana cara membuat Marker (penandaan lokasi) pada Google Maps? Pada postingan kali ini kita akan membahas Cara Membuat Google Maps Marker Untuk menambahkan Simple Marker suatu titik koordinat (Latitude & Longitude) pada Google Maps kita bisa menggunakan kode yang simple seperti di bawah ini :

var marker = new google.maps.Marker({
position: new google.maps.LatLng(-6.170170, 106.831399),
map: map,
});

berikut saya contohkan kode lengkapnya dalam bentuk file html untuk penandaan lokasi Masjid Istiqlal

<!DOCTYPE html>
<html>

<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>

<script>
function loadMap() {

var mapOptions = {
center:new google.maps.LatLng(-6.170170, 106.831399),
zoom:7
}

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

var marker = new google.maps.Marker({
position: new google.maps.LatLng(-6.170170, 106.831399),
map: map,
});
}
</script>

</head>

<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>

</html>

Dengan kode di atas kita sudah bisa menampilkan Google Maps Marker sesuai dengan lokasi yang kita inginkan, kita hanya tinggal merubah titik koordinatnya saja (Latitude & Longitude) untuk membuat Marker sesuai dengan lokasi yang kita inginkan. Contohnya bisa dilihat pada web ini pada bagian Widget Kontak Kami.

Sekian tutorial Cara Membuat Google Maps Marker ini, semoga bermanfaat.