I'm new to Javascript. I'm trying to use Google api's Gmap v3 to realize a reverse geocodification. I've read many tutorials and wrote a simple code. The problem is that the anonymous function passed to geocoder.geocode() sometimes works but sometimes it doesn't. Thanks for your help!.
function geoCode(latStr,lngStr){
var lat = parseFloat(latStr);
var lng = parseFloat(lngStr);
var latlng = new google.maps.LatLng(lat, lng);
codeLatLng(latlng,function(addr){
alert(addr); // sometimes message appears.
});
}
function codeLatLng(latlng,callback) {
if (geocoder) {
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
callback(results[1].formatted_address);
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
}
I'm not sure whether the Google service would return null or an empty array, but to be safe you could check both using: if (results && results.length > ). Also, are you forgetting that arrays in Javascript are zero-based? You probably want results[0]:
if (results && results.length > 0) {
callback(results[0].formatted_address);
} else {
alert("No results found");
}
By way of explanation: your code would crash on if (results[1]), in cases where "results" is an array of length 0 or 1, hence I'm guessing the intermittent failure.
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'latLng' : position
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
address = results[1].formatted_address;
// alert("Wow ! Got it");
} else {
// alert("No results
// found");
infowindow.setContent("No address found");
}
} else {
// alert("Geocoder failed due
// to: " + status);
infowindow.setContent("Geocoder failed due to: " + status);
}
infowindow.setContent(address + '<br/>' + Timestamp);
});
infowindow.open(marker.get('map'), marker, this);
currentInfoWindow = infowindow;
});
}
once try with the above code
Related
I've been stuck on an issue for a number of days when using the google geo-location api. This is what I've been trying -
function codeAddress(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({"address": address}, function(results, status) {
if (status == "OK") {
return results[0].geometry.location;
} else {
return null;
}
});
}
function generateJSON(origin, destination) {
var origin_loc = codeAddress(origin);
var dest_loc = codeAddress(destination);
....
}
The "origin_loc" variable is coming back unassigned and I haven't been able to figure out why with the debugger. When I log the results[0] to the console it is coming back fine with the object.
Does anyone have any ideas why this is happening?
Thanks
This is what worked for me in the end -
function codeAddresses(addresses, callback) {
var coords = [];
for(var i = 0; i < addresses.length; i++) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address':addresses[i]}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
coords.push(results[0].geometry.location);
if(coords.length == addresses.length) {
callback(coords);
}
}
else {
throw('No results found: ' + status);
}
});
}
}
function generateJSON(origin, destination) {
var addresses = [origin, destination];
codeAddresses(addresses, function(coords) {
var json = { ..... }
....
});
}
Thanks for your help #yuriy636!
I am trying to get the lat long of an address inserted into the form before the form is submitted.
Here is my code:
var success = false;
var getLat = 0;
var getLng = 0;
function getLngLat() {
var address = $(".save-new-address").val();
if(!address) return false;
if(success) return false;
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
map.setCenter(results[0].geometry.location);
success = true;
var newMarker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
$(".save-new-lat").val(results[0].geometry.location.lat);
$(".save-new-lng").val(results[0].geometry.location.lng);
} else {
alert("Geocode was not successful for the following reason: " + status);
};
});
}
$("form#save-new-restaurant").submit(function () {
getLngLat();
if(success) {
return true;
} else {
getLngLat();
$("form#save-new-restaurant").submit();
return false;
}
});
Most of it is just copied from the google developers page. However what I am finding is either the form is submitting too quick, and the details are being retrieved after the above function has finished,
I am just trying to get the data from google when the form is submitted, and when i've got the data I want to then submit the form. How can I do this?
Try this instead
var success = false;
var getLat = 0;
var getLng = 0;
function getLngLat() {
var address = $(".save-new-address").val();
if(!address) return false;
if(success) return false;
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
map.setCenter(results[0].geometry.location);
success = true;
var newMarker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
$(".save-new-lat").val(results[0].geometry.location.lat);
$(".save-new-lng").val(results[0].geometry.location.lng);
$("form#save-new-restaurant").unbind("submit"); // unbinding event so getLngLat doesn't execute again
document.getElementById('save-new-restaurant').submit();
$("form#save-new-restaurant").bind("submit", formSubmitCallBack); // attaching event for further uses if require
} else {
alert("Geocode was not successful for the following reason: " + status);
};
});
}
$("form#save-new-restaurant").bind("submit", formSubmitCallBack);
function formSubmitCallBack() {
getLngLat();
return false;
}
Hope this will help !!
You could use a deferred object.
https://api.jquery.com/jquery.deferred/
$("form#save-new-restaurant").submit(function () {
var lngLat = getLngLat();
$.when(lngLat)
.done(function() {
return true;
})
.fail(function() {
//handle failure
});
}
Then in your other code
function getLngLat() {
//stuff
var deferred = $.Deferred();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//do stuff
deferred.resolve();
} else {
deferred.reject();
}
}
return deferred;
}
A simple one that I cannot seem to get to work properly.
I have the following:
function geocode(address, callback) {
if (typeof (geocoder) == 'undefined') geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
callback({ Latitude: results[0].geometry.location.lat(), Longitude: results[0].geometry.location.lng() });
}
else {
callback(0);
console.log("Geocode was not successful for the following reason: " + status);
}
});
}
That gets called by:
var latitude = '';
var longitude = '';
geocode(self.address(), function (result) {
if (result === 0) {
//Error with geocoding
}
else {
latitude = result.Latitude;
longitude = result.Longitude;
}
});
//Do some stuff with latitude and longitude
Now, the results do return, however they do so asynchronously which is what I thought the callback would overcome e.g. latitude and longitude value are undefined.
I think this i the correct way
var latitude = '';
var longitude = '';
geocode(self.address(), function (result) {
if (result === 0) {
//Error with geocoding
}
else {
....
manage your latitude, longitude
....
}
});
function geocode(address) {
if (typeof (geocoder) == 'undefined') geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude =results[0].geometry.location.lng() });
}
else {
console.log("Geocode was not successful for the following reason: " + status);
}
});
I am working with the google maps API and whenever I return the variable to the initialize function from the codeLatLng function it claims undefined. If I print the variable from the codeLatLng it shows up fine.
var geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
var addr = codeLatLng();
document.write(addr);
}
function codeLatLng() {
var latlng = new google.maps.LatLng(40.730885,-73.997383);
if (geocoder) {
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
return results[1].formatted_address;
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
}
prints out undefined
If I do:
var geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
codeLatLng();
}
function codeLatLng() {
var latlng = new google.maps.LatLng(40.730885,-73.997383);
if (geocoder) {
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
document.write(results[1].formatted_address);
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
}
prints out New York, NY 10012, USA
You can't return the value from the function, the value doesn't exist yet when the function returns.
The geocode method makes an asynchonous call and uses a callback to handle the result, so you have to do the same in the codeLatLng function:
var geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
codeLatLng(function(addr){
alert(addr);
});
}
function codeLatLng(callback) {
var latlng = new google.maps.LatLng(40.730885,-73.997383);
if (geocoder) {
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
callback(results[1].formatted_address);
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
}
You're making an asynchronous request, your codeLatLng() function has finished and returned long before the geocoder is done.
If you need the geocoder data to continue, you'll have to chain your functions together:
function initialize() {
geocoder = new google.maps.Geocoder();
codeLatLng();
}
function codeLatLng() {
var latlng = new google.maps.LatLng(40.730885,-73.997383);
if (geocoder) {
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
initContinued(results[1].formatted_address);
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
}
function initContinued(addr) {
alert(addr);
}
You can get value using localstorage.
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();
}
localStorage.setItem("endlat", latitude);
localStorage.setItem("endlng", longitude);
});
var end_lat = localStorage.getItem("endlat");
var end_lng = localStorage.getItem("endlng");
But it returns previous value.. Returns current value when we click twice...
pass geocoder as a parameter to the codeLatLng() function.
function codeLatLng(geocoder) {
call it like so in your initialize function:
var addr = codeLatLng(geocoder);
That return is not returning from codeLatLng; it's returning from the anonymous function being passed to geocoder.geocode.
I think you'll need to pass the data using another mechanism e.g. a global variable
I'm trying to use the Google geocoder API V3 to plot a location on a map based on an address specified by the user, code is below.
When I make a request directly (e.g. to http://maps.googleapis.com/maps/api/geocode/json?address=peterborough&sensor=false) I get the expected response. However, when I make the same request using the code below, the midpoint variable is always undefined after the getLatLong function has exited.
What am I doing incorrectly?
function loadFromSearch(address)
{
midpoint = getLatLong(address);
mapCentre = midpoint;
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
...
}
function getLatLong(address)
{
var result;
var url = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(address) + '&sensor=false'
$.getJSON(url,
function (data){
if (data.status == "OK")
{
result = data.results[0].geometry.location;
}
});
return result;
}
==================================================================================
In light of responses, I have now updated the code to the following. I'm still not getting any result though, with breakpoints set in Firebug the result = data.results[0].geometry.location; never gets hit.
function loadFromSearch(address)
{
midpoint = getLatLong(address, loadWithMidpoint);
}
function getLatLong(address, callback)
{
var result;
var url = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(address) + '&sensor=false'
$.getJSON(url,{},
function (data) {
if (data.status == "OK")
{
result = data.results[0].geometry.location;
callback(result);
}
});
}
function loadWithMidpoint(centre)
{
mapCentre = centre;
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
...
}
=============================================================================
I have it! The final code, which works, looks like this:
function loadFromSearch(coordinates, address)
{
midpoint = getLatLong(address, latLongCallback);
}
function getLatLong(address, callback)
{
var geocoder = new google.maps.Geocoder();
var result = "";
geocoder.geocode({ 'address': address, 'region': 'uk' }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
result = results[0].geometry.location;
latLongCallback(result);
}
else
{
result = "Unable to find address: " + status;
}
});
return result;
}
function latLongCallback(result)
{
mapCentre = result;
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
...
}
If you are using V3 of the API cannot you use the this?
function findAddressViaGoogle() {
var address = $("input[name='property_address']").val();
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address, 'region': 'uk' }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
newPointClicked(results[0].geometry.location)
} else {
alert("Unable to find address: " + status);
}
});
}
The above is what I use to find some lat long cordinates of an inputted address, May work better?
EDIT:
function loadFromSearch(address)
{
midpoint = getLatLong(address);
mapCentre = midpoint;
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
...
}
function getLatLong(address)
{
var geocoder = new google.maps.Geocoder();
var result = "";
geocoder.geocode( { 'address': address, 'region': 'uk' }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
result = results[0].geometry.location;
} else {
result = "Unable to find address: " + status;
}
});
return result;
}
The problem is your $.getJSON function is asynchronous, yet you are returning the 'result' synchronously.
You need to do something like this (not tested!)
function loadFromSearch(address)
{
midpoint = getLatLong(address, function(midpoint){
// this is a callback
mapCentre = midpoint;
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
...
});
}
function getLatLong(address, callback)
{
var result;
var url = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(address) + '&sensor=false'
$.getJSON(url,
function (data) {
if (data.status == "OK") {
result = data.results[0].geometry.location;
callback(result) // need a callback to get the asynchronous request to do something useful
}
});
}
In response to your edit: Oh dear, it looks like the V3 geocoder does not support JSONP. This means you can not do a cross-domain request to get data from it in your browser. See http://blog.futtta.be/2010/04/09/no-more-jsonp-for-google-geocoding-webservice/
However Brady's solution does work. I guess that is the way Google want us to geocode now.