javascript - marcar - google.maps.marker example

¿Google Maps no se muestra completamente en la página?

Question

Tengo un mapa de Google en mi página con un panel de búsqueda que construí yo mismo, que se puede mostrar y ocultar a voluntad. Cubre como digamos 200 píxeles del mapa en un lado. El problema es que cuando redimensiono mi mapa, o por lo tanto, el área donde se superpone el panel no se muestra, es decir, el mapa no se representa allí por algún motivo.

Echa un vistazo a este link

En el cuadro Escriba, digamos OMDB, que es un código icao para un aeropuerto y presione Entrar.

Se muestran los resultados y se ve el panel. Ahora haga clic en el enlace de pantalla completa y luego haga clic en la pestaña de aeropuertos para que desaparezca el panel. Ahora verá que parte del mapa no se ha procesado en absoluto ... Tengo que arrastrar el mapa y solo se renderiza parcialmente esa area. ¿Cómo puedo arreglarlo?

Para tu información, lo he ejecutado en Google Chrome, Firefox e IE8 en Windows XP. ¿Hay alguna manera de obligar a forzar la representación completa de un mapa o algo así? Este es un problema bastante errático y ¿podría estar relacionado con mi código o es un problema de host? ¿O a Google simplemente no le gusto? :(

EDITAR: ver el gran parche feo en el lado. Es el área sin procesar donde también se debería haber renderizado el mapa. Ninguna cantidad de zoom y desplazamiento está ayudando a despejar esto :(

Answer 1

En Google Maps V3, el poco de magia que necesita está documentado aquí: https://developers.google.com/maps/documentation/javascript/reference#Map en eventos

Los desarrolladores deben activar este evento en el mapa cuando el div cambie de tamaño: google.maps.event.trigger (map, ''resize'')

El truco es saber cuándo llamar a esto, que será situacional dependiendo de su código. Si está utilizando los modos Bootstrap 3, esto funciona de maravilla.

$("#modal-map")
    .modal()
    .on("shown.bs.modal", function() {
        google.maps.event.trigger(gmap, ''resize'');
    });

Donde gmap es el objeto google.maps.Map que creaste.

Answer 2

En mi caso, los mismos problemas para dispositivos Mac en: Safari 5.1.7 (Os Windows 10 [Perdón]) Safari 5.1 (Ipad 1 [Perdón antiguo]) Safari 10 (Iphone 6 Plus) Aquí mi solución funciona para mí: 1) captura Ancho del navegador detect.min.js 2) cambiar el parámetro del ancho del estilo attr 3) cambiar el mapa de tamaño

/* Of course insert detect.min.js and Jquery in your HTML ;)*/
var user = detect.parse(navigator.userAgent);
var browserFamily=user.browser.family;
var browserVersion=user.browser.version;
if ( browserFamille=="Mobile Safari" || browserVersion.substr(0,3)=="5.1") {
    canvasWidth = $(window).width(),
    $(".macarte").attr("style","width:"+canvasWidth+"px")
    google.maps.event.trigger(map, ''resize'');
}
/* browserFamily returns "Mobile Safari" for tablet and mobile devices; "Safari" for desktop devices */

Answer 3

Me enfrenté al mismo problema cuando intenté cargar google map en el diálogo. Era como si el mapa de Google no se hubiera procesado correctamente. Así que descubro a continuación la solución que puede resolver su problema.

He desencadenado el evento de cambio de tamaño del mapa de google después de inicializar el cuadro de diálogo.

google.maps.event.trigger(map, ''resize'', function () {
    // your callback content
});

Ejemplo:

He cargado el mapa por llamada ajax, luego se inicializó el diálogo y, por último, se activó el evento de cambio de tamaño de google map.

$.ajax({
    url:"map.php",
    type:"POST",
    success:function(data){
        $("#inlineEditForm").html(data);

        $(''#inlineEditPopUp'').dialog(''open'');
        google.maps.event.trigger(map, ''resize'', function () {
            // your callback content
        });
    }
});

Answer 4

No puedo reproducir el problema que está teniendo, pero se parece a otro problema que he visto con los mapas de Google.

Parece que podría estar en conflicto con la forma en que Google Maps determina qué mosaicos están a la vista. Calcula esto solo una vez, cuando el mapa se carga en el div la primera vez, y si el div crece, entonces no se dibujará suficiente mapa. Afortunadamente, esto es fácil de tratar. cada vez que el contenedor haya cambiado de tamaño, use el método checkResize() en la instancia del mapa, y el área de recorte se recalculará a partir del tamaño actual del contenedor.

Answer 5

Por lo que puedo ver, funciona bien en OS X 10.6.2 en Google Chrome.

http://i33.tinypic.com/sfe3ah.png

El único problema es que el Aeropuerto de Copenhague no se encuentra cerca de la ubicación que implica su aplicación. Y LAX está en el medio del océano ;-)

