SD Shared

Membuat Petunjuk Lokasi Sekarang dengan Geolocation pada Google Map Api

Pertama kita initialize map utama, seperti dibawah ini :

function initMap() {

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

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

}

Kemudian tambah kode dibawah ini pada method initMap()

//Mendapatkan koordinat device yang sekarang
   navigator.geolocation.getCurrentPosition(function(position) {
      //Membuat variabel untuk posisi     
      var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      //Mengambil gambar
      var img = "img/you.png";
      //Membuat marker pada koordinat tersebut
      var markercp = new MarkerWithLabel({
         position: geolocate,
         draggable: true,
         map: map,
         icon :img
      });
   });

Kode lengkapnya dibawah ini :

var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();

   //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
   }); 
   //Mendapatkan koordinat device yang sekarang
   navigator.geolocation.getCurrentPosition(function(position) {
      //Membuat variabel untuk posisi     
      var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      //Mengambil gambar
      var img = "img/you.png";
      //Membuat marker pada koordinat tersebut
      var markercp = new MarkerWithLabel({
         position: geolocate,
         draggable: true,
         map: map,
         icon :img
      });
   });
}

Berikan komenter jika merasa terbantu, terimakasih.