javascript - página - google maps api

El mapa de Google viene parcialmente, el área gris aparece 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. Alguien ha experimentado esto y ha encontrado una solución, por favor comparte.

Answer 1

Encontré una solución simple para el mapa de google parcialmente cargado. Por lo general, es causada por el llamado a onLoad() cuando el resto de la página (incluido el elemento del mapa) no está completamente cargada. Esto causa una carga de mapa parcial. Una forma simple de resolver este problema es cambiar su acción de etiqueta corporal onLoad .

La vieja manera:

onload="initialize()"

La nueva forma:

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

Esto espera 2 segundos antes de que Google Javascript acceda a los atributos de tamaño correctos. También asegúrese de borrar la caché de su navegador antes de probarlo; a veces se queda atascado allí :)

Esta es mi parte superior de Javascript en caso de que se lo pregunte (exactamente como se describe en la Documentación de Google, pero porque estoy llamando a Latitude y Longitude desde variables de PHP, de ahí 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 2

Hola, si estás usando alternar en un div con un contenedor de mapa, llamas a resizeMap en la función

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

luego resizeMap (); Me gusta esto

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

no te olvides de configurar la variable del mapa como global;) vivas

Answer 3

Las soluciones anteriores no funcionan para mí.

He usado display:none para mi mapa, cambiándolo a visibility:hidden funciona bien para mí.

Cambio

display:none

A

visibility:hidden

Answer 4

Lo resolví de esta manera, mi problema estaba en el dispositivo de rotación, esta solución funciona genial:

$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 5

Si estás usando v3 prueba

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

También eche un vistazo here

Answer 6

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 usar la función gmap.Resize pero que estaba en mi CSS. En mi CSS tuve

img { 
max-width:50% 
}

así que cuando configuro esto en mi archivo css

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

¡El problema desapareció! Busqué en Google pero no pude encontrar esta respuesta.

Answer 7

Tuve este problema emergente mientras trabajaba en otras partes de mi sitio, así que no lo noté bien cuando comenzó. Después de pasar por cada cambio que había hecho en 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.

Answer 8

este estilo resolvió mi problema

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

Esto obliga al navegador a permitir que el mapa sea lo más amplio posible, lo !important esencialmente "no sobrescribir este estilo".

Answer 9

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