CODEWITHSUNDEEP
google-maps
Xtian
Xtian

Reputation: 3587

Google Maps - create a map using a class not an ID?

I have a google map, and I have 3 tabs. I would ideally like to use the same map in all three tabs, but it seems like you can only create a map using an ID:

map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

If this is the case, I would have to make 3 separate maps with 3 separate ID's? Can you make 3 Google maps using just a 'class' and repurpose the same map?

Upvotes: 4

Views: 2258

Answers (2)

David Chase
David Chase

Reputation: 2073

You can use jQuery's object to create new map with

var mapClass = $('.map_canvas'); and var map = new google.maps.Map(mapClass[0],mapOptions);

please view my jsfiddle and let me know http://jsfiddle.net/davidchase03/fDFMz/

Upvotes: 2

ChelaTheGreat
ChelaTheGreat

Reputation: 75

You can use the nebula_gdCN() function below to get an array of elements identified by a class name. Then you can create a new map for each tab and store each map object in a separate variable.

<div class="my_tabs" style="width: 550px; height: 450px"></div>
<div class="my_tabs" style="width: 550px; height: 450px"></div>
<div class="my_tabs" style="width: 550px; height: 450px"></div>

<script>
var tabs = nebula_gdCN('my_tabs') ;
map1 = new google.maps.Map(tabs[0], mapOptions);
map2 = new google.maps.Map(tabs[1], mapOptions);
map3 = new google.maps.Map(tabs[2], mapOptions);

//Include these two functions
nebula_gdCN = function(q){
    var classArr = Array();
    for(var i=0;i<document.getElementsByTagName('*').length;i++){
        if( nebula_gdC(i).className == q){
            classArr.push(nebula_gdC(i)) ;
        }
    }
    return classArr ;
}
nebula_gdC = function(i,b){
    var b = b || '*' ;
    return document.getElementsByTagName(b)[i] ;
}
</script>

Upvotes: 0

Related Questions