Overview
Integrating Google Maps with your website allows you to easily embed Google Maps content on select pages and configure delivery order functionality.
Embedding Google Maps on your website helps visitors understand exactly where your stores are without having to leave your site. Treez Ecommerce typically features Google Maps on the locations page, and you can add your map to other landing pages of your choosing.
Keep reading to learn more about how to set up Google Maps for your website!
How to Update Google Maps for Treez Ecommerce
Update Google Maps for Treez Ecommerce in two easy parts:
Part 1: Obtain a Google Maps API key
Step 1: Create a Google Cloud Platform (GCP) Project
If you already have a Google Cloud Platform project set up, you can skip down to Part 1 - Step 2.
Sign in to Google Cloud Console:
Go to Google Cloud Console and sign in with your Google account.Create a new project:
Click the dropdown in the top navigation bar.
Select New Project.
Enter a project name and, optionally, select an organization or folder.
Click Create.
Activate the project:
Once created, click the dropdown again and select your newly created project.
Step 2: Enable the Google Maps API
In the left-hand navigation menu, go to APIs & Services > Library.
Use the search bar to find Maps JavaScript API.
Click on the result and select Enable.
Step 3: Set Up Billing
Go to the Billing section:
In the left-hand menu, navigate to Billing.Link a billing account:
If you don’t already have a billing account, follow the steps to set one up, including adding your payment method.
Link your billing account to the project.
Note: Google provides a monthly credit for Maps API usage, which may be sufficient for moderate usage.
Step 4: Generate the API Key
Once your billing information has been entered, your new API key will appear in a popup. Copy it for later use.
Step 5: Restrict the API Key
To enhance security and prevent unauthorized usage:
In the next popup, you will be asked to Protect your API key. Select restriction type API Restriction from the dropdown menu.
Select APIs: Maps Embed API, Geolocation API, Maps JavaScript, Places API
Navigate to Keys & Credentials in the left hand navigation menu:
Under API Keys, click on your Maps Platform API Key
Under “Application restrictions”, select Websites
Under "Website restrictions," select Restrict key. Hit “ADD” to configure your referrer restriction.
For full website cutover - enter your website URLs (e.g., https://example.com/* & https://www.example.com/*).
For Subdomain implementation, enter your subdomain URLs (e.g., https://shop.example.com/* & https://www.shop.example.com/*)
The /* at the end ensures that all paths are included
Save the changes
Step 6: Enable Google Maps Services
Once you've generated your Google Maps API key, you will need to enable five Google Maps Services.
Click on Enabled APIs & services, then click Maps JavaScript API from the list
Enable: Maps Embed API, Maps JavaScript API, Maps Static API, Geocoding API, Places API and Save.
Part 2: Install your API key in Treez Ecommerce Admin
Once you've generated your Google Maps API key, you'll need to update it in Treez Ecommerce Admin.
Copy your Google Maps API key (see Part 1, Step 4 for more detail)
Navigate to Treez Ecommerce Admin → Settings
Click on Google in the sidebar to open Google Settings
Paste your API key in the Google Maps API URL field in this URL format:
https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&libraries=places,geometry then click Update to save your changes
In the Store Status dropdown menu, click Publush to push the changes to your website. Note that publishing takes 3-5 minutes.
Verify that Google Maps is functional on your ecommerce website. For default map placement:
If you provide delivery → enter a delivery address and ensure this feature is working.
Go to your /store-locator page → ensure the map is loading
Go to your /checkout page, → ensure the map is loading
Voila! You've installed your updated Google Maps API key on your site
Part 3 (optional): Customize how maps will appear on your website
Whether you want to add a new map to your site or edit an existing one, first you'll need to make sure your Google Maps API key has been updated in Treez Ecommerce. (See Part 2 above.)
To add a new map to a page:
Navigate to your content management system (CMS), Prismic, and open the page you'd like to edit.
Scroll to find where in the page you want to add the map and click the "+" icon to add a slice (aka content block.)
Select the Map slice type and click to add it to the page.
Fill out the details for how you want the map to appear, including text, call to action (CTA), link(s), and styling.
Click Save to save your changes.
Click Publish to publish the changes to your live site.
Voila! You've added a new map to your website. Check out how it looks live on your site.
To edit an existing map:
Navigate to your content management system (CMS), Prismic, and open the page you'd like to edit.
Scroll to find the Map slice on the page.
Edit the details for how you want the map to appear, including text, call to action (CTA), link(s), and styling.
Click Save to save your changes.
Click Publish to publish the changes to your live site.
Voila! You've updated the map on your website. Check out how it looks live on your site.
Need to know how to set up delivery zones, powered by Google Maps? Head here.