Google Maps Platform Getting Started: Quickstart Guide (2026)

Getting started overview

To begin development with Google Maps Platform, the primary steps involve setting up a Google Cloud project, enabling specific APIs, and generating an API key. This key is used to authenticate requests and link usage to a billing account. Developers can then integrate the chosen SDK or API into their application. Google Maps Platform provides SDKs for web (JavaScript), Android, and iOS development, alongside various web services APIs for functionalities like geocoding, directions, and place searches. The platform operates on a pay-as-you-go model, with a monthly credit applied to usage, as detailed on the Google Maps Platform pricing page.

The following table outlines the foundational steps required to get started with Google Maps Platform:

Create an account and get keys

Access to Google Maps Platform APIs requires a Google Cloud account. If you do not have one, you will be prompted to create one and set up a billing account. Google Cloud Platform is the central point for managing all Google Maps Platform resources, including API keys, enabled APIs, and billing. Detailed instructions for setting up your Google Cloud Project are available in the official documentation.

1. Create or Select a Google Cloud Project

Navigate to the Google Cloud Console and either select an existing project or create a new one. A project organizes all your Google Cloud resources, including API keys and billing settings. It acts as a container for your application's data and code.

2. Enable Google Maps Platform APIs

Once a project is selected, you must enable the specific Google Maps Platform APIs that your application will use. For example, to display an interactive map on a webpage, you would enable the Maps JavaScript API. To enable APIs:

1. Go to the API Library in the Google Cloud Console.
2. Search for the desired Google Maps Platform API (e.g., "Maps JavaScript API").
3. Select the API and click the "Enable" button.

Repeat this step for all necessary APIs, such as the Places API for location searches or the Directions API for routing.

3. Set up a Billing Account

Google Maps Platform services are not entirely free. While a monthly free credit of $200 is provided, a valid billing account linked to your project is mandatory to use any Google Maps Platform API. This ensures that any usage exceeding the free tier can be charged. To set up billing:

1. Go to the Cloud Billing section in the Google Cloud Console.
2. Either create a new billing account or link an existing one to your project.
3. Follow the prompts to enter payment information.

4. Create an API Key

An API key is a unique identifier used to authenticate requests to Google Maps Platform APIs. It is a simple encrypted string that identifies your project and provides access to the APIs enabled for that project. To create an API key:

1. Navigate to the Credentials page in the Google Cloud Console.
2. Click "Create Credentials" and select "API Key."
3. A new API key will be generated and displayed. Copy this key immediately.

5. Restrict Your API Key

For security, it is critical to restrict your API key. Unrestricted API keys can be exploited, leading to unauthorized usage and potential charges. Restrictions can be applied based on HTTP referrers, IP addresses, or Android/iOS applications. For web applications, configure HTTP referrer restrictions:

1. On the Credentials page, click on the API key you just created.
2. Under "Application restrictions," select "HTTP referrers (web sites)."
3. Add your domain(s) in the format *.yourdomain.com/* to allow requests only from your specified websites.
4. Under "API restrictions," select "Restrict key" and choose the specific Google Maps Platform APIs your application needs access to.
5. Click "Save."

Your first request

This example demonstrates how to display a simple map on a webpage using the Maps JavaScript API. Ensure you have enabled the Maps JavaScript API and have an API key with appropriate restrictions. This example requires a basic HTML file and a small JavaScript snippet.

HTML Structure (index.html)

Create an HTML file with a div element to hold the map and a script tag to load the Google Maps JavaScript API.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Google Map</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>My First Google Map</h1>
    <div id="map"></div>
    <script> /* Your JavaScript will go here */ </script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async
      defer
    ></script>
  </body>
</html>

Replace YOUR_API_KEY with the API key you generated. The callback=initMap parameter specifies the function to execute once the API script has loaded. The async and defer attributes ensure the script loads without blocking HTML parsing, as described in the Mozilla Developer Network script element documentation.

JavaScript (inside the <script> tag)

Add the following JavaScript code within the <script> tags in your index.html file to initialize and display the map.

function initMap() {
  const mapOptions = {
    center: { lat: -34.397, lng: 150.644 }, // Sydney, Australia example
    zoom: 8,
  };
  const map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

Running the Example

Save the HTML file and open it in a web browser. You should see a map centered on Sydney, Australia, with a zoom level of 8. If the map does not load, check the browser's developer console for errors, which often indicate issues with the API key or enabled APIs.

Common next steps

After successfully displaying a basic map, developers typically explore more advanced features and integrations:

• Add Markers and Info Windows: Display specific locations on the map using markers and provide additional information through info windows. The Google Maps JavaScript API markers guide provides examples.
• Implement Geocoding: Convert addresses into geographic coordinates (latitude and longitude) and vice versa using the Geocoding API.
• Integrate Places API: Enable users to search for places, retrieve place details, and auto-complete addresses. Refer to the Places API documentation for more information.
• Calculate Directions and Distance: Utilize the Directions API to get routes between locations and the Distance Matrix API to calculate travel times and distances for multiple origins and destinations.
• Explore Mobile SDKs: For native mobile applications, consider using the Maps SDK for Android or the Maps SDK for iOS.
• Monitor Usage and Billing: Regularly check your project's usage and billing reports in the Google Cloud Console to manage costs and optimize API calls.

Troubleshooting the first call

Common issues encountered during the initial setup of Google Maps Platform and their resolutions:

• "Google Maps JavaScript API error: ApiNotActivatedMapError": This error indicates that the Maps JavaScript API has not been enabled for your Google Cloud Project. Go to the API Library and enable the "Maps JavaScript API."
• "Google Maps JavaScript API error: RefererNotAllowedMapError": This means your API key has HTTP referrer restrictions that do not include the domain from which your map is being loaded. Edit your API key restrictions on the Credentials page to include your domain (e.g., *.yourdomain.com/* or http://localhost/* for local development).
• "Google Maps JavaScript API error: InvalidKeyMapError": The API key provided is either incorrect, expired, or not valid for the project. Double-check the API key in your HTML file against the one generated in the Google Cloud Console.
• Map not loading, no errors in console: Ensure that the div element for the map has a defined height and width in your CSS. Without dimensions, the map will not be visible. Also, verify that the callback function name in your script tag (e.g., initMap) matches the function name in your JavaScript.
• "You must enable Billing on the Google Cloud Project": Even with the free tier, a billing account must be linked to your project. Go to Cloud Billing and set up a billing account.
• API key exposed in client-side code: While the Maps JavaScript API requires the key to be exposed, ensure other sensitive APIs (e.g., server-side APIs) are called from a backend to protect your API key. For client-side keys, strictly apply HTTP referrer or application restrictions.