We Keep Coding

Jquery Form Submit, Async Call then Submit Form On Success

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;
}

GoogleMaps API Geocoding Callback

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);
}
});

Object property is not created inside a factory member function

I have an object inside an Angular.js factory:
angular.module('myapp')
.factory('geoLocationService', function () {
var geoLocationObj = {};
var geocoder = new google.maps.Geocoder();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(_successFunction, _errorFunction);
}
function _successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[2]) {
geoLocationObj.resultCity = results[2].formatted_address;
alert(geoLocationObj.resultCity);
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
return geoLocationObj;
});
This works alert(geoLocationObj.resultCity); and alerts in property value
But
console.log(geoLocationObj);
does not log the propety geoLocationObj.resultCity
I am trying to use geoLocationObj.resultCity outside the Factory in my controller but it is not there.
I have in my controller:
.controller('IndexCtrl', function ($scope, geoLocationService) {
var geoLocationService = geoLocationService;
console.log(geoLocationService);
geoLocationService is an empty Object
I cannot figure out why this is happening.
Can you help me with this?

The problem in your code is that your object is initialize in the callback (_successFunction) that means that the returned object is still empty because the _successFunction hasn't been called.
You should return a promise using $q and call .then() in your controller.
angular.module('myapp')
.factory('geoLocationService', ['$q', function ($q) {
var geoLocationObj = {};
var deferred = $q.defer();
var geocoder = new google.maps.Geocoder();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(_successFunction, _errorFunction);
}
function _successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[2]) {
deferred.resolve(results[2].formatted_address);
alert(geoLocationObj.resultCity);
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
return deferred.promise;
})];
And in your controller
.controller('IndexCtrl', function ($scope, geoLocationService) {
geoLocationService.then(function(geoLocObj){
console.log(geoLocObj); Here your object has been resolved
});

Your factory should return something like this
angular.module('myapp')
.factory('geoLocationService', function() {
return{
geoLocationObj:function(){
var geocoder = new google.maps.Geocoder();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(_successFunction, _errorFunction);
}
function _successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[2]) {
geoLocationObj.resultCity = results[2].formatted_address;
alert(geoLocationObj.resultCity);
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
return geoLocationObj
}
}
});
You can call in your controller like this
angular.module('myapp', [])
.controller('IndexCtrl', function ($scope, geoLocationService) {
var promise = geoLocationService.geoLocationObj()
promise.then(function(success){
console.log("me "+success);
},function(error){
console.log("They eat all my candies :" +error)
})
});
You can play it here in Js bin
PS. You need to include your google map libs

How to pass an object to this js function?

Code:
function setMaps() {
var geocoder = new google.maps.Geocoder();
var result = "";
$('.map_canvas').each(function(){
geocoder.geocode( {
'address': $(this).attr('address'),
'region': 'de'
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
result += results[0].geometry.location.lng()+",";
result += results[0].geometry.location.lat();
} else {
result = "Unable to find address: " + status;
}
$(this).gmap({ 'center': result });
});
});
}
This method should show multiple maps on one page.
HTML:
<div class="map_canvas" address="Berlin, Zoo">
</div>
The problem is that $(this).gmap({ 'center': result }); does not work:
Uncaught TypeError: Cannot set property 'position' of undefined
Any idea how to pass the map_canvas object to the callback function?

try this:
function setMaps() {
var geocoder = new google.maps.Geocoder();
var result = "";
$('.map_canvas').each(function(){
var _this = $(this); // <------ here
geocoder.geocode( {
'address': $(this).attr('address'),
'region': 'de'
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
result += results[0].geometry.location.lng()+",";
result += results[0].geometry.location.lat();
} else {
result = "Unable to find address: " + status;
}
_this.gmap({ 'center': result }); // <---- and here
});
});
}

Using Google Maps: a custom javascript function returning undefined

I'm trying to return the variable coord from GetLocation, but it only returns undefined.
Any help appreciated!
var coord = "";
function GetLocation(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { "address": address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
coord = ParseLocation(results[0].geometry.location);
// This alert shows the proper coordinates
alert(coord);
}
else{ }
});
// this alert is undefined
alert(coord);
return coord;
}
function ParseLocation(location) {
var lat = location.lat().toString().substr(0, 12);
var lng = location.lng().toString().substr(0, 12);
return lat+","+lng;
}

When you are returning coords from the outer function it is still in fact undefined. The inner function executes later when the asynchronous operation (if it wasn't asynchronous, the API would just give the result to you normally) is done.
Try passing a callback:
function GetLocation(address, cb) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { "address": address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
cb(ParseLocation(results[0].geometry.location));
}
else{ }
});
}
You can then use it like so:
GetLocation( "asd", function(coord){
alert(coord);
});