JQuery Mobile e Google Maps non vengono visualizzati correttamente

Sto semplicemente cercando di visualizzare una mappa di google all'interno di una pagina mobile jquery. Se carico la pagina direttamente, funziona. Tuttavia, se si naviga verso la pagina da un'altra pagina, viene visualizzata una sola tessera mappa. A prima vista sembrerebbe che il mio problema fosse simile a https://forum.jquery.com/topic/google-maps-inside-jquery-mobile JQuery Mobile e Google Maps non vengono visualizzati correttamente

Tuttavia, stavo già eseguendo la mia inizializzazione all'interno dell'evento 'pageinit' e il mio div di mappa ha una larghezza e altezza impostate.

Ho visto http://code.google.com/p/jquery-ui-map/ ma preferirei non utilizzare un (altro) plug-in di terze parti se possibile.

Ecco cosa mia pagina appare come:

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>PhoneGap</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="cordova-1.6.1.js"></script> 
    <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" /> 
    <script src="jquery-1.7.1.min.js"></script> 
    <script src="global.js"></script> 
    <script src="jquery.mobile-1.1.0.min.js"></script> 
</head> 
<body> 
    <div id="mapPage" data-role="page"> 
     <style type="text/css"> 
      html 
      { 
       height: 100%; 
      } 
      body 
      { 
       height: 100%; 
       margin: 0; 
       padding: 0; 
      } 
      #map_canvas 
      { 
       height: 100%; 
      } 
     </style> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=***API_KEY_REMOVED***&sensor=true"> 
     </script> 
     <script type="text/javascript"> 
      function initialize() { 
       var height = $(window).height() - 50; 
       var width = $(window).width(); 

       $("#map_canvas").height(height); 
       $("#map_canvas").width(width); 
       var myLatlng = new google.maps.LatLng(39.962799, -82.999802); 
       var myOptions = { 
        center: myLatlng, 
        zoom: 18, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("map_canvas"), 
      myOptions); 
       //alert($(map.getDiv()).width()); 
       var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: "" 
       }); 
       google.maps.event.trigger(map, 'resize') 
      } 

      $("#mapPage").live('pageinit', function() { 

       initialize(); 
      }); 

     </script> 
     <div data-role="header" id="menuHeader"> 
      <a href="MenuDialog.htm" class="menuLink" data-role="none" data-rel="dialog"> 
       <img class="headerIcon" style="height: 40px; border-right: 1px solid #333333; padding-right: 5px;" 
        id="MenuIcon" src="images/menuIcon.png" /></a> 
      <p> 
       Loc 
      </p> 
     </div> 
     <div data-role="content"> 
      <div id="map_canvas" style="margin-top: 50px;"> 
      </div> 
     </div> 
</body> 
<html>

Grazie in anticipo per l'aiuto.

Aggiornamento:

Dopo qualche esperimento ho aggiunto il seguente ritardo al mio evento resize:

setTimeout(function() { 

      google.maps.event.trigger(map,'resize'); 
     }, 500);

questo sembrava per risolvere il problema. Spero che questo aiuti qualcun altro.

fonte

2012-05-07 Shawn

funzione Timeout era esattamente la cosa che ho bisogno. Cheers –

Questo funziona in modo fantastico. Mentre sento che è abbastanza hackey, non ci sono molte opzioni qui.Il timeout funziona alla grande in quanto consente alla mappa di eseguire il rendering prima di chiamare questo per garantire un dimensionamento corretto. Il mio unico problema qui è come possiamo essere sicuri che 500 ms sono sufficienti? Un approccio di callback può funzionare meglio, come ad esempio ascoltare la mappa per attivare il suo evento "idle". Tuttavia, Idle non ha funzionato per me e non sono riuscito a trovare un altro evento appropriato da collegare. :( – Eric

setTimeout funziona great.thanks –

Si hanno <html> e <body> al 100% dimensione, ma non i <div> s nella gerarchia tra <body> e <div id="map_canvas">.

Prova ad aggiungere anche quelli al tuo CSS (lo content uno avrà bisogno di un id).

Potrebbe anche essere necessario assicurarsi che l'API conosca le dimensioni della mappa <div> attivando un evento resize quando tutto è pronto. Mostrare solo una singola tessera è un classico sintomo dell'API che ha sbagliato (e generalmente supponendo che abbia zero dimensioni).

fonte

2012-05-07 21:32:27

L'unica divisione tra il corpo e la mappa div è il div "content", che in realtà non voglio essere 100%. Mi piacerebbe che la mappa fosse visualizzata sotto l'intestazione. Ho detto, la mappa viene visualizzata correttamente quando carico la pagina senza passare attraverso un link, quindi non penso che sia semplicemente un problema basato sullo stile ... – Shawn

Il punto è che non hai dato quel div a tutte le dimensioni –

Questo è gestito dallo stile di framework JQuery Mobile. Sono andato avanti e ho dato una risposta al tuo suggerimento ignorando manualmente lo stile comunque ed è come sospetto, non è questo il problema.Il problema sembra essere con l'interazione tra la pagina JQuery Mobile metodo di caricamento e l'API di Google Maps, ma non riesco a capire quale sia il problema ... – Shawn

Ho letto su un sito Web che se si verifica questo problema è perché il dom non è completamente caricato quando si inizializza la mappa di google. È necessario aggiungere questo nel codice:

$(document).bind("pageshow", function(event, data){ 
google.maps.event.trigger(map, 'resize'); 
});

Funziona per me. È forse brutale ridimensionare ad ogni pagina che mostri, ma ... funziona.

fonte

2012-07-03 09:58:33 Nogebour

Questa è la risposta corretta: D –

risposta corretta invece di attivare il metodo di ridimensionamento, invocheremmo la mappa dopo che il dom è stato caricato. – satheeshwaran

Invece di sparare un ridimensionamento, ho risolto questo avvolgendo i miei js in un evento 'pagecreate' ... in questo modo:

$(document).on('pagecreate', '#map', function() { 
    var mapOptions = { 
     center: new google.maps.LatLng(40.773782,-73.974236), 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

});

fonte

2013-08-13 08:55:47

Vorrei premere il pulsante di voto alto un milione di volte se potessi, grazie mille !!! – satheeshwaran

penso che l'approccio giusto sarebbe quello di attivare l'evento quando tegola parziale viene caricato una volta. Lo snippet di codice sottostante ti aiuterà a raggiungere questo obiettivo.

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){ 
    google.maps.event.trigger(map,'resize'); 
});

fonte

2014-04-08 12:26:21 Noor

ho trovato il problema per me era che jQuery Mobile utilizza Ajax per caricare le pagine. Non sono sicuro se è la migliore pratica, ma ho semplicemente costretto per caricare la mia pagina della mappa normalmente inserendo il seguente codice nel tag di ancoraggio:

data-ajax="false"

fonte

2014-06-16 16:18:52

JQuery Mobile e Google Maps non vengono visualizzati correttamente

risposta

Problemi correlati