Add Multiple Maps to a Page | Documentation

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 Congress Map

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

3. Set auto_load: 'no', in the main_settings of each mapdata.js file.

4. 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>

5. Embed each mapdata.js file and immediately create a unique map instance using create_simplemaps_worldmap();. 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=create_simplemaps_usmap(); </script> <script src="mapdata2.js"></script> <script type='text/javascript'> var map2=create_simplemaps_usmap(); </script>

6. After the DOM is finished loading, manually load each map

   <script type='text/javascript'> function load_maps(){ map1.load(); map2.load(); } </script>

7. 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