CODEWITHSUNDEEP
javascriptjqueryajaxgoogle-maps
Paul
Paul

Reputation: 633

Pass Lat Lng var to initialize function google maps

I Have a jQuery script that makes an Ajax call to convert a zipcode to latitude & longitude.The zipcode is retrieved from a hidden input field. That part works fine. And the ajax result gives me the correct lat/long.

Piece 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 be able to pass my coords var to that function so i've 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 multiple things but i'm wrestling too long. I basically was thinking i could pass the coords var to the init function like this:

I also tried to set ajax async: false, and added dataType: 'json' but that didn't give me the opportunity to pass to the init function.

Upvotes: 3

Views: 2509

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue you have is that init() has already been run (thanks to the hook to window.load that is added) before your AJAX request returns. You need to remove that hook, and call init manually within the success handler. Try this:

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

Upvotes: 1

Related Questions