Overview
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 homepage and 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
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 $200 monthly credit for Maps API usage, which may be sufficient for low to 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.
Step 6: Provide your Implementation Manager with your API Key
Email your implementation manager your API key and the Treez team will take care of the rest!
Part 2: 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.
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.