How to set up Google Maps

Introduction

In this help document, we will guide you through the process of setting up Google Maps for your Plone website. Adding Google Maps to your property listings enhances your website and provides a better experience for potential buyers. This document will walk you through each step, from creating a Google account to adding the map to your website.

Prerequisites

To set up Google Maps for your Plone website, you will need the following:

✓ A Google account

✓ Access to your website's editing tools

✓ Basic familiarity with website editing

Step 1 --- Create a Google Account

If you already have a Google account, you can skip this step. Otherwise, follow these instructions:

1. Go to the Google Account creation page (accounts.google.com/signup).
2. Click "Create account" and select "For myself."
3. Fill in your details:

• First and last name
• Choose a username (e.g., your business email)
• Create a strong password

Follow the prompts to verify your phone number and enter additional information.

Important: Use your business email if possible, as it looks more professional.

Step 2 --- Set Up Google Cloud Platform

Once you have a Google account, you need to set up Google Cloud Platform:

1. Go to the Google Cloud Console (console.cloud.google.com).
2. Sign in with your Google account.
3. Click "Select a Project" in the top-left corner and click on “New Project” link.
4. Name your project (e.g., "YourAgencyName-Maps").
5. Click "Create."

Next, set up billing:

1. In the left sidebar, click "Billing."
2. Click "Link a billing account."
3. Select "Create a new billing account."
4. Enter your business information and payment method.
5. Review and accept the terms of service.

Note: Google offers a generous free tier for most services, so you likely won't incur charges for typical usage.

Step 3 --- Enable Google Maps Services

Now you need to activate the necessary Google Maps services:

1. In the left sidebar of the Google Cloud Console, click "APIs & Services" > "Library."
2. In the search bar, type "Maps."
3. Enable the following service:
   1. Maps JavaScript API
4. Click on the service and hit "Enable."

Step 4 --- Create and Secure Your API Key

Your API key is a special code that allows your website to use Google Maps:

1. In the left sidebar, click "APIs & Services" > "Credentials."
2. Click "Create Credentials" at the top of the page.
3. Select "API key."
4. Copy your new API key – you'll need this later.

To secure your API key:

1. After copying your key, click "Edit API key."
2. Under "Application restrictions," select "HTTP referrers (websites)."
3. In "Website restrictions," enter your website's address (e.g., *.youragency.com/*).
4. Click "Save."

Important: Keep your API key private. Don't share it publicly or with anyone who shouldn't have access to it.

Step 5 --- Add Google Maps to Your Plone Website

Now that you have your Google Maps API key, you need to add it to your website. Since your website is built with Plone 5 CMS and uses the Propertyshelf MLS Embedding add-on, follow these steps:

1. Log in to your Plone website as an administrator.
2. Look for your user menu in the bottom left corner of the screen. It should show your username.
3. Click on your username to open the menu.
4. Select "Site Setup" from this menu.
5. On the Site Setup page, scroll down to the bottom of the page.
6. In the last section labeled "Add-on Configuration", find and click on "Propertyshelf MLS Embedding".
7. In the Propertyshelf MLS Embedding settings, click on the "UI" tab.
8. Look for the field labeled "Google Maps API Key".
9. Paste your Google Maps API key into this field.
10. Click "Save" at the bottom of the page.

Step 6 --- Test Your Map

After adding the Google Maps API key to your Plone website:

1. Go to one of your property listing pages.
2. Check that the map loads correctly and shows the property location.
3. Test on different devices (computer, mobile phone, tablet) to ensure it works well on all screens.

If the map doesn't appear or you encounter any issues:

• Double-check that you've entered the Google Maps API key correctly in the Propertyshelf MLS Embedding settings.
• Ensure you've completed all the previous steps in this guide.
• If problems persist, contact your website administrator or our support team for assistance.

Step 7 --- Manage Costs and Usage

To keep track of your Google Maps usage and costs:

1. In the Google Cloud Console, go to "Billing" > "Billing Overview."
2. Here you can see your current charges and set up budgets.

To set up a budget alert:

1. Click "Budgets & Alerts" in the left sidebar.
2. Click "Create Budget."
3. Set your desired budget amount and configure alert thresholds.

Tip: Start with a low-budget alert (e.g., $10) to monitor usage closely.

Frequently Asked Questions (FAQs) and Common Issues

Q1: The map isn't showing up on my property listings. What should I check?
A: If your map isn't appearing, try these steps:

1. Make sure you've entered the Google Maps API key correctly in the Propertyshelf MLS Embedding settings.
2. Check that you've enabled the necessary Google Maps services in your Google Cloud Console.
3. Verify that your billing information is up to date in the Google Cloud Console.
4. Try clearing your browser's cache and reloading the page.

Q2: My API key isn't working. What could be wrong?
A: There could be a few reasons:

1. Double-check you're using the right API key.
2. Look at the key's restrictions in the Google Cloud Console Credentials page.
3. Make sure your website's address is listed in the HTTP referrers.
4. Check that the Maps JavaScript API is selected under API restrictions.
5. Try creating a new API key and using that instead.

Q3: I have multiple billing accounts. Which one should I use?
A: It's best to use just one billing account if you can. If you need to use multiple:

1. Make sure the right billing account is connected to your project in the Google Cloud Console.
2. You can change the connected billing account in the Billing section.
3. Be aware that changing billing accounts might briefly interrupt your services.

Q4: How can I avoid unexpected charges?
A: To keep your costs under control:

1. Set up budget alerts in the Billing section of Google Cloud Console.
2. Regularly check your API usage in the APIs & Services Dashboard.
3. Use proper API key restrictions to prevent unauthorized use.

Q5: The map was working before, but stopped after I made changes to my account. Why?
A: Changes to your account can sometimes affect your map settings:

1. Check that the Maps JavaScript API is still enabled in your Google Cloud Console.
2. Make sure your billing account is still properly connected.
3. Verify that your API key's restrictions haven't changed.
4. Review any recent changes in your Google Cloud Console and undo them if necessary.

Q6: I've tried everything and the map still isn't working. What should I do?
A: If you've gone through all the troubleshooting steps and the map still isn't working:

1. Try to access your property listing page using a different browser or device to rule out any local issues.
2. If the problem persists, it's time to get some expert help. Here's what to do:
   1. A description of the problem
   2. The steps you've already taken to try to fix it
   3. The screenshot of any errors
   4. Your website's URL. Our support team will create a ticket and get back to you with further assistance.

• Open your web browser's developer tools (usually by pressing F12 or right-clicking and selecting "Inspect").
• Look for any error messages related to Google Maps or JavaScript.
• Take a screenshot of any errors you find.
• Send an email to support@propertyshelf.com with:
  • A description of the problem
  • The steps you've already taken to try to fix it
  • The screenshot of any errors
  • Your website's URL. Our support team will create a ticket and get back to you with further assistance.
    

Conclusion

In this guide, we've covered the essential steps to add Google Maps to your Plone website built with Plone CMS. By following these instructions, you've enhanced your property listings with interactive maps, making it easier for potential buyers to see property locations. Remember to keep your API key private and monitor your usage to make the most of this valuable tool.

Need more help?

Contact Us