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

Question

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

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

• Отлично работает в 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:

Answer 1

Нашел проблему. Я прятал блок, GMaps был в

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

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

Итак, я изменил это так

<div id="step2">

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

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

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

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

Answer 2

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

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

С уважением Бронек

Answer 3

Позвоните в Initialize () на мероприятии pagebeforeshow и попробуйте это

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

Answer 4

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

old: onload="initialize()"


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

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

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

Попробуйте google.maps.event.trigger (map, "resize");

Answer 6

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

Карты Google не полностью отображаются на странице?