2013-11-26 2 views
0

css3 zoom 속성을 적용한 후 Google지도 핀 클릭이 작동하지 않습니다. 나는 그것을 클릭 할 수 없다.css3 zoom 속성을 적용한 후 Google지도 핀 클릭이 작동하지 않습니다.

줌 속성을 적용하고 싶습니다.

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
      <script> 
    // This example displays a marker at the center of Australia. 
    // When the user clicks the marker, an info window opens. 

    function initialize() { 
     var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
     var mapOptions = { 
      zoom: 4, 
      center: myLatlng 
     }; 

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

     var contentString = '<div id="content">'+ 
       '<div id="siteNotice">'+ 
       '</div>'+ 
       '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
       '<div id="bodyContent">'+ 
       '<p><b>Uluru</b>,</p>'+ 
       '</div>'+ 
       '</div>'; 

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

     var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: 'Uluru (Ayers Rock)' 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map,marker); 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

      </script> 
    <style> 
    html, body, #map-canvas { 
        height: 100%; 
        margin: 0px; 
        padding: 0px 
       } 

    #map-canvas{ 
      zoom: 0.7; 
      -moz-transform: scale(0.7); 
      -webkit-transform: scale(0.7); 

    } 
    </style> 
     <body> 
      <div id="map-canvas"></div> 
     </body> 

왜 누군가가 css3 zoom 속성을 적용한 후 손 모양의 포인터를 얻지 못하고 있는지 말할 수 있습니까?

+0

[jsfiddle link] (http://jsfiddle.net/BHhrF/) – Pavan

답변

0

링크를 참조하십시오. http://jsfiddle.net/6TkY4/1/

var mapOptions = { 
        center: new google.maps.LatLng(latitude, longitude), 
         zoom: 8, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 

       }; 

If you want to change zoom size, then increase zoom property value in mapOptions. 

또한 바이올린 예를 들어 지금 작동을 참조하시기 바랍니다.

http://jsfiddle.net/BHhrF/1/

은 % 값 DIV 높이를 설정하지 마십시오. 픽셀 값을 사용하십시오. 그렇지 않으면 픽셀로 외부 div를 사용하십시오. 내부 div 높이 (%). 효과가있을 것입니다.

+0

css3 zoom 속성을 적용 할 때 잘못된 점을 말씀해 주시겠습니까? – Pavan

+0

여기에 줌 속성이 필요한 이유는 무엇입니까? 지도 확대/축소를 원할 경우지도 확대/축소 속성을 사용하십시오. 또한 확대/축소 확대/축소 속성이 향상됩니다. – RGS

+0

정확한 시나리오는 사용자가 페이지를 확대 할 때 페이지가 확대/축소되지 않았을 때와 완전히 똑같은 방식으로 맵의 크기를 조정하고자 할 때입니다 (확대/축소 레벨 1). 지도 줌 속성을 변경하더라도 맵 컨트롤과 다른 글꼴이 확대 된 상태로 표시됩니다. 그 이유는 CSS 확대/축소 또는 CSS 비율을 사용하려는 이유입니다. – Pavan

관련 문제