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

Oftentimes, users will want to find the location that is closest to them. We've create 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 supported):

  1. Choose the map you want to install:

  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.

How does this script work?

The map geocodes the zip code to latitude/longitude using a public SimpleMaps API based on the US zip code database we sell. The script then iterates over all location/zip pairs using a spherical distance formula to find the closest location. Finally, the map uses the JavaScript API to zoom to the location and open the popup.

Will this script work offline?

Our maps will work offline. However, this script will not. This is because it must communicate with a SimpleMaps API to geocode the zip code into lat/lng coordinates. You could replicate this API by using our US zip code database. Contact us if you need help with this.

How can I customize the search form's HTML and CSS

The default HTML for the search form is:

<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>
You can customize this via the following JavaScript command:
  simplemaps_zipsearch.html="<div>...</div>";
where <div>...</div> is the HTML you see above, tweaked as you desire. Note, it's important that your custom HTML retain elements with the ids zipsearch_zip, zipsearch_search, and zipsearch_error.

Home | License | Privacy | Releases | Testimonials | Resources | Documentation | Order Lookup | All Maps
Formerly FlashUSAmap.com and Flashworldmap.com
© Simplemaps.com 2010-2017