Google карты не работают, когда они размещаются на вкладках jQuery - это вопрос, который есть во всем ИнтернетеВ моем исследовании пока что ни одно из решений не работает.Надеюсь, кто-то здесь может помочь ...
Это скриншот ошибки в Firefox 10, Chrome 17, Safari 5.1.2, Opera 11.61.http://www.flickr.com/photos/75523633@N04/6932970713/
Ошибка отсутствует в IE8 и является прерывистой в 9. В Firefox она исчезает при открытии FireBug.
Сайт находится в Wordpress 3.3.1 и на картегенерируется / извлекается с помощью плагина.Кажется, не имеет значения, какой плагин для карт я использую;ошибка остается прежней.Судя по моим исследованиям, это проблема js / jQuery между вкладками и JavaScript API Google Map, а не проблема Wordpress / плагина.
Вот мой код.Прямо сейчас я использую плагин wp-gmappity-easy-google-maps для карт, но я также попробовал всесторонний плагин-google-map-map.Оба прекрасно работают вне вкладок.
HTML:
// Header calls:
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src='http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/scripts/tabs.min.js'></script>
// HTML Body:
<div class="tabs_framed_container">
<ul class="tabs_framed">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Map Tab</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="tabs_framed_content">
<h2>Tab 1 Content</h2>
<!-- Some Content -->
</div>
<div class="tabs_framed_content">
<h2>Tab 2 Content</h2>
<!-- Some Content -->
</div>
<h2>Tab 3 Content</h2>
<!-- Some Content -->
</div>
<div class="tabs_framed_content">
<div class="map_container">
<div style="width:900px;margin-left:auto;margin-right:auto;">
<div class="wpgmappity_container" id="wpgmappity-map-1" style="width:900px;height:400px;margin-left:auto;margin-right:auto;"></div>
</div>
<script type="text/javascript">
function wpgmappity_maps_loaded1() {
var latlng = new google.maps.LatLng(42.4005322,-71.2750094);
var options = {
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl : true,
zoomControlOptions :
{
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_LEFT
},
mapTypeControl : true,
mapTypeControlOptions :
{
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl : true,
scaleControlOptions :
{
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl : true,
streetViewControlOptions :
{
position: google.maps.ControlPosition.TOP_LEFT
},
panControl : false, zoom : 14
};
var wpgmappitymap1 = new google.maps.Map(document.getElementById('wpgmappity-map-1'), options);
var point0 = new google.maps.LatLng(42.4005322,-71.2750093);
var marker1_0 = new google.maps.Marker({
icon : 'http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/images/mapmarker.png',
position : point0,
map : wpgmappitymap1
});
}
jQuery(window).load(function() {
wpgmappity_maps_loaded1();
});
</script>
</div>
</div>
<div class="tabs_framed_content">
<h2>Tab 2 Content</h2>
<!-- Some Content -->
</div>
Вот соответствующий CSS:
.tabs_framed{padding:0;margin:0;list-style-type:none;clear:left;height:25px;border-bottom:1px solid #E5E5E5;}
.tabs_framed_container{margin-bottom:40px;}
.tabs_framed a{
display:block; position:relative; background:#fafafa; border:1px solid #E5E5E5; padding:7px 30px; margin-right:2px;
font-size:10px; text-decoration:none; text-transform:uppercase; letter-spacing:1px; line-height:10px; color:#777;
opacity:1; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease;
}
.tabs_framed a:hover{color:#20548B;text-decoration:none;background:#fff;}
.tabs_framed a.current{color:#000;cursor:default;border-bottom:1px solid #fff;background:#fff;}
.tabs_framed li,{padding:0;margin:0;list-style-type:none;float:left;}
.tabs_framed_content{display:none;background-color:#fff;border:1px solid #E5E5E5;border-width:0 1px 1px 1px;padding:30px 30px 15px 30px;}
div.wpgmappity_container img {
background-position: 0% 0%;
background-color: none !important;
max-width: none !important;
background-image: none !important;
background-repeat: repeat !important;
background-attachment: scroll !important;
}
Вот ссылка нафайл, который управляет моими вкладками: http://themes.mysitemyway.com/awake/wp-content/themes/awake/lib/scripts/tabs.min.js
flowplayer.org / tools / forum / 25/79274 - это одно решение, которое я нашел (прокрутите вниз).Однако checkResize и resizeMap больше не работают (см. Ссылку на API на code.google.com/apis/maps/documentation/javascript/reference.html#Map, прокрутите немного вниз до «События» и найдите google.maps.event.триггер (map, 'resize'), который, по-видимому, является кодом замены).www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps - это еще одна устаревшая запись.
Я видел это предложенное:
jQuery(document).ready(function(){
jQuery('.tabs_container').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab") {
google.maps.event.trigger(map, 'resize');
}
});
});
, но я понятия не имею, как его реализовать (пробовал несколько способов, но безуспешно), или если это вообще сработает.
Из всех моих исследований похоже, что вы должны вызвать событие изменения размера карты, когда выбрана вкладка, содержащая карту.Пока что мне не повезло адаптировать какое-либо из решений, особенно потому, что я немного знаком с js / jQuery.Кажется, что кто-то, знакомый с js или jQuery, может решить эту проблему.
Пожалуйста, помогите мне.