Creating a Store Locator (With Examples!)

A well-functioning store locator is one of the most important features a commercial website can have, particularly for brick-and-mortar stores. It’s easy to create your own store locator with Bing Maps API’s developer resources, including examples and documentation.

In this guide, we’ll be creating a store locator for a coffee shop named Contoso Coffee using simple JavaScript. Read on to find out how to make your own.

example of a coffee shop locator

Creating a key

It doesn’t take long to get a fully functional store locator up and running! You’ll need a key to make calls to Bing Maps API. If you’re a smaller business or a developer experimenting with location APIs, you can create a basic key for free to get started. For larger businesses handling a large volume of requests and more billable transactions, we recommend contacting sales to learn more and acquire an Enterprise key.

What goes into creating store locators?

Any basic example of a store locator will include 3 elements:

  • A search bar
  • A dynamic map that includes multiple layers for displaying symbols
  • Location-aware features for calculating directions and distances

Bing Maps API provides developers the tools to create a store locator that includes all these elements and then some.

Building a framework

In this store locator example, we’ll start by creating a framework for it. This will cover the user interface elements of your locator, such as the search bar and store logo.

First, create a separate folder in your chosen development environment titled images to host these files. These can then be easily retrieved when needed.

<body>
    <div class="header">
        <img src="/tutorials/store-locator/images/logo.png" alt="Contoso Coffee" />
    </div>
    <div class="sidePanel">
        <div class="searchBar">
            <input id="searchBox" type="text" value="Seattle" />
            <input id="searchBtn" type="button" value="Search" />

As you can see in the example above, creating a framework for your store locator only requires a few lines of basic code. You can further define the look of your locator by changing CSS styles in the Locator.css file. Now, it’s time to load our key and tap into Bing Maps API.

Adding a data source

For your framework to be functional, we’ll need to create a data source to power the store locator. This source will host the list of your store locations. Create a Locator.js file to host this information. This file will also be the key to loading other mapping features, including:

  • Creating a new data layer for our pushpins
  • Specifying the distance units to be used in the map (var distanceUnits = 'km';)
  • Loading various Bing Maps API modules

Our store locator example specifically references 3 Bing Maps API modules that will power our locator–Spatial Data, Search, and Spatial Math. Navigate to the Locator.js file in the GitHub repository for a detailed look at everything your js file should include.

Pro Tip: Once your data source is created and in use, Bing Maps Data Source Manager builds an index to boost performance and accelerate searches of your data. Deleting and recreating the data source will delete the index so it is recommended that you perform updates to change items in your data source rather than performing a delete and re-upload from scratch.

Loading the script

The hard part’s over! Once our Locator.js file is ready, we’ll be clear to proceed onto the final step of creating a store locator – loading the Bing Maps API key and script.

<!-- Reference to the Bing Maps Web V8 SDK -->
<script type='text/javascript'
     src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]'
     async defer>
</script>

This store locator is a great example of how easy it is to create feature-dense mapping experiences with Bing Maps API. A key, a few images, and a JavaScript source file is all it takes to create a fully functional store locator.

 map showing a route to a coffee shop

Location-aware APIs

The locator feature’s ability to calculate distances from your location to a store outlet, or to visualize multiple data layers, is enabled by multiple location-aware APIs. Spatial Data Services make it possible for developers to work with larger data sets when creating a store locator, allowing them to upload data and making it available for use in apps as a REST service.

Earlier, we mentioned the importance of a powerful search bar as an example of what goes into a useful store locator. This functionality is enabled by Bing Maps API’s Search module. Users can rely on this module for fast real-time geocoding and reverse geocoding, turning physical street addresses into geographic coordinates and vice-versa.

Both of these modules, among many others, are part of Bing Maps API’s V8 Web Control. This powerful control enhances the web mapping experience for developers with support for features like:

  • HTML5 canvas grid maps
  • Animated tile layers
  • Real-time traffic

…and so much more. V8 Web Control gives you all the tools you need to develop full-fledged mapping apps, whether it’s creating a store locator or building a solution for job hunting. Check out our interactive SDK for an immersive introduction to all the modules used in a store locator, including editable examples!

Go beyond store locators, and build a scalable mapping solution for your business on a developer-friendly platform. Create a free Bing Maps API key to get started today. If you’d like to learn more about developing with Bing Maps API, reach out!