El mapa de Google viene parcialmente, el área gris viene en lugar de las imágenes del servidor de google

Question

A veces el mapa de Google viene parcialmente con otra área que se atenúa. Hay una trampa, si comenzamos Firebug, las imágenes vienen en esa área gris. No sé por qué sucede esto. Cualquiera que haya experimentado esto y haya encontrado una solución, por favor comparta.

Answer 1

Este error puede ocurrir si está redimensionando el mapa de DIV. Después de redimensionar, intente llamar a la función gmap.checkResize().

Answer 2

Si está utilizando v3 tratar

google.maps.event.trigger(map, "resize"); 

también echar un vistazo a here

Answer 3

Hola si está utilizando de palanca en un div con un recipiente mapa que llamar resizeMap en la función

associated with the trigger: 
     $(".trigger").click(function(){ 
     $(".panel").toggle("fast"); 
     $(this).toggleClass("active"); 
     resizeMap(); 
     return false; 

continuación resizeMap(); como esto

function resizeMap() 
{ 
google.maps.event.trigger(map,'resize'); 
map.setZoom(map.getZoom()); 
} 

no se olvide de establecer la variable mapa como mundial;) aplausos

Answer 4

he encontrado una solución simple para el mapa google carga parcial. Por lo general, se produce cuando se llama al onLoad() cuando el resto de la página (incluido el elemento del mapa) no se carga por completo. Esto causa una carga de mapa parcial. Una forma sencilla de solucionar este problema es cambiar la acción de la etiqueta del cuerpo onLoad.

La manera tradicional:

onload="initialize()" 

La nueva forma:

onLoad="setTimeout('initialize()', 2000);" 

Esta espera 2 segundos antes de que el JavaScript de Google accede a los atributos de tamaño correcto. También asegúrese de borrar la caché de su navegador antes de probarlo; a veces se queda atascado allí :)

Esta es mi primera parte Javascript en caso de que se pregunta (tal y como se describe en la documentación Google sino porque yo estoy llamando a la Latitude y Longitude de las variables de PHP, por lo tanto, los fragmentos de PHP.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function initialize() { 
    var myOptions = { 
     center: new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>), 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var point = new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>); 
    var marker = new google.maps.Marker({ position:point, map:map })  
} 
</script> 

Answer 5

Solo quiero agregar a esta discusión que también tuve este problema con las rayas grises, y este no era el mismo problema que necesitaba para usar la función gmap.Resize pero que estaba en mi CSS. En mi CSS tenía

img { 
max-width:50% 
} 

así que cuando configuré esto en mi archivo css

#map-canvas { 
max-width:none; 
} 

¡Ha desaparecido el problema! Busqué en Google pero no pude encontrar esta respuesta.

Answer 6

este estilo resuelto mi problema

#map_canvas img { max-width: none !important; } 

Esto obliga al navegador para permitir que el mapa sea tan amplio como lo que debe ser - el !important esencialmente significa "no sobrescribir este estilo".

Answer 7

Lo resuelto de esta manera, mi problema estaba en el dispositivo de rotación, esta solución funciona muy bien:

$scope.orientation = function(){ 
      var supportsOrientationChange = "onorientationchange" in window, 
       orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; 
      window.addEventListener(orientationEvent, function() { 
       $interval(function(){ 
        google.maps.event.trigger(map, 'resize'); 
       },100); 
      }); 
     }; 
$scope.orientation(); 

Answer 8

que había este problema aparecerá mientras se trabaja en otras partes de mi sitio, así que no se dio cuenta es correcto cuando comenzó. Después de pasar por todos los cambios que había hecho durante la última hora, me encontré con el culpable:

div 
{ 
    [... other css ...] 
    overflow: auto; 
} 

en mi css. Lo eliminé y listo, funciona. (Por supuesto, podría simplemente cambiar el atributo de desbordamiento en mi mapa div pero solo necesito desbordamiento: auto en un par de divs.) Estoy seguro de que hay una buena razón por la cual, pero soy bastante nuevo en esto, así que no saber. De todos modos, espero que esto pueda ayudar a alguien.