API Карт Google v3, вкладки пользовательского интерфейса jQuery, изменение размера карты

Question

Я использую Google Maps API v3, который отображается на вкладке пользовательского интерфейса jQuery.Я изо всех сил пытался заставить мою карту Google изменить размер правильно, когда выбрана вкладка, отображающая карту.Документация jQuery здесь http://docs.jquery.com/UI/Tabs предусматривает, что:

Для карт Google вы также можете изменить размер карты, когда вкладка будет отображаться так:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

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

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

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            alert("Alert is working");
        }                                         
    });
});

Когда я изменяю этот код, чтобы включить рекомендуемый resizeMap ();Команда, это не работает.Вместо этого он добавляет символы "# tabs-9" в конец URL, а затем даже не выбирает правильную вкладку 9. Я даже не вижу вкладку 9, когда использую этот код:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            resizeMap();
        }                                         
    });
});

Наконец, когда я изменяю код для включения другой команды изменения размера "google.maps.event.trigger (map, 'resize');", он все равно не работает.Вместо этого он позволяет мне выбрать правильную вкладку 9 и не добавляет символы в конец URL-адреса, как в случае выше, но не меняет размер карты.Карта по-прежнему отображается только частично и имеет серые полосы справа.Вот код:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
           google.maps.event.trigger(map, 'resize');
        }                                         
    });
});

Есть идеи, что я могу попробовать дальше?Я в тупике.Спасибо.

Answer 1

Добавьте следующее в ваш конструктор вкладок:

$(function() {
    $("#myTabs").tabs({
        show: function(e, ui) {
            if (ui.index == 0) {
                google.maps.event.trigger(myMap, "resize");
            }
        }
    });
});

Вы должны проверить ui.index для индекса на основе 0 панели, которая содержит вашу карту Google, и, конечно, обновить ссылки на myMap и #myTabs.

См. Раздел События в документации объекта карты для получения дополнительной информации об отправке триггера события изменения размера.

Answer 2

Я знаю, что эта тема древняя, но думаю, что это может быть кому-то полезно.

Чтобы избежать проблем с рендерингом с помощью вкладок пользовательского интерфейса jQuery и Карт Google на некоторых из этих вкладок, вы можете сделать следующее:

//global variables
var gMapsCentralLocation;   //some initial map center location
var mapCenter;              //we will use this to overide your initialy map center so we can "remember" initial viewport when we go back and forth trought tabs
var mapCenterFlag = false;  //indicate if we need to use new google maps viewpoint center, or use initial.
var map;                    //google map

$(document).ready(function () {
    $('#YourTabs').tabs({
        show: function (event, ui) {
            switch (ui.tab.hash) {
                case "#GoogleMapsTab":
                    {
                        preRenderGoogleMaps();
                    }
                    break;
                default:
                    {
                        //to save previous map center when user select some other tab
                        if (map) {
                            mapCenter = map.getCenter();
                        }
                    }
                    break;
            }
        }
    });
    drawRegionOnMap();
});

function preRenderGoogleMaps(){
    //fix rendering issues
    google.maps.event.trigger(map, 'resize');

    if (!mapCenterFlag) {
        map.setCenter(gMapsCentralLocation);
        mapCenterFlag = true;
    } else {
        map.setCenter(mapCenter);
    }
}

function drawRegionOnMap() {
    map = null;    

    var gMapsOptions = {
        zoom: 8,
        center: gMapsCentralLocation,
        //POSSIBLE MAP TYPES (ROADMAP, SATELLITE, HYBRID, TERRAIN)
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), gMapsOptions);
}

Answer 3

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

/* Initialise jQuery UI Tabs */
jQuery(function() {
    jQuery( "#tabs" ).tabs({
      fx: {
        opacity: 'toggle',
        duration: 300
      }
    });
});

/* Redraw the Google Map everytime tab-4 is shown/clicked */
jQuery(function() {
            jQuery( "#tabs" ).bind( "tabsshow", function(event, ui) { 
                if (ui.panel.id == "tabs-4") {
                    var mapOptions = {
                      center: myLatlng,
                      zoom: 13,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
                }                                         
            });
});

А затем добавьте несколькоCSS, чтобы исправить элементы управления картой, если они неуместны и т. Д.

#map img { max-width:none; }

, если максимальная ширина всех изображений установлена ​​на 100%, вы получите проблемы.

Надеюсь, это поможет!

Answer 4

я решил просто css

map-tab {width: 100%;высота: 300 пикселей; число с плавающей запятой: слева; отображение: блок! важно ; поле: 0 пикселей;padding: 0px;}

Затем скрыть скрытую вкладку:

div [aria-hidden = "true"] {position: absolute! важный;слева: -9999999 пикселей;}}

Answer 5

Сначала перейдите в файл, куда вы помещаете шаблон вкладки, найдите тег <li>, который загружает вкладку вашей карты, и поместите его внутрь:

<li onclick="reloadmap()">

И в скрипте карты сразу после

google.maps.event.addDomListener(window, 'load', initialize);

поставить это:

function reloadmap(){
  //when you resize the map, you lose your zoom and your center
  //so you need to get them again here
    z = map.getZoom();
    c = map.getCenter();
    google.maps.event.trigger(map, 'resize');
  //and set them again here
    map.setZoom(z);
    map.setCenter(c);
}