Question

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?

Answer 1

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