Add Search to your Interactive Map | Documentation

Interactive maps look great and make it easy for your visitors to navigate to their region of choice with a simple click. Unfortunately, not everyone visiting your site will have a strong grasp of geography. Therefore, you might consider supplementing your map with a searchable drop down menu like this one:

---

---

This tutorial will show you how to easily add your own searchable dropdown menu using the jQuery plugin Chosen and a little bit of JavaScript. Follow these steps:

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. Set js_hooks: 'yes', in the main_settings of the mapdata.js file

3. Follow the standard installation instructions. This requires embedding the worldmap.js file and mapdata.js files and adding a div with the id "map" to your webpage:

   <script src="mapdata.js"></script> <script src="worldmap.js"></script> <div id="map"></div>

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

5. Download the jQuery plugin Chosen and embed the chosen CSS and JavaScript files:

   <link rel="stylesheet" href="chosen/chosen.css"> <script type='text/javascript' src='chosen/chosen.jquery.min.js'></script>

6. Add HTML for a blank dropdown with the id state_list above your map:

   <select data-placeholder="Choose a Country..." id="state_list" style="width:350px;" tabindex="1"> <option value=""></option> </select>

7. Add the following custom JavaScript/jQuery to your page (in the downloadable example, this can be found in the search.js file):

   $(document).ready(function(){ var state_list=$("#state_list") for (var state in simplemaps_worldmap_mapdata.state_specific){ var key=state; var value=simplemaps_worldmap_mapdata.state_specific[state].name; state_list.append($("<option></option>").attr("value",key).text(value)); } state_list.chosen(); state_list.change(function(){ var id=$(this).val(); simplemaps_worldmap_state_zoom(id); }); }) function simplemaps_worldmap_back(){ $("#state_list").val(''); $("#state_list").trigger("chosen:updated"); }

   In plain English, the above:

   • Iterates over your mapdata.js file to add every state to your dropdown
   • Tells Chosen to do it's magic on the dropdown with the id state_list
   • Listens for a state to be selected and uses the JavaScript API to zoom in on that state
   • Resets the dropdown to "Choose a Country" after the back button has been clicked (using JavaScript hooks)

---

Since this is a complicated example, you should download the demo and view the source files:

Download Demo (World)

---