javascript - google.maps.event.addListener is not a function - Stack Overflow

admin管理员组

文章数量:1291116

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

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

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited May 23, 2017 at 10:29 CommunityBot 111 silver badge asked Jan 22, 2016 at 0:13 Alejandro VeintimillaAlejandro Veintimilla 11.6k2525 gold badges106106 silver badges188188 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mapa_ciudad"></div>

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.

本文标签： javascriptgooglemapseventaddListener is not a functionStack Overflow