Google지도 마커 클릭 이벤트가 실행되지 않음

Question

마커에서 클릭 이벤트에 대한 Google지도 리스너를 만들려고합니다. 문제는 이벤트가 실행되지 않는다는 것입니다. 아래 코드는 맵을 초기화하고 맵에 마커를 추가하는 방법을 보여줍니다. 나는 이벤트 리스너가 초기화에 추가되어야한다고 생각한다.

//initializing my variables 
var marker = []; //final markers that wil go on the map 

//this function loads the map on to the page. 
function initialize() { 
    var mapOptions = { 
     center: { 
      lat: 0, 
      lng: 0 
     }, 
     zoom: 2 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    //listener for clicks on markers 
    google.maps.event.addListener(marker, 'click', markerClick); 
    //listener that listens for the map to load before calling the drop function 
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
     //this part runs when the mapobject is created and rendered 
     google.maps.event.addListenerOnce(map, 'idle', function() { 
      //this part runs when the mapobject shown for the first time 
      drop(); 
     }); 
    }); 
} 

//drop function 
function drop() { 
    for (var i = 0; i < pictureLocations.length; i++) { 
     setTimeout(function() { 
      addMarker(); 
     }, i * 200); 
    } 
} 


//add marker function 
function addMarker() { 
    marker.push(new google.maps.Marker({ 
     position: pictureLocations[iterator], 
     map: map, 
     draggable: false, 
     animation: google.maps.Animation.DROP, 
     id: iterator 
    })); 
    iterator++; 
} 

마커를 클릭해도 아무런 변화가 없습니다. 클릭 기능에서 자바 스크립트 경고를 발생시키는 경고 메시지가 표시됩니다.

Answer 1

문제는 당신이 마커의 모음입니다 marker 배열에 리스너를 추가하려고

1. 입니다.
2. 각 수신기에 수신기를 추가하고 마커를 배열에 푸시해야합니다.

이 시도 : 그 외에

//initializing my variables 
    var marker = []; //final markers that wil go on the map 

    //this function loads the map on to the page. 
    function initialize() { 
     var mapOptions = { 
      center: { 
       lat: 0, 
       lng: 0 
      }, 
      zoom: 2 
     }; 

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     //listener that listens for the map to load before calling the drop function 
     google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
      //this part runs when the mapobject is created and rendered 
      google.maps.event.addListenerOnce(map, 'idle', function() { 
       //this part runs when the mapobject shown for the first time 
       drop(); 
      }); 
     }); 
    } 

    //drop function 
    function drop() { 
     for (var i = 0; i < pictureLocations.length; i++) { 
      setTimeout(function() { 
       addMarker(); 
      }, i * 200); 
     } 
    } 

// define markerClick wich was not defined in your code 
function markerClick(){ 
    alert('click in the marker'): 
} 

    //add marker function 
    function addMarker() { 
     var _marker = new google.maps.Marker({ 
      position: pictureLocations[iterator], 
      map: map, 
      draggable: false, 
      animation: google.maps.Animation.DROP, 
      id: iterator 
     }); 
     //listener for clicks on markers 
     google.maps.event.addListener(_marker, 'click', markerClick); 
     marker.push(_marker); 
     iterator++; 
    } 

, 당신이 idle 이벤트가 당신이 그것이 생각하지 어떤 것을 발견 할 것이다 google.maps.Map 객체에 적용되는 google.maps.event에 대한 자세한 내용을 고려할 수 있습니다.