когда вы нажимаете вкладку контактов, загружается gmaps, но не правильно. (только в левом углу карты) действительно интересно... любые идеи?
структура моего html-кода:
<div id="menu-container" class="section group">
<div id="menuu" class="col span_8_of_12">
<!-- Navigation Bar -->
<div class="menu">
<ul class='tabs'>
<li class='tab-biography'><a href="#aboutme">About Me</a></li>
<li class='tab-portfolio'><a href="#portfolio">Portfolio</a></li>
<li class='tab-photos'><a href="#photos">Photos</a></li>
<li class='tab-contact'><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div id="social-icons" class="col span_4_of_12">
<!-- Social Icons -->
<ul class="social-icons">
<li><a href="#"><img src "img/icons/rss.png" g" alt=""/></a></li>
<li><a href="#"><img src "img/icons/twitter.png" g" alt=""/></a></li>
<li><a href="#"><img src "img/icons/facebook.png" g" alt=""/></a></li>
</ul>
<!-- /Social Icons -->
</div>
<!-- /Navigation Bar -->
</div>
GMaps:
function initialize() {
var myLatlng = new google.maps.LatLng(41.00527, 28.97696);
var mapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Вам нужно вызвать событие resize
карты после того, как вкладка, содержащая карту, станет видимой. Если посмотреть на документацию, для этой цели есть крючок событий:
easytabs:after | Fires after a tab has been selected (and after the panel is completely finished transitioning in). | [event, $clicked, $targetPanel, settings]
$('#content').bind('easytabs:after', function() {
google.maps.event.trigger(map, 'resize');
});