How to set up Google Maps API: A step-by-step guide

1. Sign in to the Google Maps Platform

Head over to https://mapsplatform.google.com/ and hit "Get Started" in the top right corner.

If you're not already signed in to your Google profile, it'll prompt you through those steps. Once you're signed in, you'll be in the dashboard or home area.

2. Start a new project

In the top left corner, next to the Google Cloud logo, you'll see a little drop-down option.

When you click on that, a box will pop up and show you all of the Maps projects you have. There will be an option in the top right to start a new project. Let's go ahead and hit that button.

Name your project, fill in the relevant details and find your location.

Once you hit create, that will take you to your Dashboard, with a Free Trial prompt right at the top. Click on [Start Free].

3. Start your first Google Maps API project (free trial included)

Set up your account information. Agree to their terms and continue when ready.

You'll then need to set up your payment profile and add your credit card information. Google will not charge you beyond the free trial unless you set up automatic payments. And as we said above, the amount of credit you get will cover you for a large number of monthly visitors. So you can go ahead and trial the API without worry!

4. Enable your first APIs

Once you have your account set up, it will redirect you to the dashboard once again. On the left, in the section of tabs under the Google Cloud Platform logo, you'll see an option for APIs and services. That's where we can start creating the APIs you'll need.

Right up top, click on "+ ENABLE APIS AND SERVICES".

Search for the APIs you need (remember, you can use the API Picker if you're not quite sure).

Go through and enable them one by one.

5. Create a Google Maps API Key for the APIs you want

Now, head to the "Credentials" section of the APIs and services tab.

Hit "+ CREATE CREDENTIALS" and select "API key". This will generate a new API key, which you should copy for later use.

It will show up in your list of API keys, where you can edit it to set certain restrictions.

Set up HTTP referrers (websites) to restrict usage to your domains only. This prevents unauthorised use of your API key.

6. Implementing the API on Your Website:

Add the API key to your website’s HTML code. You’ll be inserting a script tag that links to the Google Maps API. It typically looks like this:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="dilatelazyloadscript"></script> 

Replace YOUR_API_KEY with the API key you generated.

If you have a developer on your team, you can hand it off to them at this step because it does get a bit technical. Or give us a call and see if we can help you out! 

Creating the Map

In your website’s JavaScript file, create a function named initMap(). This function will initialise your map.

Within initMap(), create a map object using the google.maps.Map() constructor.

Specify the DOM element to display the map and set map properties like zoom level and centre coordinates. For example:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: -34.397, lng: 150.644}
  });
}

Customising the Map

You can add custom styles, markers, and other features to your map.

For example, to add a marker:

var marker = new google.maps.Marker({
  position: {lat: -34.397, lng: 150.644},
  map: map,
  title: 'Hello World!'
});

Testing Your Map

After implementing the code, test your website to ensure the map displays correctly. Check for any console errors (in your web browser’s developer tools) related to the API.

Optimisation and Updates

Like all tools on your site, you will need to regularly check the performance of your map and optimise it as needed. Keep your API and code updated with the latest releases from Google to avoid any errors or lost functionality.