Two independent google maps in jQuery Tabs
why ist there an offset on the second map?
HTML
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDicetsr9R5ZcyksiSSvVln4CQ1H4qFfdw&sensor=false"></script>
<div id="container">
<div id="tabs">
<ul>
<li><a href="#tabs-1">ALPHA</a>
</li>
<li><a href="#tabs-2">BETA</a>
</li>
</ul>
<div id="tabs-1">Map:
<div id="map_1" class="locationMap"></div>
</div>
<div id="tabs-2">Map2:
<div id="map_2" class="locationMap"></div>
</div>
</div>
</div>
CSS
.locationMap {
height: 300px;
width: 300px;
}
JavaScript
jQuery(document).ready(function () {
var map1;
var map2;
var myLatlng1 = new google.maps.LatLng(45.748741, 21.221894);
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') {
getCookie1();
google.maps.event.trigger(map1, 'resize');
map1.setCenter(myLatlng1);
}
if (ui.newTab.index() == '1') {
getCookie2();
google.maps.event.trigger(map2, 'resize');
map2.setCenter(myLatlng2);
}
}
});
google.maps.event.addListener(map1, 'bounds_changed', function () {
boundsDaycares = map1.getBounds();
});
google.maps.event.addListener(map2, 'bounds_changed', function () {
boundsDaycares = map2.getBounds();
});
});