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

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

Chelsea Knoll
By Chelsea Knoll

Google Maps is a big part of our lives. Finding the fastest route when you've left later than you should, hunting down the nearest snack without having to detour too far—or just getting to where you need to go. 

And when you're looking for the closest shoe store, tax accountant or dentist, Google Maps swings into action, showing you the top businesses in your area. 

Making sure your business is listed on Maps is a must. 

If you haven't already set up your Google Business Profile, here's how you can get started: How To Optimise Your Google My Business For Local SEO

Google Maps API takes that one step further, putting the map on your business (website). So, let's find out exactly how you can take advantage of that. 

What is Google Maps API?

Picture this: a user lands on your website, looking for your services. They find a sleek, interactive map highlighting your location, they can zoom in, view the area, and get a feel for what's around. This is Google Maps API at work. It's more than just showing a location; it's about creating an experience, a connection. 

It's a way to integrate Google Maps on your site, with personalised directions, in a matter of minutes. 

How is a Google Map integration going to help my business?

With the integration, you could showcase delivery routes and service areas, plan out itineraries, show off upcoming events and so much more. The best part is, you can customise it to match the look and feel of your site, fitting in seamlessly with your current user experience. 

It's also a powerful tool for local SEO. By integrating Google Maps, you're telling search engines exactly where you're located, boosting your chances of appearing in local searches. And in the world of digital marketing, visibility is key.

Still not convinced? Then let's talk stats. 

  • Intoscana saw visitors spending 30% more time on average exploring site content after interacting with the Map
  • Opodo users were 2x as likely to make a purchase as those that didn't use their Map
  • NSCPCC saw a 54% conversion rate when they integrated the map with their form fills

And there are a lot more use cases, examples and evidence - the opportunities are endless. 

What is a Google Maps API key?

This is a bit of personalised code that actually allows the integration. Currently, the Google Maps Platform offers several API keys depending on what fits your business best. Some of these include:

  • Maps Static API for a simple embedded Google Map - this feature doesn't allow much interaction but is a good way to just show one location with a map marker
  • Maps Javascript API for more customisable options that allow user interaction
  • Places API which can show off multiple points of interest, for example, if you have multiple offices or branches
  • Directions API which, as the name suggests, gives you directions for a set route 
  • Street View Static API which offers a non-interactive panorama of your location in a "real-world" view

And the list goes on. If you're not quite sure what API is right for you, check out Google's own API Picker to get you started!

How to set up Google Maps API

Before you can integrate, you'll need to create a Google Maps API key. This is free, though the use of the API does technically have a cost. But don't worry, Google also offers a very generous $300 trial credit in the first 90 days, and an additional $200 credit every single month. 

This covers you for 100,000 static map requests (views) each month, or 28,000 dynamic requests. So there's a lot of free usage to get through before you need to worry about being charged. 

So, let's get started!

1. Sign in to the Google Maps Platform

Head over to and hit "Get Started" in the top right corner.

Sign in to the Google Maps Platform

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.

Google Dashboard

2. Start a new project

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

Start a new project step1

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.

Start a new project step2

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

Start a new project step3

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

Start a new project step4

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

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

Start your first Google Maps API project step1

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!

Start your first Google Maps API project step2

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.

Enable your first APIs step1

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

Enable your first APIs step2

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.

Enable your first APIs step3

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

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

Create a Google Maps API Key for the APIs you want step1

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

Create a Google Maps API Key for the APIs you want step2

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

Create a Google Maps API Key for the APIs you want step3

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

Create a Google Maps API Key for the APIs you want step4


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="" 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.

Wondering about the cost of Google Maps API?

You may have a site with a significant amount of traffic, more than the free credits each month will cover. So it's good to know about the costs before you go ahead and implement. 

You'll find all the information you need, categorised by types of Maps APIs, on their pricing page, with additional options for custom Enterprise tier pricing packages.

Wondering about the cost of Google Maps API

Best practices for integrating Google Maps API - 10 things you should remember

Like we said, the purpose of this feature is to add to the user experience on your site. You don't want to just slap dash a map onto a page and leave it there. Here are some guidelines to follow:

  1. Ensure responsive design that adjusts to different screen sizes and devices.
  2. Customise the map design to fit your brand style.
  3. Optimise the loading times by allowing it to load after the rest of your page so your map doesn't slow things down and annoy users.
  4. Implement lazy loading to get even more efficient, so the map only loads when it's needed, like when users scroll down to where it sits on the page.
  5. Use the map markers sparingly, so you're not cluttering up the map unnecessarily and making it harder for users to find things. 
  6. Keep the user interface (functionality) friendly, making sure controls like zoom and pan are intuitive, ideally matching what people are used to on Google Maps.
  7. Regularly update the API key restrictions to avoid unauthorised usage.
  8. Monitor usage and limits to see where you sit against the free credits so you're not faced with any unwelcome surprise costs. 
  9. Stay informed about updates that could impact your integration and how it works on your site. 
  10. Consider accessibility with options like alternative text for map functions and keyboard navigation.

Go get mapped

And there you have it, a simple way to get a really cool map on your website in just a few minutes. Play around, check out the different APIs and think about how you can use different functions to engage users on your site. Have fun!

happy clients

what our clients are saying

create business. better everyday.

Let's Talk

feed your mind

learn from the best minds in the business


Our approach to becoming Australia's most respected agency.

Our approach to becoming Australia's most respected agency.

Bodie provides some insight into Dilate's internal operations. How we approach what we do, and how we strive to be Better Everyday.


    Let's Talk

    Leave your details below or give us a call on 1800 345 283 and let's chat about your goals, and how we can help grow your business.

    Free, No Obligation Audit and Consult.

    By clicking submit you agree to our Privacy policy
    [handl_ref_i][/handl_ref_i] [handl_landing_page_i][/handl_landing_page_i] [handl_url_i][/handl_url_i] [submission_page_i][/submission_page_i] [utm_source_i][/utm_source_i] [utm_medium_i][/utm_medium_i] [utm_campaign_i][/utm_campaign_i] [utm_term_i][/utm_term_i] [utm_content_i][/utm_content_i] [gclid_i][/gclid_i]


      Get Started

      Leave your details below or give us a call on 1800 345 283 and let's chat about your goals, and how we can help grow your business.

      Free, No Obligation Audit and Consult.

      By clicking submit you agree to our Privacy policy
      [handl_ref_i][/handl_ref_i] [handl_landing_page_i][/handl_landing_page_i] [handl_url_i][/handl_url_i] [submission_page_i][/submission_page_i] [utm_source_i][/utm_source_i] [utm_medium_i][/utm_medium_i] [utm_campaign_i][/utm_campaign_i] [utm_term_i][/utm_term_i] [utm_content_i][/utm_content_i] [gclid_i][/gclid_i]