How to fix your Website's Google Maps if they aren't working properly or have a greyed out watermark on them

Owned by Nathan Birch (Unlicensed)
Last updated: Feb 23, 2024 by Oliver Chapple
4 min read

My maps are not working?

In order to use the Google Maps functionality on your website, each customer must have their own Google account. This is not something that Webdadi can organise or manage for you, as each commercial business needs to have its own Google account to abide by Google's terms of use and its services which invariably require billing accounts. Please note - we do not hold any details of any customer's Google accounts.

Using Google can be pretty daunting as there is so much to it, however, follow these key steps in this article to rule out which of the following potential issues are causing your maps not to work properly….

1) First you should check that your billing information has been correctly setup in your Google account, and secondly that your payment method, e.g. your payment card has not expired, which is often the cause and so this should be the first potential issue for you to rule out.

If the maps aren't working on your website, please double-check that the billing information has been added correctly to your Google account as the API project won't work without this being authorised.

  • Go to: https://console.cloud.google.com/billing/ - Click the Billing Account Name that is relevant.

  • Click the 'Payment Overview' tab at the top, and you should see in this section the card details attached to the account. If there is no card attached, then you will need to click on the blue 'Add billing account' button and fill out the requested details.

  • Check your card expiry date and make sure you have an up-to-date payment card.

2) Check that you have ENABLED the necessary map APIs needed for MAPS to display on your website…

Goto to your Google Maps area in Google: https://console.cloud.google.com/google/maps-apis/

Check that the following five map API's are enabled, if you see the word Disable then you do have the API enabled:-

  1. Geocoding API - Used to find locations and pin property addresses in your VIA software.

  2. Maps Javascript API - For the use of interactive website maps such as the property details pages.

  3. Maps Static API - Used in instances where website maps are static and can't be interacted with.

  4. Places API - Used to find property locations within our valuation tool.

  5. Street View Static API - Required for using Google Street View functionality on property details pages.

Please note: If you have updated your card/billing details and ensured the map APIs are enabled but your Google maps are still not displaying correctly, you may need to regenerate your map API keys and add them to your VIA software. (See below in Section 4)

  • Now open an Incognito Window (Chrome) or New InPrivate Window (Edge), load your website and check your maps. If they are still not working then please continue…

4) Ensure you have a Google Maps API key created and that it is also the same API key that is already configured in the VIA CMS Software. Here’s how…

  • Login to Google Console - The Google Maps area
    https://console.cloud.google.com/google/maps-apis/

  • Select Keys and Credentials

  • Under the API Keys section next to your Key, if you already have one, click SHOW KEY,
    or to Regenerate an API Key click the 3 dots on the right-hand end of the KEY record line and select EDIT KEY then at the top click the REGENERATE KEY button.

  • COPY the Key by clicking the little icon on the right

  • Open another tab and Login to your VIA Software using [yourdomainname/webdadi]

  • Click Settings on the left-hand side. Go to Settings > Configuration

  • Click Configuration in the right-hand screen tree to reveal > Third Party > Google > Maps

  • Now check the API Keys are the same. If not PASTE the Key from the first steps over an incorrect Key or empty value here.

  • Now open an Incognito Window (Chrome) or New InPrivate Window (Edge) and load your website and check your maps. If they are still not working then please continue…

3) Ensure you have restricted your Google Maps API Key

You might find that your website maps are not working even once you have added your billing details and authorised the relevant map APIs. In this instance, a lack of restrictions on your API key could cause your maps not to work correctly. Please read the article below for instructions on how to add restrictions to your API keys. This will ensure your maps are not misused or abused in their use.

https://webdadi.atlassian.net/wiki/spaces/PKB/pages/893124609

4) Ensure you have added your domain and subdomains to your Google Cloud Console

If you see the following error and you’re using Google Chrome:

Sorry, something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

You will likely need technical support at this point. If you have internal IT support resources continue, otherwise the named person in your organisation that has a support pack with Webdadi can request help with the following should help be required.

Click the ellipsis in the top right-hand side of the browser, then select More Tools > Developer Tools. Then click the Console tab. This will reveal more details about the error

If you see a further red error saying Google Maps JavaScript API error; RefererNotAllowedMapError

Login to your Google Cloud Console and ensure your domain has been added to the list of allowed referrers.

 

Please be aware that the maps are a Google product and may need Google's dedicated Maps API helpdesk to look into any technical issue that you are having. Below is a link to Google Maps Platform Support and Resources page.

https://developers.google.com/maps/support

If you need to contact Google's support team:

https://developers.google.com/maps/support#contact-maps-support