Google Maps - cannot read property '__e3_' of undefined

问题

I hope somebody can help me with my Google Maps API code.

I have set up a map with multiple markers which works successfully, however I want to add on-click events to the markers so that an info window appears, this is where I hit the problem.

$(document).ready(function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true&callback=mapInitialize";
    document.body.appendChild(script);
});
function mapInitialize() {
    var options = {  
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_div'), options);
    geocoder = new google.maps.Geocoder();
    function codeAddress(markerValue, addressValue) {
        geocoder.geocode({ 'address': addressValue}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                markerValue = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            }
        });
    }
    var marker1;
    codeAddress(marker1, '1 My Road, Somewhere, A1 1AA');
    var infowindow1 = new google.maps.InfoWindow({
        content: '<div class="infowindow"><strong><a href="http://mylink.com">Title</a></strong><br />Address details</div>'
    }); 
    google.maps.event.addListener(marker1, 'click', function() {
        infowindow1.open(map, marker1);  
    });
}

so I get the error 'Cannot read property '_e3' of undefined' when I include the addListener code.

I've read other posts on here of similar issues, but I have read all of the responses and even though they have the same problem none of the resolutions that worked for them have worked for me, or they are irrelevant to waht I have written.

Thanks in Advance.

回答1:

There are multiple problems here:

1. You're trying to modify the marker1 variable passed into your codeAddress function from within the function by assigning to the argument name markerValue. JavaScript doesn't have pass-by-reference arguments, and so marker1 is not in any way affected by your assigning a value to markerValue. So later when you try to do something with marker1, it still has its default value (undefined).

2. Google Maps' API is asynchronous. Your call to geocoder.geocode starts the process, but it completes later, long after codeAddress has returned.

You need to move your subsequent code into codeAddress, specifically into the completion callback from geocode.

Something like this (completely untested, the idea is to point you the right direction, not code a perfect solution for you):

function mapInitialize() {
    var options = {  
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_div'), options);
    geocoder = new google.maps.Geocoder();
    function codeAddress(addressValue) {
        geocoder.geocode({ 'address': addressValue}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker, infowindow1;

                map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                infowindow = new google.maps.InfoWindow({
                    content: '<div class="infowindow"><strong><a href="http://mylink.com">Title</a></strong><br />Address details</div>'
                }); 
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);  
                });
            }
        });
    }
    codeAddress('1 My Road, Somewhere, A1 1AA');
}

来源：https://stackoverflow.com/questions/18979771/google-maps-cannot-read-property-e3-of-undefined