Get latitude and longitude based on location name with Google Autocomplete API

Question

I have a textbox in my page which gets a location name and button with text getLat amp Long  Now on clicking my button I have to show an alert of latitude and longitude of the location in the textbox  Any suggestion

User · Answer

I hope this will be more useful for future scope contain auto complete Google API feature with latitude and longitude

var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();

Complete View

<!DOCTYPE html>
<html>
    <head>
    <title>Place Autocomplete With Latitude & Longitude </title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
#pac-input {
    background-color: #fff;
    padding: 0 11px 0 13px;
    width: 400px;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    text-overflow: ellipsis;
}
#pac-input:focus {
    border-color: #4d90fe;
    margin-left: -1px;
    padding-left: 14px;  /* Regular padding-left + 1. */
    width: 401px;
}
}
</style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script>


  function initialize() {
        var address = (document.getElementById('pac-input'));
        var autocomplete = new google.maps.places.Autocomplete(address);
        autocomplete.setTypes(['geocode']);
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

        var address = '';
        if (place.address_components) {
            address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
                ].join(' ');
        }
        /*********************************************************************/
        /* var address contain your autocomplete address *********************/
        /* place.geometry.location.lat() && place.geometry.location.lat() ****/
        /* will be used for current address latitude and longitude************/
        /*********************************************************************/
        document.getElementById('lat').innerHTML = place.geometry.location.lat();
        document.getElementById('long').innerHTML = place.geometry.location.lng();
        });
  }

   google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    </head>
    <body>
<input id="pac-input" class="controls" type="text"
        placeholder="Enter a location">
<div id="lat"></div>
<div id="long"></div>
</body>
</html>

User · Answer

Enter the location by Autocomplete and rest of all the fields   latitude and Longititude values get automatically filled  Replace API KEY with your Google API key    lt html gt   lt head gt   lt meta name  viewport  content  initial-scale 1 0  user-scalable no  gt   lt meta charset  utf-8  gt   lt script src  https   maps googleapis com maps api js v 3 exp amp sensor false amp libraries places  gt  lt  script gt    lt link type  text css  rel  stylesheet  href  https   fonts googleapis com css family Roboto 300 400 500  gt   lt  head gt    lt body gt   lt textarea placeholder  Enter Area name to populate Latitude and Longitude  name  address  onFocus  initializeAutocomplete    id  locality   gt  lt  textarea gt  lt br gt    lt input type  text  name  city  id  city  placeholder  City  value     gt  lt br gt   lt input type  text  name  latitude  id  latitude  placeholder  Latitude  value     gt  lt br gt   lt input type  text  name  longitude  id  longitude  placeholder  Longitude  value     gt  lt br gt   lt input type  text  name  place id  id  location id  placeholder  Location Ids  value     gt  lt br gt    lt script type  text javascript  gt    function initializeAutocomplete        var input   document getElementById  locality           var options              types     regions              componentRestrictions   country   IN                 var options           var autocomplete   new google maps places Autocomplete input  options        google maps event addListener autocomplete   place changed   function           var place   autocomplete getPlace          var lat   place geometry location lat          var lng   place geometry location lng          var placeId   place place id           to set city name  using the locality param       var componentForm             locality   short name                  for  var i   0  i  lt  place address components length  i              var addressType   place address components i  types 0           if  componentForm addressType               var val   place address components i  componentForm addressType              document getElementById  city   value   val                          document getElementById  latitude   value   lat        document getElementById  longitude   value   lng        document getElementById  location id   value   placeId               lt  script gt   lt  body gt   lt  html gt    lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt   lt script src    maps googleapis com maps api js libraries places amp key API KEY  gt  lt  script gt     lt script src  https   fonts googleapis com css family Roboto 300 400 500 gt  lt  script gt

User · Answer

The below is the code that i used  It s working perfectly   var geo   new google maps Geocoder  geo geocode   address  address  function results  status       if  status    google maps GeocoderStatus OK                          var myLatLng   results 0  geometry location              Add some code to work with myLatLng                      else           alert  Geocode was not successful for the following reason      status               Hope this will help

User · Answer

http   maps googleapis com maps api geocode OUTPUT address YOUR LOCATION amp sensor true  OUTPUT   json or xml   for detail information about google map api go through url   http   code google com apis maps documentation geocoding index html  Hope this will help

User · Answer

I would suggest the following code  you can use this  lt script language  JavaScript  src  http   j maxmind com app geoip js  gt  lt  script gt   to get the latitude and longitude of a location  although it may not be so accurate however it worked for me   code snippet below   lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt Using Javascript s Geolocation API lt  title gt    lt script type  text javascript  src  http   j maxmind com app geoip js  gt  lt  script gt   lt script src    ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt   lt  head gt   lt body gt   lt div id  mapContainer  gt  lt  div gt     lt script type  text javascript  gt           var lat   geoip latitude            var long   geoip longitude            document write  Latitude    lat   lt  br gt Longitude    long     lt  script gt    lt  body gt   lt  html gt

User · Answer

I hope this can help someone in the future   You can use the Google Geocoding API  as said before  I had to do some work with this recently  I hope this helps    lt  DOCTYPE html gt   lt html gt       lt head gt           lt script src  https   maps googleapis com maps api js v 3 exp amp sensor false amp libraries places  gt  lt  script gt           lt script type  text javascript  gt          function initialize             var address    document getElementById  my-address             var autocomplete   new google maps places Autocomplete address           autocomplete setTypes   geocode             google maps event addListener autocomplete   place changed   function                 var place   autocomplete getPlace                if   place geometry                    return                         var address               if  place address components                address                      place address components 0   amp  amp  place address components 0  short name                          place address components 1   amp  amp  place address components 1  short name                          place address components 2   amp  amp  place address components 2  short name                          join                             function codeAddress         geocoder   new google maps Geocoder        var address   document getElementById  my-address   value      geocoder geocode     address   address   function results  status          if  status    google maps GeocoderStatus OK           alert  Latitude    results 0  geometry location lat           alert  Longitude    results 0  geometry location lng                     else           alert  Geocode was not successful for the following reason      status                       google maps event addDomListener window   load   initialize             lt  script gt       lt  head gt       lt body gt           lt input type  text  id  my-address  gt           lt button id  getCords  onClick  codeAddress     gt getLat amp Long lt  button gt       lt  body gt   lt  html gt    Now this has also an autocomlpete function which you can see in the code  it fetches the address from the input and gets auto completed by the API while typing   Once you have your address hit the button and you get your results via alert as required  Please also note this uses the latest API and it loads the  places  library  when calling the API uses the  libraries  parameter    Hope this helps  and read the documentation for more information  cheers   Edit  1  Fiddle

User · Answer

You can use the Google Geocoder service in the Google Maps API to convert from your location name to a latitude and longitude  So you need some code like   var geocoder   new google maps Geocoder    var address   document getElementById  address   value  geocoder geocode     address   address   function results  status      if  status    google maps GeocoderStatus OK               do something with the geocoded result                   results 0  geometry location latitude          results 0  geometry location longitude           Update  Are you including the v3 javascript API    lt script type  text javascript       src  http   maps google com maps api js sensor set to true or false  gt   lt  script gt

[javascript] Get latitude and longitude based on location name with Google Autocomplete API

Examples related to javascript

Examples related to google-maps

Examples related to geocoding

Examples related to latitude-longitude