google.maps.event.addListener не является функцией

Question

Я пытаюсь добавить infowindows к своим маркерам, и я застрял, так как доступные ответы SO довольно старые. У меня есть этот код, соответствующий this ответ на 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(); 

Я получаю ошибку TypeError: google.maps.event.addListener(...) is not a function

Answer 1

У вас есть ошибка в определении анонимной функции, которая создает функцию прослушивателя событий. Код:

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

Должно быть (обратите внимание на дополнительный набор скобок):

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

фрагмент кода:

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"></script> 
 
<div id="mapa_ciudad"></div>

Answer 2

Типичные ошибки как то связаны с неправильным использованием API. Проблема здесь в том, что вы смешиваете объекты Google Maps version two с Version 3. Дважды проверьте руководство.

Для вашего случая, если вы используете V.3, обратитесь к this example, обработчики событий вызывают несколько иначе.