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:
- Create your Google Cloud Platform account
- Registering the Maps API for your account
- Securing your API
- 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
- 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.
- Click on Try Free to register your cloud platform account
- 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
- Once you are in your Google Cloud dashboard, go to API & Services and then click on "Enable APIs and Services"
- Select Maps JavaScript API and then click Enable
- 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.
Related Articles
Google Map
Om de kaart weer te geven, moet de eerste locatie onder Ontwerp > Thema-instellingen > 14.1 Locations de breedtegraad- en lengtegraad-waarden hebben. Het toevoegen van uw aangepaste Google Map vereist enige installatie buiten Lightspeed eCom. In dit ...Brauch Google Map
Damit die Karte angezeigt werden kann, muss der erste Ort unter Design ›Designeinstellungen› 14.1 Standorte die Werte für Längen- und Breitengrad aufweisen. Das Hinzufügen Ihrer benutzerdefinierten Google Map erfordert einige Einstellungen außerhalb ...Why is the Google Map not showing?
There may be several reasons why the map is not displaying correctly. Here are some areas to troubleshoot: The first location under Design › Theme Settings › 14.1 Locations must have the latitude and longitude values The API key has to be secured and ...Can you help with setting up the theme?
This is not included in the free theme support; however, we do offer various packages for assistance with the installation and customization of your theme. Examples of what these involve include: Customizing the design with your branding and identity ...Waarom wordt de Google Map niet weergegeven?
Er kunnen verschillende redenen zijn waarom de kaart niet correct wordt weergegeven. Hier zijn enkele gebieden om problemen op te lossen: The first location under Design › Theme Settings › 14.1 Locations must have the latitude and longitude values ...