i have problem in google maps and jquery tabs in the same page this is my problem link http://jsfiddle.net/3AsF7/ the second map doesnot show correctly, if any one faced this problem before please help me
<body>
<div id="tabs">
<ul>
<li style="outline:none; outline: 0;"> <a href="#tabs-1">Egypt contact</a>
</li>
<li style="outline:none; outline: 0;"> <a href="#tabs-2">Qatar contact</a>
</li>
</ul>
<div id="tabs-1">
<div id="google_img"></div>
</div>
<div id="tabs-2">
<div id="google_img2"></div>
</div>
</div>
<script>
function initialize() {
var mapProp = {
center: new google.maps.LatLng(30.037016, 31.216946),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map1 = new google.maps.Map(document.getElementById("google_img"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
function initialize2() {
var mapProp = {
center: new google.maps.LatLng(25.3207920, 51.5294840),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById("google_img2"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize2);
</script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
The problem with tabs is that the panel where the map is loaded must be visible. Try to hide the panels with a margin-top: -9999em wait a few seconds and then apply the jQuery tab plugin that you are using.
The better way is that you create the map when the user goes to that tab.
Example: http://www.misionerosredentoristas.com/#!/casa/1
Do a click in the section "Cómo llegar" and you will see the delay to create the map.