Google Map показывает только частично

Question

Карта Google, которую я имею, только частично отображается и ориентирована на неверную точку (она должна быть ориентирована на маркер). Смотрите ниже:

Теперь, чтобы добавить немного больше деталей:

• Это отлично работает в IE
• Похоже на скриншоте в FF и Chrome.
• В Chrome ист работает как в ближайшее время, как я открыть консоль разработчика

Особенно последний пункт является один я наиболее интересно о. Я думаю, что открытие консоли разработчика повторно запускает некоторый JavaScript.

Итак: Можно ли вызвать функцию повторного запуска JavaScript, как это делает консоль разработчика?

Это код:

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

Это где я поставил 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> 

так и на ДИВ следующие правила CSS применяются:

Answer 1

Обнаружена проблема. Я скрывала блок, GMaps был в

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

Но, кажется, блок, содержащий карту, не могут быть скрыты, когда Gmaps нагрузки.

Так что я изменил его, как этот

<div id="step2"> 

и все работало. Но поскольку я просто хочу показать «шаг1» в начале, я делаю

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

после загрузки карты.

Это действительно странное поведение Chrome и FF, но я рад, что он работает с этим обходным решением. Спасибо за вашу помощь.

Answer 2

Это может помочь ...

Google Maps not rendering completely on page?

Answer 3

Попробуйте google.maps.event.trigger (карта, «изменить размер»);

Answer 4

Я обнаружил, что любые операции скрыть и показать, которые выполняются в div с помощью google map, используя свойство css 'display' (или jQuery hide() и show()), вызывают частично просмотр карты.

Вместо «дисплея» я использую «видимость» (скрытый, видимый), и все в порядке. Я ожидал показать карту на всплывающем окне. Однако «видимость» занимает пространство, даже если его атрибут установлен в скрытое, но поскольку я использую «z-index» для всплывающего окна, он не влияет на базовый уровень (0 z-index).

Привет Бронек

Answer 5

я нашел простое решение для частично загруженной карты Google. Обычно это вызвано вызовом onLoad(), когда остальная часть страницы (включая ваш элемент карты) не полностью загружена. Это вызывает частичную загрузку карты. Простым способом решения этой проблемы является изменение действия тега на рабочем столе onLoad следующим образом:

old: onload="initialize()" 


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

это ждет 2 сек. перед тем как Google JavaScript получит доступ к правильным атрибутам размера. Надеюсь, что это помогает :)

Кстати, это мой главный Javascipt часть в случае, если вы блуждающих (точно так, как описано в Google документации, но потому, что я называю широту и долготу от PHP переменных, следовательно, 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

Позвони Initialize() на pagebeforeshow события и попробовать этот

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