Guide: Implementing Google Maps API

Add Google Maps to Your Website

Follow this guide to get set up with the Google Maps JavaScript API and display your first interactive map.

Project Setup & API Key

Before writing code, you must set up a project in the Google Cloud Platform to get an API key. This key authorizes your website to use Google Maps services.

Your Setup Checklist

Go to Google Cloud Console: Navigate to the Google Cloud Console and sign in.
Create a Project: Create a new project and give it a memorable name (e.g., "My Website Maps").
Enable Maps JavaScript API: In the dashboard, go to "APIs & Services" > "Library". Search for "Maps JavaScript API" and click "Enable".
Set Up Billing: You must enable billing for your project. Google Maps Platform provides a generous free tier, but a billing account is required for the API to work.
Get Your API Key: Go to "APIs & Services" > "Credentials". Click "+ CREATE CREDENTIALS" and select "API key". Copy the generated key.
Restrict Your API Key: This is a crucial security step. Edit the key, and under "Application restrictions," select "HTTP referrers (web sites)" and add your website's domain (e.g., `yourwebsite.com/*`). This prevents unauthorized use.

Code Implementation

With your API key ready, it's time to add the map to your website. This involves adding a container element to your HTML and initializing the map with JavaScript.

Step 1

The HTML Structure

Set up your HTML file with a `<div>` to hold the map and a `<script>` tag to load the Google Maps API. Remember to replace `YOUR_API_KEY` with your actual key.

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

Step 2

The JavaScript Logic

Create the `initMap` function. This code is called automatically once the API script loads. It finds your `<div>` and renders the map inside it.

function initMap() {
  const location = { lat: 40.7128, lng: -74.0060 }; // New York City
  
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: location,
  });
}

Customization & Live Demo

A map is most useful when it highlights specific points of interest. Here's how to add a marker with a pop-up info window, plus a live demo to see it in action.

Step 1

Add a Marker and Info Window

Update your `initMap` function to create a `Marker` and an `InfoWindow`. Then, add a click listener to the marker to open the window.

function initMap() {
  const location = { lat: 40.7128, lng: -74.0060 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: location,
  });

  const marker = new google.maps.Marker({
    map: map,
    position: location,
    title: 'Click to see info!',
  });

  const infowindow = new google.maps.InfoWindow({
    content: '<h3>New York City</h3><p>The city that never sleeps.</p>',
  });

  marker.addListener('click', () => {
    infowindow.open(map, marker);
  });
}

Step 2

Live Demo

This map is a live, interactive demonstration. Note that a valid API key is required for it to load correctly.

A real, valid API key is required to load the live map.

More Live Demos:

Locations: Location pins with detailed information about the locations.
Campsites: Campsites across the West Coast.
Active Wildfires: Active Wildfires, updated often using live data.
Night Sky: Find Dark Sky and maybe even the Northern Lights

Google Maps API