Карта Google не центрируется даже после изменения размера

Итак, у меня есть диалоговое окно Jquery и холст Google Maps v3. Диалоговое окно открывается при нажатии на ссылку, и карта центрируется относительно маркера, связанного со ссылкой. Теперь все работает нормально с ПЕРВОГО раза. карта отображается и центрируется по положению маркера. Когда я закрываю диалог и нажимаю на другую ссылку. Карта отображается, но маркер находится за пределами области карты, в хорошо известном верхнем левом углу. Мне нужно немного перетащить карту, чтобы появился маркер. Итак, я добавил в код несколько изменений размеров и setCenter, но это все равно не работает.

Что идет не так???

Вот карта переменных кода;

        $(document).ready(function() {

            $("#map_container").dialog({
                autoOpen : false,
                resizable : false,
                resizeStop : function(event, ui) {
                    google.maps.event.trigger(map, 'resize')
                },
                open : function(event, ui) {
                    google.maps.event.trigger(map, 'resize');
                },
                close : function(event, ui) {
                    map = null;
                }
            });

            $(".show_on_map").click(function(e) {

                alert("click");

                var lat = $(this).attr('lat');
                var lng = $(this).attr('lng');
                var placeName = $(this).attr('placeName');
                var placeAddress = $(this).attr('placeAddress');

                initialize(lat, lng);
                plotPoint(lat, lng, placeName, '<span class="gBubble"><b>' + placeName + '</b><br>' + placeAddress + '</span>');

                $("#map_container").dialog("open");

            });

        function plotPoint(srcLat, srcLon, title, popUpContent, markerIcon) {
            var myLatlng = new google.maps.LatLng(srcLat, srcLon);
            var marker = new google.maps.Marker({
                position : myLatlng,
                map : map,
                title : title,
                icon : markerIcon
            });
            var infowindow = new google.maps.InfoWindow({
                content : popUpContent
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });

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

            map.setCenter(myLatlng);

        }

        function initialize(lat, lng) {

            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom : 13,
                center : latlng,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            google.maps.event.trigger(map, 'resize');

            map.setCenter(latlng);
        }
</script>

Вот ДИВ.

<div id="map_container" style="width:300px;height:300px;">
        <div id="map_canvas" style="width:250px;height:250px;"></div>
    </div>

Любая помощь приветствуется. Коэн


google-maps jquery
person Coen Damen    schedule 22.08.2012    source источник
comment
Это не синтаксис Google Maps API V3. Я предполагаю, что jQuery портит map_canvas, но я не эксперт в jQuery. Почему бы вам не использовать Maps API напрямую?   -  person Marcelo    schedule 22.08.2012
comment
Это комбинация простого javascript, Jquery и API Google Maps.   -  person Coen Damen    schedule 22.08.2012
comment
Я это знаю... но ты уверен, что смесь не взрывоопасна? :-)   -  person Marcelo    schedule 22.08.2012
comment
Я уже понял, мне нужно изменить размер и установить центр ПОСЛЕ оператора $(#map_container).dialog(open); Тогда это работает ..... настройка ....   -  person Coen Damen    schedule 22.08.2012
comment
если вы нашли ответ самостоятельно, вы должны опубликовать его и отметить как правильный.   -  person MintWelsh    schedule 11.08.2017

Ответы (2)


arrow_upward
19
arrow_downward

Вы можете попробовать этот пример кода:

lastCenter=map.getCenter(); 
google.maps.event.trigger(map_canvas, 'resize');
map.setCenter(lastCenter);
person steve    schedule 29.01.2013

arrow_upward
1
arrow_downward

В моем случае мне нужно добавить задержку, чтобы заставить ее работать

google.maps.event.trigger(map_canvas, "resize");

setTimeout(function() {
    map_canvas.setCenter(your_latlng);
}, 100)
person Samuel Chan    schedule 18.07.2016