Карта Google отображается только частично

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

alt text

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

  • Он отлично работает в IE
  • Это похоже на скриншот в FF и Chrome.
  • В Chrome ist работает, как только я открою консоль разработчика

Особенно последний момент - тот, о котором мне больше всего интересно. Я предполагаю, что открытие консоли разработчика повторно запускает некоторый 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>

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

alt text

Ответы

Ответ 1

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

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

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

Итак, я изменил его следующим образом

<div id="step2">

и все сработало. Но поскольку мне просто нравится показывать "step1" в начале, я делаю

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

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

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

Ответ 2

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

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

Отношения Бронек

Ответ 4

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

Ответ 5

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

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>

Ответ 6

Вызовите функцию Initialize() в событии pagebeforeshow и попробуйте

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

Ответ 7

Открытие консоли не запускает повторно JS! Размер страницы изменяется из-за этого, API карты Google затем запускает событие resize и снова загружает карту.

Я столкнулся с той же проблемой при настройке центра карты вручную. Я решил это с помощью кода ниже:

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