Google지도 API를 여러 마커 정보창이

Question

그냥 Google지도 API에 침몰 내지고.

지도에 몇 개의 마커를 표시하려고합니다. 끝난. 그러나 각 마커에 대한 변수/객체를 재활용하고 있습니다.

처음에는 옵션으로 마커를 만들고지도에 추가 한 다음 동일한 마커 변수를 사용하고 용도를 ​​변경 한 다음 다시 매핑에 추가합니다. 이렇게하면 개별 제목 태그가있는 두 개의 고유 마커가 생성됩니다.

각 마커에 대한 정보 창을 표시하고 싶지만 가장 좋은 방법은 무엇인지 의심스러워합니다. 각 마커를 추가 할 때 동일한 변수를 사용하고 있기 때문에 각 마커에 클릭 이벤트를 할당하는 데 문제가 있음을 알 수 있습니다. 고유 한 마커에 클릭 이벤트를 추가하는 방법을 잘 모릅니다 (이름은 이름이 그것은 어떤 ID를 수신하지로, 모두 같은?)을 정보 창을 만들기위한

var marker_obj = new google.maps.Marker({ 
    position: myLatlng, 
    title:"This is Marker 1", 
}); 

marker_obj.setMap(map); 

marker_obj = new google.maps.Marker({ 
    position: myLatlng, 
    title:"This is Marker 2", 
}); 

marker_obj.setMap(map); 

, 나는 각 마커에 새로운 텍스트로 용도 변경 한 다음의 정보 창을 유지하는 하나 개의 변수/객체를 사용하고, 생각 클릭 이벤트. 내가 가진

질문은 다음과 같습니다

1 : 어떻게이 클릭 이벤트를 식별하지 있을지, 각 마커 (? 오버 헤드)에 대한 별도의 고유 한 변수/객체를 사용해야합니다.

2 정보 창이 새로 고침되기 전에 정보 창 개체를 용도 변경 (다시 할당)해도 좋고, 각 마커에 대한 고유 정보 창을 만들어야하나요?

저는 약간의 Java n00b입니다. 따라서 도움을 주시면 감사하겠습니다.

Answer 1

올바른 행을 잡았습니다. 마커 객체 하나를 가지고있는 것처럼 하나의 정보창 객체를 갖습니다. 그러면 클릭하는 마커에 따라 정보창의 내용이 변경됩니다. 조심해야 할 한 가지는 (이것은 루프 내에서 마커를 만드는 경우에도 발생합니다.) 모든 정보 모음이 마지막 요소의 내용이된다는 위험이 있기 때문입니다. 이제 콘텐츠를 업데이트하는 새로운 함수를 만들어 보겠습니다.

또한, 마커 객체에서 setMap() 함수를 호출 할 필요가 없으며 마커를 만들 때 전달하는 옵션에 map 속성을 지정할 수 있습니다.

var infowindow = new google.maps.InfoWindow({ 
    content: '' 
}); 

var marker_obj = new google.maps.Marker({ 
    position: myLatlng, 
    title:"This is Marker 1", 
    map: map 
}); 

bindInfoWindow(marker_obj, map, infowindow, 'Marker 1'); 

marker_obj = new google.maps.Marker({ 
    position: myLatlng, 
    title:"This is Marker 2", 
    map: map 
}); 

bindInfoWindow(marker_obj, map, infowindow, 'Marker 2'); 

그런 다음 새로운 기능 :

function bindInfoWindow(marker, map, infowindow, html) { 
    marker.addListener('click', function() { 
     infowindow.setContent(html); 
     infowindow.open(map, this); 
    }); 
} 

Answer 2

글로벌 정보창 개체를 만듭니다. var infowindow = new google.maps.InfoWindow();

전체 마커에 대한 수신기를 추가하십시오.

google.maps.event.addListener(marker, "click", function (e) { 
      infowindow.setContent("set marker specific content here"); 
      infowindow .open(map, this); 
     });