Cara menambah description pada marker google map (bag 3)

Sebelumnya saya sudah jelaskan tentang cara menambah marker kedalam google map. Sekarang saya akan jelaskan tentang cara menambahkan description kepada marker. Description ini akan muncul apabila markernya diklik oleh pengunjung. Saat diklik tampil seperti modal box berisi keterangan peta. Isi description ini menggunakan bahasa html standar.

Inilah kode terakhir kita setelah ditambahkan description marker:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-2.1788761,101.4415862);
  var mapOptions = {
    zoom: 13,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });



//marker baru
  var latlng2 = new google.maps.LatLng(-2.1248409,101.4273383);
 
 //description untuk marker
  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';
  
  // membuat sebuah window modal box
  var infowindow = new google.maps.InfoWindow({
      content: contentString, maxWidth: 400
  });

  var marker = new google.maps.Marker({    
      position: latlng2,
      map: map,
      title: 'tes'
  });

  //even listener google map utk menampilkan modal box description
  google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

 

(Visited 2,480 times, 1 visits today)

Related Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

WhatsApp chat