Pass Lat Lng var to initialize google maps function
I have a jQuery script that makes an Ajax call to convert zipcode to latitude and longitude. Zipcode is extracted from hidden input field. This part works great. And the ajax result gives me the correct lat / long.
Part of HTML
<input id="zipcode" type="hidden" value="1010AK">
Ajax call in jQuery:
jQuery(document).ready(function($){
var zipcode = jQuery('input#zipcode').val();
$.ajax({
url: "http://maps.googleapis.com/maps/api/geocode/json?address=netherlands&components=postal_code:"+zipcode+"&sensor=false",
method: "POST",
success:function(data){
latitude = data.results[0].geometry.location.lat;
longitude= data.results[0].geometry.location.lng;
coords = latitude+','+longitude;
//console.log(coords);
}
});
});
Outside (below) the document ready function, I have an initialize () function and I want to pass my coords
var to this function so that I have the correct latitude and longitude.
Init function (after ajax call):
function init() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(/* COORDS VAR */)
};
var mapElement = document.getElementById('my_map');
var map = new google.maps.Map(mapElement, mapOptions);
var image = '/wp-content/themes/example/img/foo.png';
var myLatLng = new google.maps.LatLng(/* COORDS VAR */);
var customMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', init);
I've tried a few things, but I've been struggling for too long. I basically thought I could pass the var coordinates to the init function like this:
-
function init(coords){}
-
google.maps.event.addDomListener(window, 'load', function(){initialize(coords);});
I also tried to install ajax async: false
and added dataType: 'json'
, but that prevented me from going to the init function.
source to share
The problem is init()
already running (thanks to the icon attached to it window.load
) before returning your AJAX request. You need to remove this hook and call it init
manually in the handler success
. Try the following:
jQuery(document).ready(function($){
var zipcode = jQuery('input#zipcode').val();
$.ajax({
url: "http://maps.googleapis.com/maps/api/geocode/json",
data: {
address: 'netherlands',
components: 'postal_code:' + zipcode,
sensor: false
},
method: "POST",
success: function(data){
var lat = data.results[0].geometry.location.lat;
var lng = data.results[0].geometry.location.lng;
init(lat, lng);
}
});
});
function init(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 11,
center: latlng
};
var map = new google.maps.Map($('#my_map')[0], mapOptions);
var customMarker = new google.maps.Marker({
position: latlng,
map: map,
icon: '/wp-content/themes/decevents/img/marker_darkblue.png'
});
}
source to share