Google Map API с вкладкой jQuery

Я реализую Google Map с вкладкой jQuery, но не получаю правильного отображения.

Я пробовал этот код, чтобы повторно центрировать карту при щелчке идентификатора вкладки.

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function() {
        jQuery("#tab6").click(function() {
            google.maps.event.trigger('location-canvas', 'resize');
            map.setCenter(bounds.getCenter());
            map.setZoom(16);
        });
    }); 
</script>

но не работал.

Я использую этот скрипт вкладок: Простой подключаемый модуль интерфейса отзывчивых вкладок jQuery - jQueryTab

И мой JSFiddle: Код

Я буду признателен, если вы поможете мне решить эту проблему.

Спасибо.


google-maps jquery google-maps-api-3 jquery-tabs
person Mr.Happy    schedule 01.03.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

  1. вы запускаете событие для 'location-canvas' , это всего лишь строка, вы должны предоставить экземпляр google.maps.Map в качестве аргумента

  2. запуск события изменения размера по клику может быть слишком ранним, вместо этого используйте after-метод плагина.

    after: function(){if($(this).text()==='Google Map'){ 
    //map must be the google.maps.Map-instance and available here
    center=map.getCenter();
    google.maps.event.trigger(map,'resize');
    map.setCenter(center);                                             
}}

Демонстрация: http://jsfiddle.net/doktormolle/xzVpW/

Примечание: переменная map недоступна внутри after-метода. В моей модифицированной скрипке я сохранил экземпляр внутри $('#location-canvas').data

person Dr.Molle    schedule 01.03.2014
comment
Большое спасибо за вашу большую помощь. :) - person Mr.Happy; 01.03.2014