Jquery tabs and google map issue


I have some tabbed content on my page. One of the tabs has a Google map in, but when I select that tab, the map only half loads.

This is the map code I have:

jQuery(function($) {
 // Asynchronously Load the map API
    var script = document.createElement('script');

function initialize() {
    var myLatlng = new google.maps.LatLng(53.36188,  	-2.27084);
    var mapOptions = {
        zoom: 9,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    var map = new google.maps.Map(
            document.getElementById('map-canvas'), mapOptions);

    var bounds = new google.maps.LatLngBounds();
    var SW = new google.maps.LatLng(53.36188,  	-2.27084);
    var NE = new google.maps.LatLng(53.36188,  	-2.27084);

	var infowindow = new google.maps.InfoWindow({
	content: "<div class='info_content_airport'><strong>Airport</strong></div>",
	position: new google.maps.LatLng(53.36188,  	-2.27084),
	pixelOffset: new google.maps.Size(0, -40),
	maxWidth: 300

    var markers = [
        ['Airport', 53.36188,  	-2.27084]

    var infoWindowContent = [
        '<div class="info_content_airport">' + '<strong>Airport</strong>' + '</div>'

    for (i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        addInfoWindow(marker, infoWindowContent[i], map);

    // Override our map zoom level once our fitBounds function runs
    // (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener(
        (map), 'bounds_changed', function(event) {
function addInfoWindow(marker, message, map) {
    var infoWindow = new google.maps.InfoWindow({
        content: message,
		maxWidth: 300
    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.open(map, marker);
    	setTimeout(function(){ marker.setAnimation(null); }, 2250);
google.maps.event.addDomListener(window, 'load', initialize);


and this is the JS i have in my head:

<script type="text/javascript" src="maps.js"></script>
<script type="text/javascript" src="hashtabs.js"></script>

<script type="text/javascript">

	$(document).ready(function() {

		// click event listener
		$('.hash').click(function(event) {
			// get the id
			var clickedLink = $(this).attr('id');
			// push it into the url
			location.hash = clickedLink;
			// stop the regular href
/* <![CDATA[ */
	$("#product-tabs li").click(function() {
		//	First remove class "active" from currently active tab
		$("#product-tabs li").removeClass('active1');

		//	Now add class "active" to the selected/clicked tab

		//	Hide all tab content

		//	Here we get the href value of the selected tab
		var selected_tab = $(this).find("a").attr("href");

		//	Show the selected tab content
		//	At the end, we add return false so that the click on the link is not executed
		return false;

Any ideas what I have wrong and why it is only half loading?



I’ve come across this problem before. If I remember correctly, it’s because the map is being initialized on a hidden tab and what you have to do is only init the map on the first time the map tab is activated.

Thanks for the reply.

What would be the best way to do this?

I am currently calling theses in the following order:


Comment out the following lines from your map code:

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

and then, where you set up your tab click handler:

var mapLoaded = false;

$("#product-tabs li").click(function() {
        // Code omitted ...

        var selected_tab = $(this).find("a").attr("href");


        if (selected_tab == 'yourMapTabUrlHere' && mapLoaded === false) {
            mapLoaded = true;

        return false;

Thanks, but it didn’t work :frowning:

I assume the yourMapTabUrlHere would be the id of my tab?

This is the HTML I have for the tabs:

 <div class="prod-tabs">
            <h2 class="tabhead" id="map">Map</h2>
            <div class="tabbody">
              <div class="map" >
                <div id="map-canvas" style="width: 720px; position: absolute; height: 400px;"></div>

Going by the JS from your first post I thought there would be an anchor tag, but there isn’t one in the code you just posted. Is it possible for you to share either a link to, or the code for the page in question, so I can see the whole thing in context and try it out?

Hi, can you please try this, put width and height to the parent div of your map

<div style="width: 100%; height: 100%">
    <div id="map-canvas" style="width: 100%; height: 100%;"></div>

Thanks - I tried that, but it didn’t work.

The <h2> tags create <a> link like:

<a class="hash" href="#accessibletabscontent1-4" id="map"><span class="current-info"></span>Map</a>

I tried adding “#accessibletabscontent1-4” to the code like this, but it didn’t work:

if (selected_tab == '#accessibletabscontent1-4' && mapLoaded === false) {
            mapLoaded = true;

did not display the map when you click your tab?

did you included this in your header section

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

also try to remove your absolute

<div style="width: 100%; height: 100%;">
    <div id="map_canvas" style="width: 50%; height: 50%;"></div>

if still not working

try to call your initilize function on the body like this

<body onload="initialize()">

hope this helps.

Thanks, but those didn’t work either :frowning:

Strangley, it works if I have firebug open :expressionless:

As I said before, if you can share a link, or perhaps recreate the problem in jsFiddle or something then it’ll be easier for us to try and solve the problem.