Google Maps - create a map using a class, not an identifier?

Question

I have a google map and I have 3 tabs. Ideally, I would like to use the same map in all three tabs, but it looks like you can only create a map with an id:

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

If so, would I need to make 3 separate cards with three separate identifiers? Can you make 3 google maps using just the “class” and rename the same map?

Answer 1

You can use jQuery object to create a 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/

Answer 2

You can use the nebula_gdCN () function below to get an array of elements identified by the class name. Then you can create a new map for each tab and save 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>