Google Map montre seulement partiellement

Question

La carte Google que j'ai est seulement rendue partiellement et est centrée au mauvais point (elle devrait se centrer sur le marqueur). Voir ci-dessous:

Maintenant, pour ajouter un peu plus en détail:

• Il fonctionne très bien dans IE
• Il ressemble à la capture d'écran en FF et Chrome.
• En Chrome fonctionne ist dès, que j'ouvre la console développeur

Surtout le dernier point est celui que je me demande le plus. Je suppose que l'ouverture de la console de développeur ré-exécute du JavaScript. Donc: Puis-je appeler une fonction pour ré-exécuter JavaScript, comme le fait la console développeur?

Voici le code:

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

C'est là que je mets le 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> 

Et sur la div les règles CSS suivantes sont applicables:

Answer 1

a trouvé le problème. Je me cachais le bloc, GMaps était

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

Mais il semble un bloc contenant la carte ne peut pas être caché, lorsque des charges de gmaps.

donc je l'ai changé comme ça

<div id="step2"> 

et tout fonctionnait. Mais comme je viens de montrer "step1" au début, je fais un

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

une fois la carte est chargée.

C'est vraiment étrange comportement de Chrome et FF, mais je suis content que cela fonctionne avec cette solution de contournement. Merci de votre aide.

Answer 2

Cela peut aider ...

Google Maps not rendering completely on page?

Answer 3

Essayez google.maps.event.trigger (carte, "redimensionner");

Answer 4

J'ai découvert que les opérations de masquage et d'affichage effectuées sur div avec google map en utilisant la propriété css 'display' (ou la fonction jQuery hide() et show()) provoquaient une vue partielle de la carte. Au lieu de 'display', j'utilise 'visibility' (caché, visible) et tout va bien. Ce que je m'attendais à montrer la carte sur un popup. Cependant 'visibility' prend de la place même si son attribut est caché, mais comme j'utilise 'z-index' pour le popup, cela n'affecte pas une couche de base (0 z-index).

Cordialement Bronek

Answer 5

J'ai trouvé une solution simple pour la carte de Google partiellement chargé. Généralement, il est provoqué par l'appel de onLoad() à des moments où le reste de la page (y compris votre élément map) n'est pas complètement chargé. Cela provoque une charge partielle de la carte. Un moyen simple de contourner ce problème consiste à modifier votre action de balise body onLoad comme suit:

old: onload="initialize()" 


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

cela attend 2 secondes. avant que Google JavaScript accède aux attributs de taille correcte. Hope this helps :)

BTW, voici mon top partie Javascipt au cas où vous errant (exactement comme décrit dans Google Documentation mais parce que j'appelle Latitude et Longitude des variables PHP, d'où les extraits 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

Appel à initialize() sur l'événement pagebeforeshow et essayer cette

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