[RESOLVED]tabs and google maps

i am using the basic jquery tabs and have included within the tabbed content a link to a google map in each tab, however the map only renders in the first tab (that shows by default) whereas the others only seem to half load and do not zoom in correctly.

i believe this is something related to the maps not being resized within hidden tabs, and have tried various suggestions but had no joy.

does anyone know a fix for this issue?

A typical map needs to be initialized, e.g.

<script>
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

This is what you probably did for the fist tab but not for others.

Depends on your code and layout you would need to do that for all maps.

Example: 

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);  

See: http://stackoverflow.com/questions/4074520/how-to-display-multiple-google-maps-per-page-with-api-v3 

thanks, however these maps have been added via the URL within the CMS system…

tabbed content is…

<div id="tabs-2">
                    <p><table border="0" width="100%">
<tbody>
<tr>

<td style="text-align: right;"><iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=Worcester%20Cathedral%2C%20College%20Yard%2C%20Worcester%2C%20United%20Kingdom&key=..." id="worcester"></iframe></td>
</tr>
</tbody>
</table></p>
                </div> 

do i need a different method of adding the maps?

I guess, it could have a problem with multiple iframes. Try to refresh the content of the tab when clicking on it

Example: 

http://stackoverflow.com/questions/3427187/jquery-ui-reload-selected-tab 
http://stackoverflow.com/questions/1634909/refresh-tab-content-on-click-in-jquery-ui-tabs 

if it does not help, maybe you should additionally remove/unload invisible iframes before refreshing the tab.

Leave a Reply