How to setup Google Maps on your Website; a guide to Google Maps APIs

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

How to enable the Google maps functionality on your website.

Your Webdadi Website uses Google Maps on various pages including the property details pages and the office pages. In fact, anywhere on your site where you can see a map will be using Google's functionality. You may also be using additional Google features, such as Google StreetView.

In order for these to work correctly on your Website, you'll need to have your own Google account for your business. This is not something that Webdadi can do for you, as each commercial business has to have their own Google account in order to abide by Google's terms of use. Please note - we don't hold any details of any customer's Google accounts.

From your Google account, you will be required to generate a Google Maps API key via Google Cloud. This link should work as a shortcut taking you straight to the Google Maps area of Google Console (https://console.cloud.google.com/google/maps-apis/)

You may be asked to create a new Project to start the process of enabling the MAPS API’s you will need for the Website, under a project name, so create a Project name first if you need to and then you can generate a KEY to use the APIs which you will PASTE into your VIA Software to link your Website with us to your Google MAPS account.

Once you have created a new maps project within the Google console, you can begin to assign API's to this. You next need to enable the following five map API's:

  • To do this first click the left hand menu of the Google Maps area. > APIs & Services

  • Enable the following APIs:-

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

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

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

    • Places API - Used to find properties locations within our valuation tool.

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

  • Next goto the Keys and Credentials link in the left hand side menu

  • Click the + CREATE CREDENTIALS button then > API KEY, at the top

  • A key will be generated and you need to COPY the key using the right hand end page icon.

  • You must now Restrict the Key, so where you now see your key name under the section API Keys click the key name.

  • For a Website with us Set the application restriction to : Websites

  • Under Website Restrictions, you want to make the key only work for your Website which may include subdomains not just your domain name, so you must ADD these to the list. So where it says Enter property name or value. Enter *.yourdomainname for any subdomain plus your domain name to work.

  • Under API restrictions you do not need to restrict the key unless you want to so this can be left as Don’t restrict key.

  • Click Save

  • Lastly > Check you have Google Billing all set up with a current payment card in Google Cloud as well for your project. If you don’t have a billing account then

    • CREATE ACCOUNT

    • Once created click your Billing Account Name that you have created and click the Payment Overview tab at the top.

    • Click Manage Payment Methods to add/change a current payment card.

Now Login to VIA and add your Google MAPS key into your Website settings > configuration.

  • Login to VIA → [youdomain/webdadi]

  • Go to Settings > Configuration >

  • Select Configuration in the main window then choose > Third Party > Google > Maps

  • PASTE the API key into the API Key and Static API Key fields. The settings will auto save once completed.

Please Note: Only the Super User user rights have access to this section of VIA. You won't be able to make these changes if you don't have this level of access assigned to your account. You should speak to the Super User(s) on your account if you have any questions or queries about your user account access.

You should also ensure that you have restricted your Google Maps API Keys. Please view this article https://webdadi.atlassian.net/wiki/spaces/PKB/pages/893124609 for instructions on how to do this.

 

My maps still aren't working?

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 the navigational menu in the top left hand corner of the Google console and open the navigation menu and select Billing. Select Manage Billing Account 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.

Please also ensure that you have restricted your Google Maps API Key as per the following instructions https://webdadi.atlassian.net/wiki/spaces/PKB/pages/893124609

If you are struggling to generate the API key or you have given us the API key and this is still not working, then please let us know firstly and we will try to help you fix this within your Google console.

Please be aware though 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