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
Navigate to APIs & Services > Credentials in the left-hand menu.
Click + CREATE CREDENTIALS and select API key.
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:
Click the Edit icon (pencil) next to your API key in the Credentials tab.
Restrict key by API:
Under "API restrictions," select Restrict key.
Click Select APIs and choose Maps JavaScript API, then click OK.
Restrict key by referrer or IP:
For web applications, use the "HTTP referrer" restriction.
For full website cutover - enter your website URLs (e.g., https://example.com/*).
For Subdomain implementation, enter your subdomain URLs (e.g., https://shop.example.com/* )
The /* at the end ensures that all paths are included
For server-side applications, restrict by IP address.
Save the changes.
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 Purge Cache to push the changes to your website
Voila! You've installed your updated Google Maps API key on your site
Part 3: Set up 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.