How to add Google Maps in two tabs of jQuery application

Question

I have two tabs in my jQuery application. I want to use Google Maps in both the tabs. I added script and two <div> tags for each tab shown in code below.

First Tab:

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

Second Tab:

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

Script for Google Maps:

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.getElementByClassName("map_canvas"),myOptions);

    }


----------Style for Google Map
.map_canvas { height: 100% }
#notes{ height: 100%;width:100% ; margin: 0px; padding: 0px }  // Tab1 div tag ,contains the First tab map Div Tag
#accordionWrapper{ height: 100%;width:100% ; margin: 0px; padding: 0px }// Tab2 div tag, contains the First tab map Div Tag

The map is not displaying in the two tabs. What is the problem here?

to find out what the problem is Run it in Google Chrome, go to Tools -> JavaScript Console and tell us what the error is. You can use Firebug in Firefox or F12 in IE9 as alternative. — Ruslan, Jun 14 '11 at 13:24
oh, looks like it's a common JQuery tab issue, see here http://stackoverflow.com/questions/1428178 — Ruslan, Jun 14 '11 at 13:27

Nicola Peluchetti · Answer 1 · 2011-06-14T13:30:45.653

0

As you can see here getElementByClassName() returns a live NodeList of found elements in the order they appear in the tree: you should iterate over that nodeList and create a new map for each element because i don't think gmaps API allows you to do that.

edited Jun 14 '11 at 13:30

answered Jun 14 '11 at 13:25

Nicola Peluchetti

76,206
31
145
192

mekwall · Answer 2 · 2011-06-14T13:48:39.657

You will want to iterate the elements with the map_canvas class and create a new Map instance for each one of them, otherwise it will not work.

And I guess you are using jQuery UI Tabs for this? If so, you'll most likely run into trouble when loading Google Maps into hidden/inactive tabs. As mentioned in the comments there already exist questions about this with accompanied answers that solves this problem.

Anyhow, do the following changes/additions to your code and you should be good to go!

CSS

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

JavaScript

$(function() {

    // Container for maps
    var maps = [],
        // Initial position
        latlng = new google.maps.LatLng(11.6952727, 77.5195312),
        // Options for Google Maps
        mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    // Iterate the canvas elements and create a new map instance
    $(".map_canvas").each(function(){
        maps.push(new google.maps.Map(this, mapOptions));
    });

    // Trigger map resize on tab change
    $('#id-of-tabs-container').bind('tabsshow', function(event, ui) {
        google.maps.events.trigger(maps[ui.index], 'resize');
    });

});

Replace the temporary ids to the corresponding ids of your elements.

How to add Google Maps in two tabs of jQuery application

2 Answers2