Google Maps API - how to get latitude and longitude from Autocomplete without showing the map

Question

I m trying to get latitude and longitude from Autocomplete Google Maps API without showing the map  In my script autocompletion works well  but I can t get the latitude and longitude    x000D   x000D       lt script type  text javascript  gt  x000D         function initialize     x000D       x000D       var options     x000D        types     cities    x000D          x000D       x000D       var input   document getElementById  searchTextField    x000D       var autocomplete   new google maps places Autocomplete input  options   x000D        x000D         google maps event addDomListener window   load   initialize   x000D       x000D         var geocoder   new google maps Geocoder    x000D          var address   autocomplete  x000D       x000D      geocoder geocode     address   address   function results  status    x000D       x000D        if  status    google maps GeocoderStatus OK    x000D          var latitude   results 0  geometry location lat    x000D          var longitude   results 0  geometry location lng    x000D          alert latitude   x000D           x000D           x000D       x000D       lt  script gt  x000D   x000D   x000D

User · Answer

You can get from the same api without any additional api or url call.

HTML

<input class="wd100" id="fromInput" type="text" name="grFrom" placeholder="From" required/>

Javascript

var input = document.getElementById('fromInput');
var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-33.8902, 151.1759),
    new google.maps.LatLng(-33.8474, 1512631)
)

var options = {
bounds: defaultBounds   
}

var autocomplete = new google.maps.places.Autocomplete(input, options);
var searchBox = new google.maps.places.SearchBox(input, {
         bounds: defaultBounds
});


google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();


console.log(places[0].geometry.location.G); // Get Latitude
console.log(places[0].geometry.location.K); // Get Longitude

//Additional information
console.log(places[0].formatted_address); // Formated Address of Place
console.log(places[0].name); // Name of Place






    if (places.length == 0) {
      return;
    }

    var bounds = new google.maps.LatLngBounds();
    console.log(bounds);
     });
   }

User · Answer

You can t get latitude longitude from autocomplete API since the data generated by google from that API doesn t contain latitude and logitude field  Example -        predictions                        description     IIT Mumbai  Mumbai  Maharashtra  India             id     ac3235cda973818a89b5fe21ad0f5261ac9b6723             matched substrings                                    length    10                  offset    0                                     reference     CkQ0AAAAHWg-RSngiYHHdz yqyFKmfSoBwT- PW0k8qQDhsbiVrk7BlPHCyJb58OthledMUTGYS5Vhec1Zj2L7w9Rq0zDxIQrbn05RX1QgWHkSXsmTk1TRoU45APW2BBRIUsA3t6XBy 8s0BPPA             terms                                    offset    0                  value     IIT Mumbai                                               offset    12                  value     Mumbai                                               offset    20                  value     Maharashtra                                               offset    33                  value     India                                      types       establishment    geocode                      status     OK      You can use the Google API to get the Longitude and Latitude from your address  As you already said  you should implement a hidden field where the result should be inserted  Then you can save the location together with the coordinates   e g https   maps googleapis com maps api geocode json address IIT 20Area  20Mumbai  20Maharashtra  20India amp sensor false  I recently implemented this function in one of my projects   function getLatLngFromAddress city  country      var address   city        country    var geocoder   new google maps Geocoder       geocoder geocode     address   address   function results  status         if  status    google maps GeocoderStatus OK              latitude   val results 0  geometry location Pa             longitude   val results 0  geometry location Qa          else         console log  Geocode was not successful for the following reason      status

User · Answer

Yes you can   var place   autocomplete getPlace     document getElementById  lat   value   place geometry location lat    document getElementById  lon   value   place geometry location lng

User · Answer

As per late 2020 this as easy as follows  For the geometry key to be presented on a place selected from the places dropdown  the field geometry should be set on Autocomplete object instance with setFields   method  The code should look like this  Load the API library   lt script src  quot https   maps googleapis com maps api js key API KEY amp libraries places amp callback initAutocomplete quot   Init the autocomplete and process the selected place data generally same as all answers above  But use autocomplete setFields   geometry    to get coordinates back  const autocomplete      Init the autocomplete object function initAutocomplete         autocomplete   new window google maps places Autocomplete          document getElementById  current location      types    quot geocode quot                        This is where you set  geometry  field to be returned with the place      autocomplete setFields   address component    geometry         lt --      autocomplete addListener  quot place changed quot   fillInAddress         Process the address selected by user function fillInAddress         const place   autocomplete getPlace            Here you can get your coordinates like this     console log place geometry location lat         console log place geometry location lng        See the Google API docs on Autocomplete setFields and geometry option

User · Answer

Only need     var place   autocomplete getPlace       get lat var lat   place geometry location lat       get lng var lng   place geometry location lng

User · Answer

Google Places API also provides REST api including Places Autocomplete  https   developers google com places documentation autocomplete  But the data retrieve from the service must use for a map

User · Answer

HTML   lt input type  quot text quot  id  quot address quot  name  quot address quot  value  quot  quot  gt    Autocomplete input address   lt input type  quot hidden quot  name  quot s latitude quot  id  quot s latitude quot  value  quot  quot    gt    get latitude  lt input type  quot hidden quot  name  quot s longitude quot  id  quot s longitude quot  value  quot  quot    gt    get longitude  Javascript   lt script src  quot https   maps googleapis com maps api js key API KEY amp libraries places amp callback initMap quot  async defer gt  lt  script gt    lt script gt  var input   document getElementById  address    var originLatitude   document getElementById  s latitude    var originLongitude   document getElementById  s longitude     var originAutocomplete   new google maps places Autocomplete input         originAutocomplete addListener  place changed   function event        var place   originAutocomplete getPlace         if  place hasOwnProperty  place id              if   place geometry                       window alert  quot Autocomplete s returned place contains no geometry quot                    return                    originLatitude value   place geometry location lat            originLongitude value   place geometry location lng          else           service textSearch                   query  place name            function results  status                if  status    google maps places PlacesServiceStatus OK                    originLatitude value   results 0  geometry location lat                    originLongitude value   results 0  geometry location lng                                         lt  script gt

User · Answer

You can get lat  lng from the place object i e   var place   autocomplete getPlace     var latitude   place geometry location lat    var longitude   place geometry location lng

User · Answer

You can use the code below    lt script src  http   maps googleapis com maps api js libraries places  type  text javascript  gt  lt  script gt    lt script type  text javascript  gt      function initialize             var input   document getElementById  searchTextField            var autocomplete   new google maps places Autocomplete input           google maps event addListener autocomplete   place changed   function                  var place   autocomplete getPlace                document getElementById  city2   value   place name              document getElementById  cityLat   value   place geometry location lat                document getElementById  cityLng   value   place geometry location lng                  alert  This function is working                   alert place name                 alert place address components 0  long name                          google maps event addDomListener window   load   initialize     lt  script gt    and this part is inside your form    lt input id  searchTextField  type  text  size  50  placeholder  Enter a location  autocomplete  on  runat  server    gt     lt input type  hidden  id  city2  name  city2    gt   lt input type  hidden  id  cityLat  name  cityLat    gt   lt input type  hidden  id  cityLng  name  cityLng    gt      I hope it helps

[javascript] Google Maps API - how to get latitude and longitude from Autocomplete without showing the map?

Examples related to javascript

Examples related to google-maps-api-3

Examples related to autocomplete

Examples related to latitude-longitude