Custom Google Map

Custom Google Map



In order for the map to display, the first location under Design › Theme Settings › 14.1 Locations must have the latitude and longitude values.

Adding your custom Google Map requires some setup outside of Lightspeed eCom. In this article, we will be walking you through the process step by step. Here is what we'll be doing:
  1. Create your Google Cloud Platform account
  2. Registering the Maps API for your account
  3. Securing your API
  4. Adding the API to your Theme Settings
Let's do it! First off, Google Maps is no longer completely free to use, but it is free to use within a certain amount of views per month. If you have heavy traffic, then you will have to pay a small amount to serve the map on your site. If you're curious about what the potential costs would be, take a look at their pricing table. The API you will be using is the Maps JavaScript API.

Create Your Google Cloud Platform Account

  1. Begin by going to cloud.google.com and signing in to the Google account that is most associated with your store. If you're not using G-suite for your business, then it is fine to use a personal Google account.
  2. Click on Try Free to register your cloud platform account
  3. Follow the steps to complete registration (you will be required to enter your billing info. If you're only using the Maps API, you will not be charged until you meet the visitor threshold that is outlined in the pricing table.

Register Your Maps API Key

  1. Once you are in your Google Cloud dashboard, go to API & Services and then click on "Enable APIs and Services"
  2. Select Maps JavaScript API and then click Enable
  3. Click on the Credentials tab, expand the Create Credentials dropdown and select API key



Securing Your Maps API Key

Now that you have your API key to use for your Google Map, you need to secure your API key so that it can't be used by other websites.

First, on the API Credentials tab, click on the pencil icon to edit your new API key



For the Application restrictions be sure to select 'HTTP referrers (web sites)' and enter in your store's domain in the blank field under the heading 'Accept requests from these HTTP referrers (web sites)'.




Adding To Your Store

Your key is now ready for use! Copy the full key and paste it into your eCom back office by going to Design › Theme Settings › 14. About & Locations.

Also in your Theme Settings, choose the zoom level you want for your map. This is between 1 and 18, with 1 being furthest away, 18 is the closest. The default level is usually 14, so we recommend starting there.

Lastly, add your locations to the map by following the instructions on adding store locations.