Search code examples
jqueryajaxgoogle-mapsasynchronousgoogle-geocoder

Google geocoder with Google maps and Ajax calls (jquery)


The var address always returns undefined, unless I put an alert in between. Any advice on this would be awesome. Here's my code; what I'm trying to do is get a single address from my xml, throw it trough the decoder and then add a marker on the map.

var lat1;
var lng1;
var adres;
function parseLocation(callback){
  var geocoder = new google.maps.Geocoder();
  //convert location into longitude and latitude
   var addresses = adres;
  if (geocoder) {
  geocoder.geocode( {
    'address': addresses
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      lat1 = results[0].geometry.location.lat();
      lng1 = results[0].geometry.location.lng();
      if( typeof callback == 'function' ) {
              callback();
            }
    }         
  });
  }
}
parseLocation(function(){
$('#map_canvas').bind('init', function() {
        $('#map_canvas').gmap('addMarker', {
          'position':  lat1+','+lng1
        }).click(function() {
          $('#map_canvas').gmap('openInfoWindow', {
            'content': lat1+','+lng1
          }, this);

        });
      });
})
function getdetails(artist){
  $.ajax({
    type: "GET",
    url: "data/concerts.xml",
    async: false,
    dataType: "xml",
    success: function(xml){
      $(xml).find("concert").filter(function(){
        return $(this).find("artist").text().indexOf(artist) === 0;
      }).each(function(){
        $('#container').append('<div id="tabel"><div id="tabelimage_detail"><img src="'+$(this).find('image').text()+'"alt="articleimage" id="image"/></div>'
        +'<div id="tabelartist_detail">'+$(this).find('artist').text()+'</div>'
        +'<div id="tabellocation_detail">'+$(this).find('location').text()+'</div>'
        +'<div id="tabelurl_detail"><a href="'+$(this).find('url').text()+'">'+$(this).find('url').text()+'</a></div>'
        +'<div id="longreview">'+$(this).find('longreview').text()+'</div>'
        ).trigger('create');
        adres = $(this).find('adres').text();
      })
      parseLocation();
    }
  })
}

Solution

  • Just supply the parameters to your callback function

        if( typeof callback == 'function' ) {
                        callback(lat1, lng1);
                    }
    

    and supply the callback (of course get rid of the global lat/lng variables):

    parseLocation(function(lat1, lng1){
    $('#map_canvas').bind('init', function() {
                    $('#map_canvas').gmap('addMarker', {
                        'position':  lat1+','+lng1
                    }).click(function() {
                        $('#map_canvas').gmap('openInfoWindow', {
                            'content': lat1+','+lng1
                        }, this);
    
                    });
                });
    });
    

    UPDATED, full answer below

    function parseLocation(adres, callback){
    
        var geocoder = new google.maps.Geocoder();
        //convert location into longitude and latitude
         var addresses = adres;
        if (geocoder) {
    
        geocoder.geocode( {
            'address': addresses
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                lat1 = results[0].geometry.location.lat();
                lng1 = results[0].geometry.location.lng();
                if( typeof callback == 'function' ) {
                                callback(lat1, lng1);
                            }
    
            }
    
        });
        }
    
    
    
    }
    
    function getdetails(artist){
        $.ajax({
            type: "GET",
            url: "data/concerts.xml",
            async: false,
            dataType: "xml",
            success: function(xml){
                $(xml).find("concert").filter(function(){
                    return $(this).find("artist").text().indexOf(artist) === 0;
                }).each(function(){
                    $('#container').append('<div id="tabel"><div id="tabelimage_detail"><img src="'+$(this).find('image').text()+'"alt="articleimage" id="image"/></div>'
    
                        +'<div id="tabelartist_detail">'+$(this).find('artist').text()+'</div>'
                        +'<div id="tabellocation_detail">'+$(this).find('location').text()+'</div>'
                        +'<div id="tabelurl_detail"><a href="'+$(this).find('url').text()+'">'+$(this).find('url').text()+'</a></div>'
                        +'<div id="longreview">'+$(this).find('longreview').text()+'</div>'
                        ).trigger('create');
                            adres = $(this).find('adres').text();
    
                })
    
                  //parseLocation();
    parseLocation(adres, function(lat1, lng1){
    $('#map_canvas').bind('init', function() {
                    $('#map_canvas').gmap('addMarker', {
                        'position':  lat1+','+lng1
                    }).click(function() {
                        $('#map_canvas').gmap('openInfoWindow', {
                            'content': lat1+','+lng1
                        }, this);
    
                    });
                });
    })
    
    
            }
        })
    }