2016-01-22 191 views
0

我一直在試圖添加infowindows到我的標記,我卡住了,因爲可用的SO答案很舊。我有這樣的代碼對應於this答案在SO:google.maps.event.addListener不是函數

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

+0

爲什麼downvote? ... wtvs – alejoss

回答

2

您在創建事件偵聽器函數的匿名函數的定義中有錯誤。您的代碼:

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>

+0

好吧,我不得不接受答案,即使它是一個工作代碼,因爲真正的問題是我使用api-v3 ...你在我的代碼中發現了一個明顯的問題,非常感謝爲此,但標題中提到「google.maps.event.addListener不是一個函數」,儘管你對我有很大的幫助,但我必須隨之解釋標題問題。而你有效解決的問題並沒有給出「不是功能」錯誤。 – alejoss

+0

我在我的小提琴中再現了你的錯誤,然後修復了它... – geocodezip

+0

對不起,我錯了,你在哪裏沒錯。再次接受你的答案。 – alejoss

0

典型的錯誤,如連接到API的錯誤用法。這裏的問題是,您正在混合Google Maps version two對象與Version 3。仔細檢查手冊。

對於您的情況,如果您使用的是V.3,請參閱this example,事件處理程序的調用方式有點不同。