Add Zip Search to a U.S. Map | Documentation

Oftentimes, users will want to find the location that is closest to them. We've created a simple script that will allow your users to search for the closest location by zip code. This is a great feature for store locators. Currently, this feature is only available for U.S. zip codes. Here is an example illustrating the script.

Download Demo (U.S) Download search.js

Installation

Here is how you can add this to your map (only US zips are supported):

1. Choose the map you want to install: HTML5 US Map HTML5 County Map HTML5 State Map HTML5 Congress Map HTML5 Custom Map

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

3. Below jQuery, embed the following:

   <script type="text/javascript" src="mapdata.js"></script>
   <script type="text/javascript" src="usmap.js"></script>
   <script type="text/javascript" src="zipsearch.js"></script>
   <script>
     simplemaps_zipsearch.map=simplemaps_usmap; // tells the script which map to work with
   </script>
   

4. Place the following HTML on your webpage where you want your map to appear.

   <div id="map"></div>
   

5. That's it! Your map now supports zip code search and zoom.

FAQs

You may want to know more about how this script works so that you can extend or modify it. Here are some details in question and answer form.

<div style="margin-bottom: 10px;">
  <form> 
    <label for="zip">Find the closest location: </label> 
    <input type="text" id="zipsearch_zip" placeholder="Zip Code" /> 
    <button id="zipsearch_search">Go</button> 
    <span style="color: red; visibility: hidden;" id="zipsearch_error">Please enter a valid 5-digit US zip code.</span>
  </form>
</div>

  simplemaps_zipsearch.html="<div>...</div>";