How do I return a longitude and latitude from Google Maps JavaScript geocoder?
60,395
because your function codeAddress
is executed, assigning empty array to loc, executing asynchronous request to google geocoder and returns loc, which is empty, because its real value is assigned when response from google comes. In other words, allert should be inside response handler:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
var loc=[];
// next line creates asynchronous request
geocoder.geocode( { 'address': address}, function(results, status) {
// and this is function which processes response
if (status == google.maps.GeocoderStatus.OK) {
loc[0]=results[0].geometry.location.lat();
loc[1]=results[0].geometry.location.lng();
alert( loc ); // the place where loc contains geocoded coordinates
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
// pretty meaningless, because it always will be []
// this line is executed right after creating AJAX request, but not after its response comes
return loc;
}
function display(){
codeAddress();
}
this is how AJAX works... process results in callback handlers.
if you want to separate geocoding and 'dispalying' you can execute display function inside handler:
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var loc=[]; // no need to define it in outer function now
loc[0]=results[0].geometry.location.lat();
loc[1]=results[0].geometry.location.lng();
display( loc );
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function display( long_lat ){
alert(long_lat);
}
html:
<input type="button" value="Encode" onclick="codeAddress()">
you can make it even more generic, if you will geocode not only to display. Then you can define callback as parameter to
codeAddress
function:
function codeAddress( callback ) {
...
geocoder.geocode( { 'address': address}, function(results, status) {
...
callback( loc ); // instead of dispaly( loc );
...
}
...
}
codeAddress( display ); // to execute geocoding
Related videos on Youtube
Author by
manraj82
Updated on March 10, 2020Comments
-
manraj82 about 4 years
When I use the code below its alerting a blank value? why is that?
HTML
<body onload="initialize()"> <div id="map_canvas" style="width: 320px; height: 480px;"></div> <div> <input id="address" type="textbox" value="Sydney, NSW"> <input type="button" value="Encode" onclick="display()"> </div> </body>
JavaScript
var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function codeAddress() { var address = document.getElementById("address").value; var loc=[]; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { loc[0]=results[0].geometry.location.lat(); loc[1]=results[0].geometry.location.lng(); } else { alert("Geocode was not successful for the following reason: " + status); } }); return loc; } function display(){ var long_lat=codeAddress(); alert(long_lat); }
-
manraj82 about 13 yearsthanks for your answer,is there any way of returning those values to a variable? bcos i intend to use it in another function as a parameter
-
manraj82 about 13 yearsthis still doesnt solve the problem i have got,i was planning to get the return values for mutiple postcode.basically i was trying to create a generic function where i can pass a postcode as an argument and get the long and lat values in return.since those values are in the call back i guess it cant be returned.
-
Maxym about 13 years@manraj82: the only place where you would write
return loc;
could be anonymous function passed togeocoder.geocode
function. this anonymous function is executed somewhere inside google scripts, by ajax response processors, so this information will never come to your code. AJAX works though callback executing, but not with returning values... It is out of your control