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. Add jQuery to your page by embedding a local copy of jQuery or using the jQuery CDN (shown below):

   <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>

6. Use the ajax attribute of jQuery to load the different mapdata.js files and load the map like this:

   <script type='text/javascript'> $.ajax({async: false, url: 'mapdata1.js', dataType: "script"}); simplemaps_worldmap(); $.ajax({async: false, url: 'mapdata2.js', dataType: "script"}); simplemaps_worldmap(); </script>

For an example, check out the demo we've put together using the HTML5 US map. (Note: If you download the demo, you must upload it to a server for it to work properly).

View Demo Download Demo