Using Google Maps in your store locator

Owned by Perry Tew
Last updated: Apr 19, 2016 by Hunter Schaeffer
3 min read

Overview

You can integrate the store locator with google maps in order to provide your customer an easy way to locate and navigate to your store locations.

Steps

To use Google Maps in your store locator, you'll first need to provide your Google Maps API Key.
To do this, you'll first navigate to the Storefronts menu and click on the "Store Locator" tab in the storefronts menu:

Next, Click the settings button, which will present the configuration field for your Google Maps API Key. IF you do not already have one, you can click on the "Signup" link :

The signup link will redirect you to the following URL:

https://developers.google.com/maps/documentation/javascript/

Here you will click on the "Get A Key" button:

 

Upon clicking the "Get A Key" button you'll be prompted with a dialog window, click 'CONTINUE' to proceed to the next page:

You're presented with an agreement that you must accept to continue:

Upon agreeing to above agreement, you ill be redirected to thew following page (please make sure to wait a moment as there may be a couple of pop up messages about the creation of the API.) This page is the page where you actually gerneate the API key that you will configure within your UltraCart storefront locator:

After configuring the name and storefront host(s), click the "Create" button. (Note: It may take up to 5 minutes for settings to take effect!)

Important Note Regarding Proper Configuration of the HTTP referrers configuration

Proper use of Wildcarding in referrer URL

In order for the Google Maps API to properly handle the storefront URLs that may have parameters appended to them, you will want to use the wildcard character when entering your referral URLs.

So for example, let's say you had parameters configured on your URLs like this:

https://www.socklady.com/help/storefinder.html?utm_source=nl178&utm_medium=email&utm_content=nl178xx&utm_campaign=nl178

The proper way to configure the URL in the Google Maps API HTTP Referrers field would be like this:

www.socklady.com/help/storefinder.html?*

You are now presented with your API key. Copy the key. We will be pasting that back into UltraCart:

After copying your key, click the "OK" button

Shortcuts

Keyboard Shortcuts:
CTRL+C = Copy
CTRL+V = Paste 

Now we can return to the store locator configuration area in UltraCart to configure our newly created API key.

Return to the "Settings" button in the Store Locator configuration page and paste  your Google Maps API key into the configuration field, then save the changes.

Congratulations! You've integrated the Google Maps API with your Storefront Locator!

Now you are ready to begin adding the Store Locations to the store locator:

 

Frequently Asked Questions

Question: Can I customize the markers used in the Google Maps that displays with the store record?

Answer: The Google Maps API provides the ability to apply custom markers, or "icons", in the maps. To learn more about cutomizing your map markers, see the following:

https://developers.google.com/maps/documentation/javascript/markers#introduction & https://developers.google.com/maps/tutorials/customizing/custom-markers#try_it_out

Related Documentation

StoreFront Locations

Adding a new store location to your site

https://developers.google.com/maps/documentation/javascript/

Â