구글 맵 마커 클릭 이벤트에서 페이지 수정하기

사용자가 마커 (지도의 크기를 조정하고 아이콘에 대한 정보를 표시)를 클릭하면 Google지도가 포함 된 페이지를 수정하려고합니다. 나는지도의 크기를 조절하는 예제로 이것을 할 수있을 것이라고 생각했다. :구글 맵 마커 클릭 이벤트에서 페이지 수정하기

google.maps.event.addListener(marker, 'click', function() { 
    map.setZoom(8); 
    map.setCenter(marker.getPosition()); 
    $('#MapContainer').switchClass("MapContainer", "MapContainerSmall"); 
    $('#MapCanvas').switchClass("MapCanvas", "MapCanvasSmall"); 
    google.maps.event.trigger(map, 'resize') 
});

그러나 jQuery는 클래스를 실행/변경하지 않는다. 구글 맵스 API 이벤트 내에 jQuery 코드를 넣을 수 없기 때문에 이것을 가정합니다.

내가 여기서 할 수있는 일에 대한 내 이해가 부족하다는 것을 깨달았습니다. 누군가 나를 올바른 방향으로 밀어 넣을 수 있습니까?

편집 :

바이올린 예 : http://jsfiddle.net/43XbM/ 당신은 DIV 스위치가 완료합니다 (switchClass 함수에서 "전체"옵션을) 할 수 있도록 크기 조정 이벤트를 트리거하고, 새로운 센터를 설정하기 전에 기다릴 필요가

출처

2014-05-20 Matthew

모든 자바 스크립트 오류가? 문제를 재현 할 수있는 충분한 코드를 제공 할 수 있습니까 (문제를 나타내는 바이올린 일 수도 있습니다)? – geocodezip

@geocodezip 이것을 포함하도록 수정되었습니다. – Matthew

switchClass는 jQuery의 일부가 아니며 [jQueryUI] (http://api.jqueryui.com/switchclass/)의 일부이므로 [이를 피들에 포함시켜야] (http://jsfiddle.net/43XbM/3 /) (그리고 거기에 같은 오류가있는 경우 사용자 환경). – geocodezip

확대/축소합니다.

var map; 
var site1 = new google.maps.LatLng(67.62, -134.13); 


    var latlng = new google.maps.LatLng(64, -117); 
    var settings = { 
     zoom: 4, 
     maxZoom: 10, 
     center: latlng, 
     mapTypeControl: true, 
     mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, 
     navigationControl: true, 
     navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 
    map = new google.maps.Map(document.getElementById("MapCanvas"), settings); 
    var marker = new google.maps.Marker({ 
     position: site1, 
     map: map, 
     title: "Hello World!" 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 

     $('#MapContainer').switchClass("MapContainer", "MapContainerSmall"); 
     $('#MapCanvas').switchClass("MapCanvas", "MapCanvasSmall", null, null, 
      function() { 
      google.maps.event.trigger(map, 'resize') 
      map.setZoom(8); 
      map.setCenter(marker.getPosition()); 
     }); 

    });

Working fiddle

출처

2014-05-20 18:49:49 geocodezip

구글 맵 마커 클릭 이벤트에서 페이지 수정하기

답변

관련 문제