SD Shared

Wednesday 4 December 2013

Menambahkan Label pada Marker Google Map API

Diposkan oleh Sujud Dermawan di 23:00 Label:
Pertama download markerwithlabel.js Download

Kemudian load markedwithlabel.js pada tag head

<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/markerwithlabel.js"></script>
</head>

Setelah itu konfigurasi untuk map awal, seperti dibawah ini :

//Mengambil koordinat utama
   var latLng = new google.maps.LatLng(-6.183905,106.826838);

   //Membuat map utama
   var map = new google.maps.Map(document.getElementById('map_canvas'), {
   zoom: 11,
   center: latLng,
   mapTypeControl: false,
   mapTypeId: google.maps.MapTypeId.ROADMAP
   });

Kemudian membuat marker dengan tambahan label, seperti dibawah ini :

var marker1 = new MarkerWithLabel({
      position: new google.maps.LatLng(-6.168374,106.7586),
      draggable: true,
      map: map,
      icon :image,
      labelContent: "<b>Ini Label</b>", //Isi dalam tag label
      labelAnchor: new google.maps.Point(68, -4), //Posisi label terhadap marker
      labelClass: "labels" // Class css untuk label
   });

Berikut dibawah ini script lengkapnya :

function initMap() {

   //Mengambil koordinat utama
   var latLng = new google.maps.LatLng(-6.183905,106.826838);

   //Membuat map utama
   var map = new google.maps.Map(document.getElementById('map_canvas'), {
   zoom: 11,
   center: latLng,
   mapTypeControl: false,
   mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   //Variabel untuk mengambil lokasi gambar
   var image = 'img/iconsc32.png';
      
      var marker1 = new MarkerWithLabel({
      position: new google.maps.LatLng(-6.168374,106.7586),
      draggable: true,
      map: map,
      icon :image,
      labelContent: "<b>Ini Label</b>", //Isi dalam tag label
      labelAnchor: new google.maps.Point(68, -4), //Posisi label terhadap marker
      labelClass: "labels" // Class css untuk label
   });
   //Load method initmap agar bisa map bisa langsung ditampilkan
   google.maps.event.addDomListener(window, 'load', initMap);
}
</script>

Komentar jika merasa terbantu, terimakasih.

No comments:

Berikan Komentar

Subscribe to: Post Comments (Atom)