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:

Download Demo (World) Download search.js

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:

  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. Also, embed the search.js file (downloadable above) and tell it which map you are using.

    <script src="mapdata.js"></script>
    <script src="worldmap.js"></script>
    <script src="search.js"></script> = simplemaps_worldmap;
    <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=''></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 id="state_list" style="width:350px;" tabindex="0"></select>			

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

    	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;
    		var id=$(this).val();
    	$("#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)

Home | License | Privacy | Releases | Testimonials | Resources | Documentation | Order Lookup | All Maps | FAQs
Formerly and is a product of Pareto Software, LLC. © 2010-2024.