Getting Latitude and Longitude from Google Places search api using Javascript

Question

How do I get the longitude and latitude from the searched location with the google maps place search box api.

Im using the same code as the google demo - https://de

Answer 1

navigator.geolocation.getCurrentPosition(success => {

  console.log(success) // `have the lat and long`

}, failure =>{

//`enter code here if failed`

});

Answer 2

function GetLatlong() {
  var geocoder = new google.maps.Geocoder();
  var address = document.getElementById('textboxid').value;

  geocoder.geocode({
    'address': address
  }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
    }
  });
}

You can use the above function which will give you the latitude and longitude for the area entered by user.

Answer 3

HTML:

<input type="text" id="address" name="address" value=""> //Autocomplete input address

<input type="hidden" name="s_latitude" id="s_latitude" value="" /> //get latitude
<input type="hidden" name="s_longitude" id="s_longitude" value="" /> //get longitude

Javascript:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap"
async defer></script>

<script>
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("Autocomplete's returned place contains no geometry");
                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();
            }
        });
    }
});
</script>

Answer 4

The code on the link you provide shows a function to do when a search is entered. First, it creates an empty array of markers (the pins you see on the map once you perform a search).

So, check the function starting with:

google.maps.event.addListener(searchBox, 'places_changed', function() {

You'll see later on that a marker has been created (there's even a comment):

// Create a marker for each place.
var marker = new google.maps.Marker({
    map: map,
    icon: image,
    title: place.name,
    position: place.geometry.location
});

So, on place.geometry.location you have a Google Maps Location object. You could use place.geometry.location.lat() and place.geometry.location.lng().

Check here, too: https://stackoverflow.com/a/15315483/1012139

Answer 5

From the docs:

// Autocomplete Options
var defaultBounds = new google.maps.LatLngBounds();
var options = {
  types: ['(cities)'],
  bounds: defaultBounds
};

// get DOM's input element
var input = document.getElementById('location_address');

// Make Autocomplete instance
var autocomplete = new google.maps.places.Autocomplete(input, options);

// Listener for whenever input value changes            
autocomplete.addListener('place_changed', function() {

  // Get place info
  var place = autocomplete.getPlace();

  // Do whatever with the value!
  console.log(place.geometry.location.lat());
});