Jquery tabs and google map issue

JavaScript
1

Hi,

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');

    document.body.appendChild(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);
    map.setTilt(45);

    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);
    bounds.extend(SW);
    bounds.extend(NE);
	

	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
	});
	infowindow.open(map);


    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);
    }
    map.fitBounds(bounds);

    // 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) {
            this.setZoom(11);
            google.maps.event.removeListener(boundsListener);
    });
}
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);
		marker.setAnimation(google.maps.Animation.BOUNCE);
    	setTimeout(function(){ marker.setAnimation(null); }, 2250);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
initialize();

//<![CDATA[

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(){
        $(".tabs").accessibleTabs({
            tabhead:'h2',
            fx:"fadeIn",
            autoAnchor:true
        });
		$(".prod-tabs").accessibleTabs({
            tabhead:'h2.tabhead"',
            fx:"fadeIn",
            autoAnchor:true
        });
		
		
    });
	
						
	$(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
			event.preventDefault();
		});
		
		
	});
	
	
/* <![CDATA[ */
$(document).ready(function(){
	$("#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
		$(this).addClass("active1");

		//	Hide all tab content
		$(".product-tab-content").hide();

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

		//	Show the selected tab content
		$(selected_tab).fadeIn(100);
		
		//	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?

Thanks!

2

Hi,

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.

3

Thanks for the reply.

What would be the best way to do this?

I am currently calling theses in the following order:

Thanks!

4

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");

        $(selected_tab).fadeIn(100);

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

        return false;
});
5

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>
              </div>
 </div>
6

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?

7

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>
</div>
8

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) {
            initialize();
            mapLoaded = true;
        }
9

did not display the map when you click your tab?

10

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>
</div>

if still not working

try to call your initilize function on the body like this


<body onload="initialize()">

hope this helps.

11

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

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

12

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.