Menu
I have a textbox in my page which gets a location name and button with text getLat&Long. Now on clicking my button I have to show an alert of latitude and longitude of the location in the textbox. Any suggestion?
666
you can retrive predictions programaticly using AutocompleteService Class with the getPlacePredictions() method [1] to retrive place_id [2]. then with this place_id you can use the Places Details Service [3] to get coordinates and more details of the place. Save this answer.
Go to the Google Cloud Console. Click the Select a project button, then select the same project you set up for the Maps JavaScript API and click Open. From the list of APIs on the Dashboard, look for Places API. If you see the API in the list, you're all set.
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?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"> </script> 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:
<!DOCTYPE html> <html> <head> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> <script type="text/javascript"> 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] && 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(' '); } }); } 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); </script> </head> <body> <input type="text" id="my-address"> <button id="getCords" onClick="codeAddress();">getLat&Long</button> </body> </html> 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
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
