Skip to main content
How-to

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:

Store-Locator-navigation.PNG

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 :

Store-Locator-Wizard-GoogleMaps-Signup.PNG

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:

Google-Get-A-Key.PNG

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

Google-Get-A-Key-2.PNG

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

Google-Get-A-Key-3.PNG

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:

Google-Get-A-Key-4.PNG

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​

info

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:

groovy

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

groovy

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

![Google-Get-A-Key-5-copy your key.PNG](pathname:///confluence/1377478/Google-Get-A-Key-5-copy your key.PNG)

After copying your key, click the "OK" button

info

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

![Google-Get-A-Key-6-completed key creation.PNG](pathname:///confluence/1377478/Google-Get-A-Key-6-completed key creation.PNG)

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.

![Google-Get-A-Key-7-save key in ultracart.PNG](pathname:///confluence/1377478/Google-Get-A-Key-7-save key in ultracart.PNG)

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:

![Creating Store Location record.PNG](pathname:///confluence/1377478/Creating Store Location record.PNG)

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/

Was this page helpful?