Jquery tabs and Google maps problem
I have two Tabs in my jquery Application. In that each Tab has a Google Map(version 3).
Map displayed in First tab perfectly. But in second Tab, Part of the map only displayed.
My Script and Style:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
#map_canvas { height: 100% ;width:100%}
#map_canvas1 { height:100% ;width:100%}
</style>
<script type="text/javascript">
var map;
var map1;
function initialize()
{
var latlng = new google.maps.LatLng(11.6952727, 77.5195312);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
map1 = new google.maps.Map(document.getElementById("map_canvas1"),myOptions1);
}
</script>
Body:
<BODY onload="initialize()">
<div id="map_canvas" style="height:100% ; width:100%"></div> //It is in First tab Div Tag
<div id="map_canvas1" style="height:100% ; width:100%"></div> //It is in Se开发者_C百科cond tab Div Tag
</body>
The First tab Displays map perfectly...But in Second Tab Part of the Map displayed in corner... What is the problem here...please help me...
It seems you forget to define myoptions1.
I've had the same issue before:
Google Maps API - Strange Map "Offset" Behaviour
I've seen things similar to this. Without access to any code, my best bet is that the map is initialized at a time when the container div is hidden. I've seen that cause such symptoms. Try to set up your map as you're showing it, rather than before.
The issue is that the 2nd map is hidden while it's initialised and for whatever reason the google maps api doesn't like it. Try to bind the 2nd map setup to the tab switch event AFTER it is shown.
加载中,请稍侯......
精彩评论