Серьезный сбой Google Maps при использовании API V3

редактировать: теперь это решено, см. мой ответ ниже

Ситуация:

  1. Пользователь нажимает на карту-изображение
  2. Google Maps API V3 загружается через ajax
  3. карта отображается в диалоговом окне / лайтбоксе

Что случается:

Карта отображается, и все функции работают, однако есть проблема с верхним левым «квадратом» карты.

Я застрял!

редактировать: теперь с кодом:

<div id="map_canvas"></div>
<script type="text/javascript">
    $(function() {          
            var latlng = new google.maps.LatLng(51.448359,-2.590559);
            var options = {
              zoom: 13,
              center: latlng,
              mapTypeControl: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }; 

            var map = new google.maps.Map(document.getElementById('map_canvas'), options);

            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(51.448359,-2.590559),
              map: map
            });
    })
</script>

google-maps javascript jquery ajax google-maps-api-3
person Haroldo    schedule 21.08.2010    source источник
comment
В первый раз, когда я посетил ваш сайт (Safari 5), все было в порядке, но при последующих посещениях я понимаю, что вы имеете в виду! Я думаю, что маркер также изменил цвет с красного (когда он работал) на синий (когда он не работал) ... можете ли вы опубликовать какой-нибудь код?   -  person Budgie    schedule 21.08.2010
comment
@sonia я обновил вопрос, спасибо за внимание!   -  person Haroldo    schedule 21.08.2010

Ответы (2)


arrow_upward
5
arrow_downward

Спасибо Альфонсо за то, что указал мне правильное направление.

Проблема заключается в размерах div карты, хотя #map_canvas имеет высоту и ширину, примененные через css в верхней части документа, похоже, что API карт Google инициализируется до применения стиля (эту теорию можно проверить с помощью динатрайс).

*Простое решение:

1) встроенные стили для ширины и высоты*

<div id="map_canvas" style="width: 700px; height: 400px"></div>

2) задержать загрузку карты с помощью setTimeout()

person Haroldo    schedule 21.08.2010

arrow_upward
3
arrow_downward

Я думаю, что проблема в том, что карта инициализируется до того, как закончилась анимация изменения размера, и поэтому она думает, что она меньше.

Попробуйте настроить его размер после завершения эффекта загрузки:

google.maps.event.trigger(map, 'resize');

(вам нужно будет сохранить ссылку на объект «карта»

person AlfonsoML    schedule 21.08.2010