jQuery Mobile – Come realizzare le Mappe di Google su Pagine Collegate Esternamente

Sto tentando di utilizzare API di Google Maps 3 con jQuery Mobile e non può ottenere la mia pagine di siti esterni per caricare una mappa. Ho controllato in Firebug e sembra che la mappa viene creata, ma è nascosto nella pagina. Posso ottenere la home page per caricare una mappa con successo e posso ottenere pagine esterne a caricare la mappa con successo utilizzando attributo sul link. Ma per le pagine di siti esterni non utilizzando la mappa non mostra.

Ecco il mio codice:

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>

Come posso ottenere una Mappa di Google di mostrare su una pagina esterna senza l’utilizzo ?

OriginaleL’autore Greg | 2011-02-02

One Reply
  1. 12

    Ho trovato la soluzione. Avevo bisogno di inizializzare la mappa di Google in “pagecreate” jQuery Mobile invece di $(document).pronto. Ho anche avuto un problema con la mappa completa il rendering correttamente ogni volta che la pagina ha mostrato così ho risolto chiamando google.mappe.evento.trigger(mappa, ‘ridimensionare’) per aggiornare la mappa sul “pageshow” jQuery Mobile.

    Ecco il mio codice:

    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> 

    OriginaleL’autore Greg

Lascia un commento