1. Javascript

Menambahkan marker pada google map

Google Map Marker

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);
Google Map Multiple Marker
Comments to: Menambahkan marker pada google map

    Your email address will not be published. Required fields are marked *

    Attach images - Only PNG, JPG, JPEG and GIF are supported.