Google지도 API 3 및 jQTouch

Question

jQTouch에서지도 (API 3)를 표시하는 데 문제가 있습니다. 브라우저에서 처음로드 될 때지도의 일부만 표시되지만 창 크기를 조정하면 괜찮습니다. google.maps.event.trigger(map_canvas, 'resize'); 함수를 사용하려고하는데 올바른 위치에 넣을 것이라고 생각하지 않거나 코드에 다른 문제가 있습니까? 모든 도움을 많이 주시면 감사하겠습니다.

 <div id="locations"> 
      <div class="toolbar"> 
       <h1>Locations</h1> 
       <a class="back" href="#">Home</a> 
      </div> 

    <div id="map_canvas" style="width:100%;height:240px"></div> 

    <script type="text/javascript"> 

    function initialize() { 
    var myOptions = { 
     zoom: 11, 
     center: new google.maps.LatLng(50.451820688650656, -4.2572021484375), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     panControl: false, 
     zoomControl: false, 
     mapTypeControl: false, 
     scaleControl: false, 
     streetViewControl: false 

    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
            myOptions); 

    setMarkers(map, localities); 

    } 

    var localities = [ 
    ['Devonport', 50.370095229957016, -4.169440269470215, 3], 
    ['John Bull Building', 50.41588787780982, -4.1097986698150635, 2], 
     ['Portland Square', 50.375110980041484, -4.138498306274414, 1] 
    ]; 

    function setMarkers(map, locations) { 

    var image = new google.maps.MarkerImage('http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png', 

     new google.maps.Size(20, 32), 

     new google.maps.Point(0,0), 

     new google.maps.Point(0, 32)); 
    var shadow = new google.maps.MarkerImage('http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag_shadow.png', 

     new google.maps.Size(37, 32), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 

    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 
    for (var i = 0; i < locations.length; i++) { 
     var location = locations[i]; 
     var myLatLng = new google.maps.LatLng(location[1],location[2]); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      shadow: shadow, 
      icon: image, 
      shape: shape, 
      title: location[0], 
      zIndex: location[3] 
     }); 
    } 
    } 
    </script> 

     <?php 
     include('includes/bottom-nav.php'); 
     ?> 
     </div> 

Answer 1

이것은 jqtouch가 페이지 div를 숨기기 때문에 API가 맵보기의 크기를 알지 못하기 때문입니다.

api의 v2에서는 맵 생성자에서 크기를 지정할 수 있지만 슬프게도 v3에서는 아직 가능하지 않습니다. 나는이 누락으로 인해 인터넷에 문제가있는 많은 게시물을 보았습니다.

google.maps.event.trigger (map_canvas, 'resize')는 문제를 해결하기 위해 아무 것도하지 않는 것 같습니다.

어쨌든 대답은 포함 된 div가 표시 될 때까지지도를 만드는 것을 지연시키는 것입니다. 'pageAnimationEnd'에서이 작업을 한 번 수행합니다.

또한 CSS에서지도 div의 크기를 고정해야합니다 (v2에서도 필요함).