Find Geo Location By Longitude and Latitude using Google Map API

Latitude and Longitude are unit for geographical cordinates and you frequently need to pick geolocation for user profiles, outlets etc. Here we described the use of Google Geo Location API.

To create map and map events first you need to register on google and take a geo location API Key.

To get the Key follow the Following link:

https://console.developers.google.com/apis/api/maps-backend.googleapis.com/

In Google developer console create a new project and Enable Google Maps JavaScript API and Google Maps Geocoding API. You will get the Google Map API Key there.

Now in your page write HTML:

<html>
   <head>
      <style>
         #mapCanvas {
            width: 690px;
            height: 370px;            
         }         
      </style>
   </head>
   <body>
         <h2>Find Geo Location By Longitude and Latitude</h2>
         <table>
            <tr>
               <td>
                  <textarea id="address" rows="3" cols="40"></textarea></td>               
               <td valign="top">
                  <input type="button" value="Get Map" onClick="codeAddress()">
               </td>            
            </tr>
         </table>
         <table width="100%"  border="0" align="left" cellpadding="2" cellspacing="4">
            <tr>
               <td width="6%" class="label" >Latitude:</td>
               <td width="14%">
                  <input name="lati" type="text" style="width:150px;" class="txtFieldnol" id="lati" size="15" value="" />
               </td>
               <td width="8%" class="label">Longitude:</td>
               <td width="14%">
                  <input name="longi" type="text" style="width:150px;" class="txtFieldnol" id="longi" size="15" value=""   />
               </td>
               <td>
                     <input type="button" name="get" value="Change"  class="Thbutton gray medium" onClick="post_value();" />                  
               </td>
            </tr>
         </table> 
         <div id="mapCanvas"></div>
         <div id="infoPanel">
            <b>Marker status:</b>
            <div id="markerStatus"><i>Click and drag the marker.</i></div>
            <b>Current position:</b>
            <div id="info"></div>
         </div>
      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxx"></script>
      <script type="text/javascript" src="mapinit.js"></script>
   </body>
</html>

Now create a Javascript File mapinit.js and put the following:

// Initialise Variables for Google Map API
var geocoder;
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var startLong = 26.8394676242502;
var startLat = 80.9542695781251;
// Function to Update Address of Geo Location
function geocodePosition(pos) {
   geocoder.geocode({
      latLng: pos
   }, function(responses) {
      if (responses && responses.length > 0) {
         updateMarkerAddress(responses[0].formatted_address);
      } else {
         updateMarkerAddress('Cannot determine address at this location.');
      }
   });
}
// Function to Update Marker's Status
function updateMarkerStatus(str) {
   document.getElementById('markerStatus').innerHTML = str;
}
// Function to Update Marker Position
function updateMarkerPosition(latLng) {
   document.getElementById('info').innerHTML = [
      latLng.lat(),
      latLng.lng()
   ].join(', ');
   document.getElementById('lati').value = latLng.lat();
   document.getElementById('longi').value = latLng.lng();

}
// Function to Update Address in Textbox 
function updateMarkerAddress(str) {
   document.getElementById('address').innerHTML = str;
}
// Function to Initilise Google Map
function initialize() {
   var latLng = new google.maps.LatLng(startLong, startLat);
   map = new google.maps.Map(document.getElementById('mapCanvas'), {
      zoom: 8,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });
   marker = new google.maps.Marker({
      position: latLng,
      title: 'Your Position',
      map: map,
      draggable: true
   });

   // Update current position info.
   updateMarkerPosition(latLng);
   geocodePosition(latLng);

   // Add dragging event listeners.
   google.maps.event.addListener(marker, 'dragstart', function() {
      updateMarkerStatus('Dragging...');
   });

   google.maps.event.addListener(marker, 'drag', function() {
      updateMarkerStatus('Dragging...');
      updateMarkerPosition(marker.getPosition());
   });

   google.maps.event.addListener(marker, 'dragend', function() {
      updateMarkerStatus('Drag ended');
      geocodePosition(marker.getPosition());
   });
}
// Function to Convert Address to Geo Position
function codeAddress() {
   geocoder = new google.maps.Geocoder();
   var address = document.getElementById("address").value;
   geocoder.geocode({'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
         map.setCenter(results[0].geometry.location);

         document.getElementById("lati").value = results[0].geometry.location.lat();
         document.getElementById("longi").value = results[0].geometry.location.lng();

         marker.position = results[0].geometry.location;
         marker.map = map;
         map.setCenter(results[0].geometry.location);
         map.draggable = true;
         marker.setPosition(results[0].geometry.location);
      } else {
         alert("Geocode was not successful for the following reason: " + status);
      }
   });
}
// Function to Update Marker Using Textbox Longitude and Latitude
function post_value()
{
   var latLngPos = new google.maps.LatLng(document.getElementById("lati").value, document.getElementById("longi").value);
   marker.position = latLngPos;
   marker.map = map;
   map.setCenter(latLngPos);
   map.draggable = true;
   marker.setPosition(latLngPos);
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);

Your final output will be work like this:

https://devstudioonline.com/longitude-latitude-picker

Keywords: