jQuery Mobile - 외부 링크 페이지에 Google지도를 구현하는 방법

jQuery Mobile에서 Google Maps API 3을 사용하려고하고 있으며 외부 페이지를 가져 와서지도를로드 할 수 없습니다. Firebug에서 체크했는데 맵이 생성되고 있지만 페이지에 숨겨져있는 것처럼 보입니다. 내가 성공적으로지도를로드 할 홈페이지를 얻을 수 있고 링크에 rel = "external"속성을 사용하여 성공적으로지도를로드 할 외부 페이지를 얻을 수 있습니다. 그러나 rel = "external"를 사용하지 않는 외부 페이지의 경우지도가 표시되지 않습니다. 여기 jQuery Mobile - 외부 링크 페이지에 Google지도를 구현하는 방법

내 코드입니다 :

index.html을

<!DOCTYPE html> 
<html> 
<head> 
    <title>Index</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
</head> 

<body> 
    <div data-role="page"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 
    <ul data-role='listview' id='menu'> 
     <li><a href="pages/map.html">external map page (does not work)</a></li> 
     <li><a href="pages/map.html" rel="external">map page with rel=external (works)</a></li> 
    </ul> 
    </div> 

</div> 
</body> 
</html>

map.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Map</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 

    <style type="text/css"> 

    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px } 

    </style> 

</head> 
<body> 

<div data-role="page"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 

    <h2>Map</h2> 

    <div id="map_canvas"></div> 

    <script type="text/javascript"> 
     function initialize() { 
      var latlng = new google.maps.LatLng(40.716948, -74.003563); 
      //console.log(latlng); 
      var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), options); 

     } 
     $(function() { 

      initialize(); 
     }); 

    </script> 

    </div> 
</div> 
</body> 
</html>

내가 확인해를 사용하지 않고 외부 페이지에 표시하기 위해 Google지도를 얻을 수있는 방법 = "외부"?

출처

2011-02-02 Greg

해결책을 찾았습니다. $ (document) .ready 대신 "pagecreate"jQuery Mobile 이벤트에서 Google지도를 초기화해야했습니다. 또한 페이지가 표시 될 때마다 전체지도가 제대로 렌더링되지 않는 문제가있어서 google.maps.event.trigger (map, 'resize')를 호출하여 "pageshow"jQuery Mobile 이벤트에서지도를 새로 고침하여 해결했습니다. 여기

내 코드입니다 :

index.html을

<!DOCTYPE html> 
<html> 
<head> 
    <title>Index</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
    <style type="text/css"> 
     .gmap { height: 330px; width: 100%; margin: 0px; padding: 0px } 
    </style> 
</head> 

<body> 
    <div data-role="page"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 
    <ul data-role='listview' id='menu'> 
     <li><a href="pages/map1.html">external map page 1</a></li> 
     <li><a href="pages/map2.html">external map page 2</a></li> 
    </ul> 
    </div> 

</div> 


</body> 
</html>

map1.html

<div data-role="page" class="page-map1"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 

    <h2>Map</h2> 

    <div id="map1" class="gmap"></div> 

    <script type="text/javascript"> 
     var map1, latlng1, options1; 
     function initialize() { 

      latlng1 = new google.maps.LatLng(40.716948, -74.003563); 
      options1 = { zoom: 14, center: latlng1, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      map1 = new google.maps.Map(document.getElementById("map1"), options1); 

     } 
     $('.page-map1').live("pagecreate", function() { 

      initialize(); 

     }); 

     $('.page-map1').live('pageshow',function(){ 

      //console.log("test"); 
      google.maps.event.trigger(map1, 'resize'); 
      map1.setOptions(options1); 

     }); 

    </script> 

    </div> 
</div>

map2.html

<div data-role="page" class="page-map2"> 

    <div data-role="header"> 
     <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content"> 

    <h2>Map</h2> 

    <div id="map2" class="gmap"></div> 

    <script type="text/javascript"> 
     var map2, latlng2, options2; 
     function initialize() { 

      latlng2 = new google.maps.LatLng(40.716948, -74.003563); 
      options2 = { zoom: 14, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      map2 = new google.maps.Map(document.getElementById("map2"), options2); 

     } 
     $('.page-map2').live("pagecreate", function() { 

      initialize(); 

     }); 

     $('.page-map2').live('pageshow',function(){ 

      google.maps.event.trigger(map2, 'resize'); 
      map2.setOptions(options2); 
     }); 

    </script> 

    </div> 
</div>

출처

2011-02-03 00:37:07 Greg

jQuery Mobile - 외부 링크 페이지에 Google지도를 구현하는 방법

답변

관련 문제