Mendapatkan Nilai Koordinat (latitude dan longitude) pada Google Maps

Google menyediakan API dimana kita bisa memakainya dalam aplikasi web yang kita bangun. Google maps API ini bisanya digunakan dalam web yang memerlukan tampilan peta untuk menunjukkan suatu lokasi. Dengan menggunakan Google Maps API ini kita bisa meletakkan /menampilkan (meng-embed) peta google maps pada web yang kita buat. Dengan menampilkan peta pada web akan membuat tampilan web menjadi lebih bagus dan interaktif untuk menunjukkan suatu lokasi.
Dalam tutorial sebelumnya yang pernah saya buat (Memasang google maps pada web ) saya sudah menjalaskan bagaimana memasang google maps pada web. Pada kesempatan kali ini saya akan membahas bagaimana cara mendapatkan koordinat (latitude dan longitud) dari sebuah lokasi pada peta Google Maps. Tentunya koordinat tersebut kita dapatkan dengan cara menggeser atau memilih lokasi pada maps interaktif dan selanjutnya kita mendapatkan nilai dari longitude dan latitude nya. Seperti pada gambar dibawah ini,
Pada gambar diatas bisa kita lihat ada nilai longitude dan latitude yang kita peroleh, dengan menggeser peta nilai longitude dan latitude pada kolom tersebut akan berubah sesuai dengan perubahan lokasi peta yang kita pilih.

Untuk mencoba tutorial ini, silahkan ketik kode dibawah ini:

  < script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAgrj58PbXr2YriiRDqbnL1RSqrCjdkglBijPNIIYrqkVvD1R4QxRl47Yh2D_0C1l5KXQJGrbkSDvXFA" type="text/javascript">< / script >
    < script type="text/javascript" >
 function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
        var center = new GLatLng(-7.79722, 110.36880);
        map.setCenter(center, 15);
        geocoder = new GClientGeocoder();
        var marker = new GMarker(center, {draggable: true});  
        map.addOverlay(marker);
        document.getElementById("lat").innerHTML = center.lat().toFixed(5);
        document.getElementById("lng").innerHTML = center.lng().toFixed(5);

   GEvent.addListener(marker, "dragend", function() {
       var point = marker.getPoint();
       map.panTo(point);
       document.getElementById("lat").innerHTML = point.lat().toFixed(5);
       document.getElementById("lng").innerHTML = point.lng().toFixed(5);
        });


  GEvent.addListener(map, "moveend", function() {
    map.clearOverlays();
    var center = map.getCenter();
    var marker = new GMarker(center, {draggable: true});
    map.addOverlay(marker);
    document.getElementById("lat").innerHTML = center.lat().toFixed(5);
    document.getElementById("lng").innerHTML = center.lng().toFixed(5);

  GEvent.addListener(marker, "dragend", function() {
      var point =marker.getPoint();
      map.panTo(point);
      document.getElementById("lat").innerHTML = point.lat().toFixed(5);
      document.getElementById("lng").innerHTML = point.lng().toFixed(5);
        });
 
        });

      }
    }

    function showAddress(address) {
    var map = new GMap2(document.getElementById("map"));
       map.addControl(new GSmallMapControl());
       map.addControl(new GMapTypeControl());
       if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
    document.getElementById("lat").innerHTML = point.lat().toFixed(5);
    document.getElementById("lng").innerHTML = point.lng().toFixed(5);
   map.clearOverlays()
   map.setCenter(point, 14);
   var marker = new GMarker(point, {draggable: true});  
   map.addOverlay(marker);

  GEvent.addListener(marker, "dragend", function() {
      var pt = marker.getPoint();
      map.panTo(pt);
      document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
      document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
        });


  GEvent.addListener(map, "moveend", function() {
    map.clearOverlays();
    var center = map.getCenter();
    var marker = new GMarker(center, {draggable: true});
    map.addOverlay(marker);
    document.getElementById("lat").innerHTML = center.lat().toFixed(5);
    document.getElementById("lng").innerHTML = center.lng().toFixed(5);

  GEvent.addListener(marker, "dragend", function() {
     var pt = marker.getPoint();
     map.panTo(pt);
    document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
    document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
        });
 
        });
            }
          }
        );
      }
    }
    < / script >

  
< body onload="load()" onunload="GUnload()" >


 
 < table  bgcolor="#FFFFCC" width="300">
  < tr >
    < td >Latitude< /td >
    < td >Longitude< /td >
  < /tr >
  < tr >
    < td id="lat">< /td >
    < td id="lng">< /td >
  < /tr >
  
< /table >
 
  < div align="center" id="map" style="width: 600px; height: 400px" >

  
< / body >

simpan koding diatas dengan ekstensi PHP, misalnya get_location.php. jalankan atau panggil file PHP tersebut pada browser, pastikan komputer atau server anda terkoneksi dengan internet. silahkan mencoba..