Adding a Google Maps API Key to Your Store (OS 3.0 Themes) – SHOPLINE Help Center

A Google Maps API key lets you display an interactive map of your store’s location on your storefront using the Map component. With a map in place, customers can quickly find your physical location, get directions, and check your business hours, helping build trust and drive foot traffic to your store.

This guide explains how to register a Google Maps API key, add the Map component to a store page, and apply your key so the map displays correctly.

Prerequisites for Adding a Google Maps API Key

Before you begin:

A Google account, used to register for the Google Maps Platform.
An active billing account on the Google Maps Platform. This is a requirement for using the platform. For details on when charges apply, see "Google Maps Platform Pricing and Billing Documentation."

Registering a Google Maps API Key with Google Maps Platform

To register a Google Maps API key with the Google Maps Platform:

Go to the Google Cloud console and create a new project (or select an existing one) from the project selector page.
Confirm that billing is enabled for your project. This is a requirement of the Google Maps Platform.

Note: For more information, refer to "Google Maps Platform Pricing and Billing Documentation."
Go to the Maps API Library page and enable the specific APIs you plan to use (for example, the Maps, Routes, or Places API).
Go to the Google Maps Platform > Credentials page.
Click Create credentials > API key.
Copy your new API key from the confirmation dialog, or from the Credentials page under API keys.

Notes:

Restrict your API key before using it in production. An unrestricted key can be copied from your website's source code and used by others, resulting in unexpected charges to your billing account. On the Credentials page, click Restrict Key on your new key, then limit it to your website's domain and to only the APIs you enabled. For details, see "API Security Best Practices."
For more setup instructions, see "Getting Started with Google Maps Platform."

Adding the Map Component to Your Online Store

Adding the Map component and applying your API key both happen in the same place, the Theme Editor, so the steps below continue from where you left off.

Adding the Map Component

To add a map to a page in your store:

From your SHOPLINE admin panel, go to Online Store > Design.
Click the Design button on the OS 3.0 theme you want to edit.
Select the page you want to add the map to, then click + Add component and select Map from the component list.

Note: On OS 3.0 themes, the Map component can be added to most pages, with the exception of the Checkout page.

Entering Your API Key in the Map Component

To display the map on your page:

With the Map component selected, paste your Google Maps API key into the Google Maps API Key field in the side panel.
Enter your store’s coordinates in the Enter latitude & longitude field, in the format 51.30,0.7. You can find these coordinates by opening your store’s location in Google Maps and copying them from the page URL.
Click Save to publish your changes.

Previewing the Map on Your Storefront

Once configured, the map appears on the page with your store’s pinned location, ready for customers to view or get directions from.