tutorials / google-cloud / maps

Google Maps

tutorial javascript google cloud maps

Google Maps allows users to get directions, see what’s nearby, and explore the world. Google Maps is also available to use as a JavaScript library, which means that developers can write code to create maps and geospatial visualizations of their own data.

API Keys

The Maps library requires an API key so it knows who is making the request. So before we can start writing code, we need to obtain one.

Follow these steps to get an API key. It will look like a long string of random characters.

Note: In a production environment, we’d probably create two API keys: one just for testing that we open up to localhost, and another for our live site that we restrict to only working with our live URL. You’re welcome to explore that if you’re interested in how that works, but for now you can skip the step about restricting your keys.

Hello World

Here’s an example that adds a Google Map to a webpage:

<!DOCTYPE html>
<html>
<head>
  <title>Hello Google Maps</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script>
    function createMap(){
      const map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.422, lng: -122.084},
        zoom: 16
      });
    }
  </script>
  <style>
    #map {
      width: 500px;
      height: 500px;
      border: thin solid black;
    }
  </style>
</head>
<body onload="createMap();">
  <h1>Hello Google Maps</h1>
  <div id="map"></div>
  <p>This page shows a Google Map!</p>
</body>
</html>

Google Map in webpage

Loading the Library

This line loads the Google Maps library:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Make sure you put this line before any of your code that uses the library. This is called synchronous loading.

You can also load the library asynchronously instead.

Creating a Map

To create a Google Map, you can call the google.maps.Map() constructor and pass it a parent element and an options argument:

function createMap(){
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.422, lng: -122.084},
    zoom: 16
  });
}

The parent element is an element that’s in your HTML, and the map will be displayed inside that element. You can use CSS to set the width and height of the map element.

The options argument is a set of properties used to configure the map. You must at least provide a center and a zoom, but there are many other optional properties you can also change. See this page for a full list. Try styling your map or experimenting with different map types.

Exploring the API

This tutorial isn’t meant to introduce every single thing you can do with the Google Maps API. Instead, I’d encourage reading through the documentation for the library to get an idea of the kinds of things you can do.

But here are a few common features that might come in handy.

Markers

Markers are the red pins shown on Google maps to highlight specific locations. We can use Marker objects to show pins on our map.

Add this to your createMap() function:

const trexMarker = new google.maps.Marker({
  position: {lat: 37.421903, lng: -122.084674},
  map: map,
  title: 'Stan the T-Rex'
});

(Full code here.)

This code creates a new Marker that gets added to our map.

Google Map with marker

The map now shows a red marker at the location we specified. Try looking through the documentation and changing the settings of the marker: change its position, or its color.

Info Windows

Now we have a marker on our map, but it doesn’t tell us very much. To give our user more information, we can read through the documentation until we find this page, which introduces info windows.

Info windows are small popup boxes that display on top of a Google Map. We can use an info window on our map to add a description to our marker. Add this to your createMap() function:

var trexInfoWindow = new google.maps.InfoWindow({
  content: 'This is Stan, the T-Rex statue.'
});
trexInfoWindow.open(map, trexMarker);

(Full code here.)

This code creates a new InfoWindow and opens it on our marker.

Google Map with info window

Events

Now we have an info window, but it displays as soon as the page loads, and the user has no way to reopen it after they close it. Let’s say we wanted to show the info window when the user clicked the marker. We can look through the documentation to find this sample or this reference page to learn more about events. From there we could google individual functions to get even more information.

In this case, we want to add a click listener to the marker:

trexMarker.addListener('click', function() {
  trexInfoWindow.open(map, trexMarker);
});

We can use all of the above to create multiple markers that each show an info window when they’re clicked. View the full code here.

Google Map with multiple markers

Other Features

Don’t be afraid to look through the documentation for the Google Maps API to learn more about other features you can take advantage of. You can also use google search to find other features: for example, googling “Google Maps JavaScript API street view” will return a ton of results.

Learn More