Google Map muestra solo parcialmente

Question

El Google Map que tengo solo está siendo renderizado parcialmente y está centrado en el punto equivocado (debe centrarse en el marcador). Ver más abajo:

Ahora para añadir un poco más de detalle:

• Funciona bien en IE
• Parece que en la captura de pantalla en FF y Chrome.
• En Chrome ist funciona tan pronto, al abrir la consola de desarrollador

Especialmente el último punto es el que yo estoy preguntando acerca más. Supongo que al abrir la consola de desarrollador se vuelve a ejecutar algo de JavaScript.

Entonces: ¿Puedo llamar a una función para volver a ejecutar JavaScript, como lo hace la consola de desarrollador?

Este es el código:

<script type="text/javascript"> 
{literal} 
function initialize() { 
    if (GBrowserIsCompatible()) { 

    var map = new GMap2(document.getElementById("map")); //, { size : {width:600,height:600} } 
    map.addControl(new GLargeMapControl3D()); 
    map.addControl(new GMapTypeControl()); 
    map.addControl(new GScaleControl()); 
    map.setCenter(new GLatLng(51.17689812200107, 9.84375), 5); 
    map.checkResize(); 

    var geocoder = new GClientGeocoder(); 

    function showPoint(lat, lon) { 
     if (lat != "" && lon != "") { 
     var point = new GLatLng(lat, lon); 
     map.setCenter(point, 10); 
     var marker = new GMarker(point, {draggable: true}); 
     GEvent.addListener(marker, "dragstart", function() { 
      // map.closeInfoWindow(); 
     }); 
     GEvent.addListener(marker, "dragend", function() { 
      var newPoint = marker.getLatLng(); 
      $('#lat').val(newPoint.lat()); 
      $('#lon').val(newPoint.lng()); 
      // marker.openInfoWindowHtml("Neue Koordinaten Lat: "+ newPoint.lat() +" Lon: "+ newPoint.lng()); 
     }); 
     map.addOverlay(marker); 
     } 
    } 
    {/literal}showPoint("{$gmap_lat}", "{$gmap_lon}");{literal} 
    } 
} 
{/literal} 

Aquí es donde pongo el div:

<fieldset style="-moz-border-radius: 1em; -webkit-border-radius: 1em;"> 
     <legend>Karte</legend> 
     <div id="map" title="Lage von '{$name}'"><br>Die Karte wird geladen...<br><br>Hinweis: Damit dies funktioniert müssen Sie in Ihrem Browser JavaScript aktivieren</div> 
     Falls sich der Marker nicht auf der richtigen Position befinden sollte, bewegen Sie diesen mit Ihrer Maus auf die richtige Position. 
     <br>Länge: <input type="text" id="lat" name="lat" value="{$gmap_lat}"> 
     Breite: <input type="text" id="lon" name="lon" value="{$gmap_lon}"> 
    </fieldset> 

Y en el div se aplican las siguientes reglas CSS:

Answer 1

Ha encontrado el problema. Yo estaba escondido el bloque, GMaps estaba en

<div id="step2" style="display:none"> 

Pero parece un bloque que contiene el mapa no se puede ocultar, cuando GMaps cargas.

así que lo cambié como esto

<div id="step2"> 

y todo funcionaba. Pero como me gustaría mostrar "paso1" al principio, hago un

$('#step2').hide(); 

una vez que se carga el mapa.

Comportamiento realmente extraño de Chrome y FF, pero estoy contento de que funcione con esta solución. Gracias por tu ayuda.

Answer 2

Esto puede ayudar ...

Google Maps not rendering completely on page?

Answer 3

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

Answer 4

He encontrado que cualquier operación de ocultar y mostrar que se realiza en div con google map usando la propiedad css 'display' (o jQuery hide() y show()) causando parcialmente la vista del mapa.

En lugar de 'mostrar' utilizo 'visibilidad' (oculto, visible) y todo está bien. Lo que esperaba era mostrar el mapa en una ventana emergente. Sin embargo, la 'visibilidad' toma espacio incluso cuando su atributo está configurado como oculto, pero como uso 'z-index' para la ventana emergente, no afecta a una capa base (0 z-index).

Regards Bronek

Answer 5

he encontrado una solución simple para el mapa 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 sencilla de evitar este problema es cambiar su acción etiqueta body onLoad de la siguiente manera:

old: onload="initialize()" 


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

esta espera 2 segundos. antes de que Google JavaScript acceda a los atributos de tamaño correctos. Espero que esto ayude :)

Por cierto, esta es mi primera parte Javascipt en caso de que vagando (tal y como se describe en la documentación Google sino porque yo estoy llamando a la latitud y longitud 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 6

llamada a initialize() en el evento pagebeforeshow y probar este

jQuery(document).delegate("#page-map", "pageshow", function(event){ 
google.maps.event.trigger(map, "resize"); 
});