Mendapatkan Lokasi GPS Pengunjung Web dan Menampilkan Lokasi Latitude Longitude dari Web Browser di Google Map

Kadang kita ingin Mendapatkan Lokasi GPS Pengunjung Web dan Menampilkan Lokasi Latitude Longitude dari Web Browser di Google Map. Atau lokasi tempat pengunjung membuka browser web tersebut akan digunakan untuk kepentingan lain juga bisa, misalnya untuk kebutuhan statistik marketing, kebutuhan perusahaan dan sebagainya. Kali ini coba kita dapatkan lokasi GPS pengunjung dari Browser Web yang digunakan oleh pengguna, lebih khusus lagi Web Browser yang sudah mendukung Navigator Geolocation yang merupakan fitur atau fasilitas dari standar HTML 5.

Aplikasi web yang akan dibuat berguna untuk menampilkan lokasi latitude longitude pengunjung web sehingga tampak di peta Google Map. Kode program halaman HTML dan Javascriptnya sebagai berikut, dalam hal ini penulis beri nama google-map-get-location.html :


<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=id" type="text/javascript"></script>

<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

// http://cariprogram.blogspot.com
// nuramijaya@gmail.com

function initialize() {
  var latLng = new google.maps.LatLng(-7.8, 110.3666667);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 12,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Ambarrukmo Plaza Yogyakarta',
    map: map,
    draggable: true
  });

// Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var marker1 = new google.maps.Marker({
position : pos,
animation:google.maps.Animation.BOUNCE,
title : 'lokasi',
//icon : 'assets/icon.png',
map : map,
draggable : true
});
 map.setCenter(pos);
 /*google.maps.event.addListener(marker1, 'drag', function() {
updateMarkerPosition(marker1.getPosition());
});
updateMarkerPosition(marker1.getPosition())*/
    }, function() {
      //=handleNoGeolocation(true);
        var marker1 = new google.maps.Marker({
position : latLng,
animation:google.maps.Animation.BOUNCE,
title : 'lokasi',
//icon : 'assets/icon.png',
map : map,
draggable : true
});
/*google.maps.event.addListener(marker1, 'drag', function() {
updateMarkerPosition(marker1.getPosition());
});
updateMarkerPosition(marker1.getPosition())*/
    });
  } else {
    // Browser doesn't support Geolocation
    //=handleNoGeolocation(false);
   var marker1 = new google.maps.Marker({
position : latLng,
animation:google.maps.Animation.BOUNCE,
title : 'lokasi',
//icon : 'assets/icon.png',
map : map,
draggable : true
});
/*google.maps.event.addListener(marker1, 'drag', function() {
updateMarkerPosition(marker1.getPosition());
});
updateMarkerPosition(marker1.getPosition())*/
  }

}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<style>
  #mapCanvas {
    width: 500px;
    height: 300px;
    float: left;
  }
</style>
<br />
<div id="mapCanvas"></div>

Untuk menjalankan aplikasi web tersebut ternyata penulis tidak berhasil jika hanya dari WIndows Explorer filenya diklik dua kali sehingga muncul di Web Browser, karena Browser tidak mau memberikan lokasi GPS apabila caranya seperti itu. Solusinya file harus dijalankan dengan Web Server misalnya Apache (XAMPP atau WAMP) atau IIS. Tentu saja bisa juga diupload dahulu di web hosting online. Apabila menggunakan XAMPP bisa diletakkan di xampp/htdocs/google-map-get-location.html, sedangkan di WAMP bisa diletakkan di wamp/www/google-map-get-location.html. Seperti biasa, halaman web dapat dipanggil dari Browser Web dengan URL http://localhost/google-map-get-location.html, atau http://127.0.0.1/google-map-get-location.html. Hasilnya :

File project selengkapnya dapat anda download disini. Jika bingung cara download, silakan lihat caranya disini.

Semoga berguna :)