Google Maps загружается странно - PullRequest
Новая
       8

Google Maps загружается странно

1 голос
/ 03 декабря 2010

Я использую API Карт Google (v3) на своем веб-сайте, чтобы показать карту с центром в определенной позиции.

Это мой код: 

<script type="text/javascript">
$(document).ready(function() {
    var latlng = new google.maps.LatLng(-22.924484, -43.208001);
    var map = new google.maps.Map(document.getElementById("map-property2"), {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});
</script>

В конце моего <head> у меня есть: 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Вот результат:

alt text

Как вы можете видеть, там две карты .. Но если я изменю размер окна, карта будет фиксированной !

Есть еще одна проблема: видите самый верхний левый угол карты? Это местоположение latlng переменной .. Это должно быть центром карты, но оно загружается как верхний левый угол. : /

Ps .: На моей консоли Firebug JS нет ошибок или предупреждений.

Я нашел решение здесь: Основной глюк Google Maps с использованием API V3

И, проверяя его, я обнаружил еще одну вещь: я пытаюсь загрузить карту в скрытый div (не на холсте карты, а в контейнере, в котором он есть), который отображается при нажатии на меню вкладок.

Если карта загружается (используя setTimeout), когда вкладка активна и контейнер видим, карта загружается нормально.

Я схожу с ума ... правда.

Ответы [ 3 ]

5 голосов
/ 03 декабря 2010

Если у вас есть карта в скрытом элементе div, а затем вы решили показать этот элемент div, вам нужно вызвать событие изменения размера на карте. 

google.maps.event.trigger(map, 'resize');
3 голосов
/ 03 декабря 2010

Проблема в том, что вы не можете загрузить карту со скрытым контейнером ... Мое решение состояло в том, чтобы загрузить карту после отображения вкладки с этим кодом: 

$('ul.tabs li a[rel="location"]').click(function() {
    setTimeout(function() {
        var latlng = new google.maps.LatLng(-22.924484, -43.208001);
        var map = new google.maps.Map(document.getElementById("map-property2"), {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Property location"
        });
    }, 500);
});
0 голосов
/ 03 декабря 2010
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...