Одна карта google на вкладку jquery, почему есть смещение?

Мне нужна (независимая) карта на каждой вкладке jQuery. Почему карта на второй вкладке имеет тот же центр, что и первый?Одна карта google на вкладку jquery, почему есть смещение?

Пожалуйста, смотрите мой JSFiddle http://jsfiddle.net/metaxos/KQpL6/2/

jQuery(document).ready(function() { 
var map1; 
var map2; 

var myLatlng1 = new google.maps.LatLng(-34.397, 150.644); 
var myOptions1 = { 
    zoom: 8, 
    center: myLatlng1, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map1 = new google.maps.Map(document.getElementById("map_1"), myOptions1); 

var myLatlng2 = new google.maps.LatLng(-34.397, 150.644); 
var myOptions2 = { 
    zoom: 8, 
    center: myLatlng2, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map2 = new google.maps.Map(document.getElementById("map_2"), myOptions2); 

var tabs = $("#tabs").tabs({ 
    activate: function(event, ui) { 
     ui.newTab.index(); 

     if (ui.newTab.index() == '0') { 
      google.maps.event.trigger(map1, 'resize'); 

     } 
     if (ui.newTab.index() == '1') { 
      google.maps.event.trigger(map2, 'resize'); 
     } 
    } 
    }); 
});

источник

2014-02-21 metaxos

Я не совсем уверен, почему, но если вы меняете:

var tabs = $("#tabs").tabs({ 
activate: function(event, ui) { 
    ui.newTab.index(); 

    if (ui.newTab.index() == '0') { 
     google.maps.event.trigger(map1, 'resize'); 

    } 
    if (ui.newTab.index() == '1') { 
     google.maps.event.trigger(map2, 'resize'); 
    } 
    } 
});

To:

var tabs = $("#tabs").tabs({ 
activate: function(event, ui) { 
    ui.newTab.index(); 

    if (ui.newTab.index() == '0') { 
     google.maps.event.trigger(map1, 'resize'); 

    } 
    if (ui.newTab.index() == '1') { 
     google.maps.event.trigger(map2, 'resize'); 
     map2.setCenter(myLatlng2); 
    } 
    } 
});

Тогда все работает, как ожидалось. Между картами должно быть какое-то взаимодействие, но я не уверен, почему. Я посмотрю. Updated fiddle.

источник

2014-02-21 13:18:13 Swires

Это проблема с «картой имеет нулевой размер» (скрытый элемент). Когда вы инициализируете map2, div, содержащий его, скрыт и, следовательно, сообщает об API с нулевым значением, он центрирует карту в верхнем левом углу div. Запуск события изменения размера фиксирует размер, но не возвращает карту. – geocodezip

Да, я только что нашел исследование и нашел этот вопрос: http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated- картина, которая предлагает то же самое. Является ли мой ответ разумным решением для этого или есть более подходящее решение? – Swires

Код Swires помог мне и работает. Вопрос получил «эволюцию», и там трюк, похоже, не помогает в iframe с Internet Explorer, см. Http://stackoverflow.com/questions/21938179/one-google-maps-per-jquery-tab-in- IFrame-карта позиционирования дефект-с интернет-ех – metaxos

Одна карта google на вкладку jquery, почему есть смещение?

ответ

Смежные вопросы