Add Multiple Maps to a Page | Documentation

Note, this tutorial uses the new version 3.5+ syntax for creating map instances.

To add multiple maps to a single page, do the following:

1. Choose the map you want to install:
   HTML5 World Map HTML5 US Map HTML5 Canada Map HTML5 North America Map HTML5 County Map HTML5 Congress Map HTML5 State Map HTML5 Custom Map HTML5 Europe Map HTML5 UK Map HTML5 Australia Map HTML5 Country Map

2. Create two unique mapdata.js files with unique names (e.g. mapdata1.js and mapdata2.js)

3. By default, the maps will try to install themselves in the same div, the one with the id map. To avoid this, you must set a unique div id for each map to fill by adding the attribute div to the main_settings.

   For example, you could add div: 'map1', to the main_settings of the mapdata1.js file and div: 'map2', to the main_settings of the mapdata2.js file. These values can be whatever you like, but they must correspond to the ids of divs that you have created on the page. So, in this example, your HTML should contain:

   <div id="map1"></div>	
   <div id="map2"></div>
   

4. Embed each mapdata.js file and immediately create a unique map instance using simplemaps_worldmap.create();. This will bind the current simplemaps_worldmap_mapdata to each instance.

   <script src="usmap.js"></script>
   <script src="mapdata1.js"></script>	
   <script type='text/javascript'>	
   	var map1=simplemaps_usmap.create();
   </script>
   <script src="mapdata2.js"></script>
   <script type='text/javascript'>	
   	var map2=simplemaps_usmap.create();
   </script>
   

5. Use the mapdata property of instance to control it:

   <script type='text/javascript'>	
   function make_idaho_green(){
   	map1.mapdata.state_specific.ID.color='green';
   	map1.refresh();
   }
   </script>
   

For an example, check out the demo we've put together using the HTML5 US map.

View Demo Download Demo