jQuery Mobile - Comment implémenter Google Maps sur des pages externes

J'essaie d'utiliser Google Maps API 3 avec jQuery Mobile et je ne peux pas charger mes pages externes sur une carte. J'ai vérifié dans Firebug et il semble que la carte est en cours de création mais est cachée sur la page. Je peux obtenir la page d'accueil pour charger une carte avec succès et je peux obtenir des pages externes pour charger la carte avec succès en utilisant l'attribut rel = "external" sur le lien. Mais pour les pages externes n'utilisant pas rel = "external", la carte n'apparaît pas.jQuery Mobile - Comment implémenter Google Maps sur des pages externes

Voici mon code:

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>

Comment puis-je obtenir une carte Google Map pour afficher sur une page externe sans utiliser rel = "externe"?

Source

2011-02-02 Greg

J'ai trouvé la solution. J'avais besoin d'initialiser la carte Google dans l'événement jQuery Mobile "pagecreate" au lieu de $ (document) .ready. J'ai également eu un problème avec la carte complète ne rend pas correctement chaque fois que la page a montré alors je l'ai résolu en appelant google.maps.event.trigger (map, 'resize') pour actualiser la carte sur l'événement jQuery Mobile "pageshow".

Voici mon code:

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>

Source

2011-02-03 00:37:07 Greg

jQuery Mobile - Comment implémenter Google Maps sur des pages externes

Répondre

Questions connexes