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:

  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)


© Simplemaps.com 2010-2017 | Home | License | Privacy Policy | Releases | Testimonials | Resources | Documentation
Formerly FlashUSAmap.com and Flashworldmap.com