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.
Here is how you can add this to your map (only US zips are supported):
Choose the map you want to install:
Add jQuery to your page by embedding a local copy of jQuery or using the jQuery CDN (shown below):
Below jQuery, embed the following:
Place the following HTML on your webpage where you want your map to appear.
That's it! Your map now supports zip code search and zoom.
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?
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>
<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