simplemaps

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


HTML5 Map Documentation v2.9

Customization

Installation

Common Questions

Troubleshooting

JavaScript API

© Simplemaps.com 2010-2015 | License | Privacy Policy | Releases | Testimonials | Resources | Documentation
Deprecated Maps: Flash USA Map | Flash World Map | Flash Canada Map | Flash Europe Map | Flash Congress Map
Formerly FlashUSAmap.com and Flashworldmap.com