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

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

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

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

6. 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); }); }) simplemaps_worldmap.hooks.back=function(){ $("#state_list").val(''); //When you zoom out, reset the select $("#state_list").trigger("chosen:updated"); //update chosen }

   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)

---