jQuery Mobile - 外部リンクページでGoogle Mapsを実装する方法

jQuery MobileでGoogle Maps API 3を使用しようとしていますが、外部ページを取得してマップを読み込むことができません。私はFirebugをチェックして、マップが作成されているように見えますが、ページには表示されていません。私はホームページを正常にロードすることができますし、リンク上のrel = "external"属性を使用してマップを正常にロードするための外部ページを取得できます。しかし、rel = "external"を使用しない外部ページの場合、マップは表示されません。ここで jQuery Mobile - 外部リンクページでGoogle Mapsを実装する方法

は私のコードです：

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>

私はRELを使用せずに外部のページに表示するために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 Mapsを実装する方法

答えて

関連する問題