google.maps.event.addListener 不是函数

Question

I've been trying to add infowindows to my markers and I'm stuck since the avaible SO answers are pretty old. I have this code that corresponds to this answer in SO:

var map_center = new google.maps.LatLng(-0.179041, -78.499211);
        var map = new google.maps.Map(document.getElementById('mapa_ciudad'),
                mapOptions);

        marker_objects = [];

        for (i = 0; i < markers.length; i++){
            marker = new google.maps.Marker({
               position: new google.maps.LatLng(markers[i][1], markers[i][2]),
               map : map,
               title: markers[i][0]
            });

            var infowindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker, "click", function(marker){   
    // !!! PROBLEM HERE
                return function(){
                    var content = [marker.title];
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                }
            })(marker);

            marker_objects.push(marker);
        }

        function AutoCenter(){
            var bounds = new google.maps.LatLngBounds();
            $.each(marker_objects, function(index, marker){
               bounds.extend(marker.position)
            });
            map.fitBounds(bounds);
        }

        AutoCenter();

I get the error TypeError: google.maps.event.addListener(...) is not a function

Answer 1

You have an error in the definition of the anonymous function that creates the event listener function. Your code:

google.maps.event.addListener(marker, "click", function(marker){   
// !!! PROBLEM HERE
    return function(){
        var content = [marker.title];
        infowindow.setContent(content);
        infowindow.open(map, marker);
    }
})(marker);

Should be (note the extra set of parentheses):

google.maps.event.addListener(marker, "click", (function(marker) {
  return function(evt) {
    var content = marker.getTitle();
    infowindow.setContent(content);
    infowindow.open(map, marker);
  }
})(marker));

working fiddle

code snippet:

 function initialize() { var map_center = new google.maps.LatLng(-0.179041, -78.499211); var map = new google.maps.Map(document.getElementById('mapa_ciudad'), { zoom: 4, center: map_center }); marker_objects = []; for (i = 0; i < markers.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(markers[i][1], markers[i][2]), map: map, title: markers[i][0] }); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, "click", (function(marker) { return function(evt) { var content = marker.getTitle(); infowindow.setContent(content); infowindow.open(map, marker); } })(marker)); marker_objects.push(marker); } function AutoCenter() { var bounds = new google.maps.LatLngBounds(); $.each(marker_objects, function(index, marker) { bounds.extend(marker.position) }); map.fitBounds(bounds); } AutoCenter(); } google.maps.event.addDomListener(window, "load", initialize); var markers = [ ['mark 1', 33.890542, 151.274856, 'address 1'], ['mark 2', 33.923036, 151.259052, 'address 2'], ['mark 3', 34.028249, 151.157507, 'address 3'], ['mark 4', 33.800101, 151.287478, 'address 4'], ['mark 5', 33.950198, 151.259302, 'address 5'] ];

 html, body, #mapa_ciudad { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="mapa_ciudad"></div>

Answer 2

Typical errors like that are connected to wrong usage of API. The problem here is that you are mixing Google Maps version two objects with Version 3 . Double check the manual.

For your case, if you are using V.3, please reference this example , events handlers are invoked a bit differently.