JQuery Mobile y Google Maps no se reproducen correctamente

Simplemente estoy tratando de mostrar un mapa de Google dentro de una página de jquery mobile. Si cargo la página directamente, funciona. Sin embargo, si navego a la página desde otra página, solo muestra un solo mosaico de mapa. A primera vista, parecería que mi problema era similar al https://forum.jquery.com/topic/google-maps-inside-jquery-mobile JQuery Mobile y Google Maps no se reproducen correctamente

Sin embargo, ya estaba realizando mi inicialización dentro del evento 'pageinit' y mi mapa div tiene un ancho y una altura establecidos.

He visto http://code.google.com/p/jquery-ui-map/ pero prefiero no usar un (otro) complemento de terceros si es posible.

Aquí es lo que mi página se ve como:

<!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>

Gracias de antemano por su ayuda.

Actualización:

Después de un poco de experimentación añadí el siguiente retraso a mi evento de cambio de tamaño:

setTimeout(function() { 

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

Esto parecía para solucionar el problema. Espero que esto ayude a alguien más.

Fuente

2012-05-07 Shawn

función de tiempo de espera era exactamente lo que necesito. Cheers –

Esto funciona fantásticamente. Si bien creo que es bastante hackey, no hay muchas opciones aquí.El tiempo de espera funciona muy bien, ya que permite que el mapa se presente primero antes de llamar a esto para garantizar un tamaño adecuado. Mi único problema aquí es cómo podemos estar seguros de que 500 ms es suficiente. Un enfoque de devolución de llamada puede funcionar mejor, como escuchar que el mapa active su evento "inactivo". No obstante, Idle no funcionó para mí y no pude encontrar otro evento apropiado para conectar. :( – Eric

setTimeout funciona genial.gracias –

Usted tiene <html> y <body> al tamaño 100%, pero no los <div> s en la jerarquía entre <body> y <div id="map_canvas">.

Intente agregar ésos a su CSS también (el content uno necesitará un id).

Es posible que también deba asegurarse de que la API conoce el tamaño del mapa <div> activando un evento resize cuando todo está listo. Mostrar solo un mosaico es un síntoma clásico de que el API está equivocado (y generalmente asumiendo que tiene un tamaño cero).

Fuente

2012-05-07 21:32:27

El único div entre el cuerpo y el mapa div es el div "contenido", que en realidad no quiero ser 100%. Me gustaría que el mapa se muestre debajo del encabezado. Dije, el mapa se muestra correctamente cuando cargo la página sin pasar por un enlace, así que no creo que sea simplemente un problema basado en el estilo ... – Shawn

El punto es que no le has dado a ese div un tamaño en absoluto . –

Eso se maneja con el estilo del marco de JQuery Mobile. Seguí adelante y le di una sugerencia a tu sugerencia anulando el estilo de todos modos y es como yo sospechaba, ese no es el problema. El problema parece ser la interacción entre la página de JQuery Mobile método de carga y la API de Google Maps, pero no puedo entender cuál es el problema ... – Shawn

Leí en un sitio web que si tiene este problema es porque el dom no está totalmente cargado cuando inicializa su mapa de google. Debe añadir esto en su código:

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

Funciona para mí. Es tal vez brutal cambiar el tamaño en cada página que muestra, pero ... funciona.

Fuente

2012-07-03 09:58:33 Nogebour

Esta es la respuesta correcta: D –

respuesta correcta en lugar de activar el método de redimensionamiento, invocaremos el mapa una vez que se haya cargado el dom. – satheeshwaran

En vez de disparar un cambio de tamaño, he resuelto esto, envolviendo mis js en un evento 'pagecreate' ... como esto:

$(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); 

});

Fuente

2013-08-13 08:55:47

Pulsaría el botón para votar un millón de veces si pudiera, ¡muchas gracias! – satheeshwaran

creo que el enfoque correcto sería para desencadenar el evento cuando baldosas parcial está cargado una vez El siguiente fragmento de código te ayudará a lograrlo.

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

Fuente

2014-04-08 12:26:21 Noor

Encontré que el problema para mí era que JQuery mobile usa Ajax para cargar las páginas. No estoy seguro de si se trata de la mejor práctica, pero simplemente lo obligó a cargar mi página del mapa normalmente poniendo el siguiente código en la etiqueta de anclaje:

data-ajax="false"

Fuente

2014-06-16 16:18:52

JQuery Mobile y Google Maps no se reproducen correctamente

Respuesta

Cuestiones relacionadas