With the holiday season rapidly approaching, it’s time to make sure your business is doing everything it can to streamline your customers’ holiday shopping experience. A good place to start is with a simple store locator for your website or ecommerce experience. Store locators can display just one store location or all locations of your stores, and help potential customers identify the nearest locations to them. Once interested shoppers know where your stores are and which is closest to them, they’re one step closer to walking through your door. 

**Adding a store locator if you’re using an ecommerce platform**If your website or online store uses a common ecommerce platform, you can find store locator plugins that allow you to enter your store location information and generate a store locator for your website. If you're using a plugin that displays your stores on a Google map, you might need to get and paste in an API key.

**Adding a simple map with one store location to your website**You can also display a single store on a map without writing code. The Embed API allows a few common map types to be inserted into your website using an iframe, similar to sharing YouTube videos. The fastest way is to use the Embed API quick start guide, which lets you find your store in Google Maps and generates code for you to paste into your website. Your site visitors can interact with the embedded map that highlights your store location and provides a button for them to get directions. As with some other methods, you'll need an API Key.

Adding a store locator with multiple locations, directions, and more If you have a website built in JavaScript, you can either use a plugin to add a store locator (without any JavaScript know-how) or use our store locator codelab to learn how to build a custom store locator using your JavaScript knowledge. Below, we walk through key elements of the codelab and explain how to build it into your site.

First, download the code to build a working store locator for a fictitious business. All of the files you'll need to work with in this tutorial are in the /src directory. 

Next, you’ll need to replace YOUR_API_KEY with your actual API key in two places: 

1. The script tag at the bottom of index.html where we're importing the Maps JavaScript API. If you aren’t familiar with how to generate an API key, check out our quick video walkthrough.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization"></script>

 2. In app.js, search for YOUR_API_KEY and replace it with your API key.

const apiKey = 'YOUR_API_KEY';

Now, you can run a simple web server on your computer to view this code in action and customize it to your own business.

From the command line, go to the directory of the code you just downloaded and move into the /src folder. Next, run the following from the command line to start a simple web server:

 $ python -m SimpleHTTPServer 8000Once you’ve done this, you can view the page in your web browser at http://localhost:8000. Back at the command line, press the Control+C keys together to stop the web server.

It should look like this:

Customize your store list in JSONNow, you can replace the fictitious stores with your own in the stores.json file. GeoJSON is a way to store geographic data in a JavaScript Object Notation (JSON) format. It’s an easy format to enter information, and it works well with the Google Maps API. Here’s an example of a point representing a single store using JSON format:

{
	"geometry": {
		"type": "Point",
		"coordinates": [-0.1428115,
			51.5125168
		]
	},
	"type": "Feature",
	"properties": {
		"category": "patisserie",
		"hours": "10am - 6pm",
		"description": "Modern twists on classic pastries. We're part of a larger chain of patisseries and cafes.",
		"name": "Josie's Patisserie Mayfair",
		"phone": "+44 20 1234 5678",
		"storeid": "01"
	}
}

Think of the above as a list of information that JavaScript can interpret to retrieve information about each of your stores. The most important piece within the JSON data is coordinates in the geometry property. These geographic coordinates tell Google where to place the marker on the map. Get the coordinates for each of your store locations using our geocoding demo in the Geocoding API documentation. Enter in the address of your store, press the "Geocode" button, and you'll see a panel appear providing the coordinates of that address next to the word "Location". The number before the comma is the latitude, and the number after the comma is the longitude. Use these numbers to replace the two numbers in the coordinates property of the JSON entry for that store location. For a large number of addresses, you may want to call the Geocoding API directly; a sample request is provided in the documentation.

You can choose whatever information you want to provide in the properties property of the object, but make sure every entry in the list has the same set of properties so you can use them to show the store details of each store that the user can select. This descriptive information, such as name and hours, will show up in the window that opens when a location is clicked.

Here you can see the info window for one of the locations on the map. The detailed code is in step 4 of the codelab where the map is populated with the markers and a click event added to open the info window and display the store's properties when the marker is clicked.

You'll want to customize the frame of the map to surround your stores instead of the fictitious stores in the sample. The first lines in the initMap function that create the map are where the center and zoom level of the map are set. You'll want to pick a latitude and longitude that is in the middle of all your store locations (you can use Google Maps to find an appropriate center point, then right-click and choose "What's here?" to get the latitude and longitude of that point on the map).

Replace the numbers for lat: and lng: in the center: property of the map with your coordinates, and play around with the zoom level (between 1 and 20) to find the number that shows all your locations. Zoom level 1 shows the entire globe, whereas zoom level 14 shows approximately one city. Each time you make a change in your code, you can save it and run your python web server again at the command line, to see your changes reflected at http://localhost:8000

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 52.632469, lng: -1.689423},
  });

At this point, you can further customize your map by adding custom logos, markers, or map styles. This is explained in step 5 of the codelab. The sample code has logic that displays a purple logo marker if the story has its "category" property set to "patisserie" and a green logo marker if the story has its "category" property set to "cafe".

An important step in creating your store locator is allowing the user to search based on their location. For the next step to work, ensure that there is a property for each store with a unique store identifier. In the sample code, the property is called "storeid" and each store has a unique number.

_Enable search for your store locator_Now that you have a map with all the store locations on it, an input for the customer's starting location will make it easy for the customer to see how close your stores are. You can use the Places Autocomplete Service to make it especially easy for your users to enter their starting address.

With some boilerplate styling, your search box will automatically offer suggestions for addresses as the user types. Then they can select the address they were trying to type from a dropdown menu of suggestions.

Here is the minimum code to create a text input field on your page and add the Places Autocomplete functionality to it.

const input = document.createElement('input');
const options = {
    types: ['address'],
    componentRestrictions: {country: 'gb'},
    fields: ['address_components', 'geometry', 'name'],
};

const autocomplete = new google.maps.places.Autocomplete(input, options);

You can specify the options to constrain the suggestions to a type of place (in this case, addresses and not establishments) and to a certain location (in this case, the United Kingdom). With the fields property, we specify which Place Details to fetch when the user selects one of the suggestions. See all the options for a Place Autocomplete search bar in the reference documentation.

Now that we know the user’s location, we can calculate their distance from each store. 

This is done by initially centering the map to the address the user selected. The process goes like this:

1. Move the map’s center to the user's selected address.

2. Find how far each store’s coordinates are from that address.

3. Sort the stores by distance and display them in order. This is the step that makes use of the unique store ID property.

To complete each step takes more code than we’ll show here, but it’s covered in-depth in steps 6 and 7 of the codelab.

Publish your store locator The index.html file in the sample code has just enough code to put the map on the webpage, and has only been running on your local machine. To incorporate it into your online website, follow these steps:

1. Create a new page as you normally do for your website, and insert the <div id="map"></div> wherever it makes sense in your layout. Be sure to specify the size of the div either in its properties or in your CSS styles.  

2. Copy over the other parts of index.html into the HTML file of your webpage, including the two <script> tags.

3. Finally, copy the app.js file and your customized stores.json file over to the same directory where your website's webpages are stored.

No matter what ecommerce platform you might be using, level of technical expertise, or number of store locations, there’s a simple option and approach to suit your needs and add a store locator to your site before the holidays. 

For more information on Google Maps Platform, visit our website.