Editar:
Veo su captura de pantalla, y me parece que de alguna manera Google Maps no representa la parte del mapa que fue cubierta por el panel de resultados de búsqueda y búsqueda, y luego la representación no se activa correctamente al ocultar el panel de búsqueda.

No he podido encontrar un activador de renderizado decente en la API de Google Maps, pero creo que deberías intentar algo como acercar y alejar programáticamente o mover el centro del mapa a otro lugar y volver, con el fin de forzar la re -representación del mapa.

Alternativamente, puede intentar activar manualmente algunos de los eventos que cree que podrían desencadenar una nueva representación del mapa, por ejemplo, google.maps.event.trigger(map, ''resize'') .

Sé que estas sugerencias parecen ser una forma terrible de hacer que funcione, y no estoy seguro de si funcionaría, pero es mi mejor opción ;-)

Answer 6

Sé que esta pregunta es un poco vieja, pero acabo de encontrar un problema similar. Sin embargo, en mi caso, estaba configurando el mapa para que se cargara desde el cuerpo (para un efecto de pantalla completa) dentro de un iframe .

Como Jay mencionó en su respuesta, se debe especificar un ancho y una altura que no había hecho en ese momento.

Cambié:

<body style="margin:0;">

a:

<body style="margin:0;width:100%;height:100%">

y ahora se carga perfectamente en Chrome, Firefox e Internet Explorer 10.

Esperemos que esto ayude a cualquiera que también haya encontrado este problema. Debe especificar el ancho y la altura para que funcione en diferentes clientes.

Saludos

Answer 7

Sí, DEBE proporcionar una altura de píxeles reales y el ancho del contenedor DIV. De hecho, esto se detalla en la API de Google.

Usando algo como esto:

<div id="map_canvas" style="width:500px;height:500px;"></div>

en lugar de

<div id="map_canvas"></div>

estarás en casa gratis!

Answer 8

Si está utilizando el complemento jQuery goMap , entonces debería usar:

google.maps.event.trigger($.goMap.map, ''resize'');

Aunque debe envolver esto en un evento para que se ejecute cuando se muestre el mapa. Así lo hago en mi código:

$(document).on(''click'', ''#mapClicker'', ''initmap'', function() {
   setTimeout(function() {
         google.maps.event.trigger($.goMap.map, ''resize'');
      $.goMap.fitBounds();
   }, 100)
});

Answer 9

Tuve el mismo problema y lo resolví simplemente cambiando el ancho del div que contiene a "px" en lugar de "%" (por ejemplo, width = "700px" en lugar de "80%"). Supongo que Google puede hacer un mejor cálculo de tamaño de esa manera ... No garantizo esto pero me ayudó

Answer 10

Tuve este problema y encontré que la única solución (en mi caso) era activar el cambio de tamaño en línea después del elemento. No puedo decir por qué, pero encontré un hilo donde alguien también tenía esta solución. (lo siento no ref.) Mi configuración fue un poco diferente; era de una página inyectada de jQueryMobile, por lo que la instanciación tardía puede tener algo que ver con mi problema. Esperemos que esto ayude a alguien.

<div id="my-map"></div>
<script type="text/javascript">
  $(''#my-map'').height($("#my-map-container").height());
  $(''#my-map'').width($("#my-map-container").width());
  google.maps.event.trigger($(''#my-map''), ''resize'');
</script>

Answer 11

function initialize(lon,lat) {
var largeLatlng = new google.maps.LatLng(lon,lat);
var largeOptions = {zoom: 18, center: largeLatlng,mapTypeId:     google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("map"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});

google.maps.event.addListenerOnce(largeMap, ''idle'', function(){
    google.maps.event.trigger(largeMap, ''resize'');
    largeMap.setCenter(largeLatlng);
});
largeMarker.setMap(largeMap);

}