How do I return a longitude and latitude from Google Maps JavaScript geocoder? -
this question has answer here:
when use code below alerting blank value? why 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 not successful following reason: " + status); } }); return loc; } function display(){ var long_lat=codeaddress(); alert(long_lat); }
because function codeaddress executed, assigning empty array loc, executing asynchronous request google geocoder , returns loc, empty, because real value assigned when response google comes. in other words, allert should 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) { // , function processes response if (status == google.maps.geocoderstatus.ok) { loc[0]=results[0].geometry.location.lat(); loc[1]=results[0].geometry.location.lng(); alert( loc ); // place loc contains geocoded coordinates } else { alert("geocode not successful following reason: " + status); } }); // pretty meaningless, because [] // line executed right after creating ajax request, not after response comes return loc; } function display(){ codeaddress(); } this how ajax works... process results in callback handlers.
if want separate geocoding , 'dispalying' 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 define in outer function loc[0]=results[0].geometry.location.lat(); loc[1]=results[0].geometry.location.lng(); display( loc ); } else { alert("geocode not successful following reason: " + status); } }); } function display( long_lat ){ alert(long_lat); } html:
<input type="button" value="encode" onclick="codeaddress()"> can make more generic, if geocode not display. can define callback parameter
codeaddress function: function codeaddress( callback ) { ... geocoder.geocode( { 'address': address}, function(results, status) { ... callback( loc ); // instead of dispaly( loc ); ... } ... } codeaddress( display ); // execute geocoding 
Comments
Post a Comment