Google Maps API v3 : DOM 요소를 클릭하면 정보 창이 닫힙니다.

Question

처음으로 Google지도를 가지고 놀고 있습니다. CSS 트릭을 통해 멋진 자습서를 보았습니다. http://css-tricks.com/google-maps-slider/ jQuery를 pure JS보다 더 좋아합니다. 이 자습서는지도의 마커를 표시하는 목록에서 장소를 클릭하는 좋은 방법입니다.

나는 그런 식으로 좋아하지만 마커에 infowindows를 추가해야합니다. 내가 한 일은 아니지만 목록에있는 장소를 클릭하면지도가 사라지고 정보 창이 열립니다! 나는 "#locations li"을 클릭하는 이벤트에 infowindow.close()를 붙여야하기 때문이라고 생각합니다. 각 마커에 대한 새로운 InfoWindow를 만드는 것처럼

$(function() { 

        var chicago = new google.maps.LatLng(41.924832, -87.697456), 
         pointToMoveTo, 
         first = true, 
         curMarker = new google.maps.Marker({}), 
         $el; 

        var myOptions = { 
         zoom: 10, 
         center: chicago, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 

        var map = new google.maps.Map($("#map_canvas")[0], myOptions); 

        $("#locations li").click(function() { 

        $el = $(this); 

        if (!$el.hasClass("hover")) { 

         $("#locations li").removeClass("hover"); 
         $el.addClass("hover"); 

         if (!first) { 

         // Clear current marker 
         curMarker.setMap(); 

         // Set zoom back to Chicago level 
         // map.setZoom(10); 
         } 

         // Move (pan) map to new location 
         function move(){ 
         pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long")); 
         map.panTo(pointToMoveTo); 

         } 

         move(); 

         // Add new marker 
         curMarker = new google.maps.Marker({ 
          position: pointToMoveTo, 
          map: map 
         }); 


         // Infowindow: contenido 
         var contentString = '<p>'+$el.find("h3").html()+'</p>'; 
         contentString += 'hola' ; 


         var infowindow = new google.maps.InfoWindow(
         { 
          size: new google.maps.Size(150,50), 
          content: contentString 
         }); 


         // On click, zoom map 
         google.maps.event.addListener(curMarker, 'click', function() { 
          //map.setZoom(14); 

          infowindow.open(map,curMarker); 

         }); 

Answer 1

것 같습니다 :

여기 document.ready에서 실행 내 코드입니다. Quoting from the Google Maps API Docs :

만 (Google지도의 동작과 동일) 한 정보 창, 당신은 당신이지도 이벤트 때 서로 다른 위치 나 마커에 다시 한 정보 창을 만들 필요가 한 번에 표시하려면 (예 : 사용자 클릭).

google.maps.event.addListener(curMarker, 'click', function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map, curMarker); 
}); 

그런 다음 InfoWindow가 자동으로 종료를 클릭해야 할 때 다음과 같이

따라서, 당신은 단순히 click 이벤트 핸들러를 당신이 당신의지도를 초기화 직후 한 InfoWindow 객체를 생성하고 처리 할 수 ​​있습니다 새 마커에서 close() 메서드를 호출하지 않아도됩니다.