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.
<script type="text/javascript">_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_
</script>This question is related to
javascript
google-maps-api-3
autocomplete
latitude-longitude
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:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initAutocomplete"
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: ["geocode"] }
);
// !!! This is where you set `geometry` field to be returned with the place.
autocomplete.setFields(['address_component', 'geometry']); // <--
autocomplete.addListener("place_changed", 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.
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.
Yes you can:
var place = autocomplete.getPlace();
document.getElementById('lat').value = place.geometry.location.lat();
document.getElementById('lon').value = place.geometry.location.lng();
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.
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);
}
});
}
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();
You can use the code below.
<script src="http://maps.googleapis.com/maps/api/js?libraries=places" type="text/javascript"></script>
<script type="text/javascript">
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);
</script>
and this part is inside your form:
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
<input type="hidden" id="city2" name="city2" />
<input type="hidden" id="cityLat" name="cityLat" />
<input type="hidden" id="cityLng" name="cityLng" />
I hope it helps.
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>
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);
});
}
Only need:
var place = autocomplete.getPlace();
// get lat
var lat = place.geometry.location.lat();
// get lng
var lng = place.geometry.location.lng();
Source: Stackoverflow.com