jQuery Mobile - Comment mettre en place les Cartes de Google sur les Pages de liens externes

Je suis la tentative d'utilisation de l'API Google Maps 3 avec jQuery Mobile et ne peut pas obtenir mes pages externes pour charger une carte. J'ai vérifié dans Firebug et il semble que la carte est en cours de création mais est caché sur la page. Je peux obtenir de la page d'accueil de charger une carte avec succès et je peux obtenir des pages externes pour charger la carte avec succès à l'aide de l'attribut attribut sur le lien. Mais pour les pages externes de ne pas utiliser la carte ne s'affiche pas.

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 à afficher sur une page externe sans utiliser ?

OriginalL'auteur Greg | 2011-02-02

J'ai trouvé la solution. J'avais besoin d'initialiser la carte de Google dans le "pagecreate" jQuery Mobile de l'événement au lieu de $(document).prêt. J'ai également eu un problème avec la carte complète pas rendu correctement à chaque fois que la page a montré j'ai donc résolu que par l'appel de google.cartes.de l'événement.déclencheur(carte, 'redimensionner') pour actualiser la carte de la "pageshow" jQuery Mobile de l'événement.

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>

OriginalL'auteur Greg

Vous devez vous connecter pour publier un commentaire.