DEV Community

Wesley Chun (@wescpy)
Wesley Chun (@wescpy)

Posted on • Edited on

What is the world's "easiest" Google API?!?

TL;DR:

While I generally cover Google API usage from a functionality perspective, at some point, I wondered which one of them was the easiest to use. Could it be easy enough where developers can use it without a computer, client library, OAuth2, SDK, or even code? It's Fall 2024, and I find myself on the road again, for work and for the holidays. This means some of us are thinking about Google Maps, so it's no coincidence the one I found meeting the aforementioned requirements and gets the title of the world's easiest Google API goes to the Maps Static API. To use it, you only need HTTP and an API key... wow(!), stick around to learn more!

Google Maps Platform

Introduction

Welcome to the blog covering use of Google APIs, generally from Python and sometimes Node.js (but not today because you can use this API without code)! Here, I show developers how to use a variety of Google APIs and share tips-n-tricks not documented by Google, covering a broad variety of topics like:

Regardless of which Google APIs you look at, one of them has got to be the "easiest" to use, right?

Google Maps Static API

A few years back, I wrote an interesting app using four different Google APIs. Earlier this year, I upgraded it by adding use of two more Google APIs, one of them being the Maps Static API. I soon realized it was unlike any other Google API I've ever used: no client library import, no instantiating an API client object, no OAuth2, and no API function calls in my code. "API calls" are URL-based HTTP GET requests.

The only "security" required is an API key (true for all Maps APIs). Check the documentation on how to get & use API keys if needed. But, before using the API, let's discus what it is first!

Background

At its heart, the Maps Static API returns a map image (default: PNG) in response to an HTTP request via a URL. The service creates a map based on URL parameters sent via the HTTP request and returns the map image as the response. For each request, specify the location to show, the image size, and optionally, the zoom level, type of map, and placement of optional markers at locations on the map.

Because all of the "action" happens via URL, you can use the API to embed a Google Maps image on a web page, without requiring JavaScript or dynamic page loading. You can also temporarily store the image binary and render it later.

However, you cannot distribute the map image, sell it, transfer it to any 3rd-party service, cache or store it for more than 30 days or in an insecure way, manipulate it, or modify its attribution in any way. These and other restrictions can be found in the Maps API Terms of Service. Now that you know what it is, let's look at a few examples of how to use the Maps Static API.

Parameters

The following pair of parameters are required for all Maps Static API requests:

Parameter Description
key Your API key (string); ex: UfwmmjcXOgfV9TviafMPUjYXVP-iQAWbqRmZ7WE (not a real one)
size Image dimensions (string); ex: 480x480
Maps Static API required parameters

 

The location parameters in the table below are pseudo-required. If you wish to put a specific location (or locations) on a map with a marker, then the markers parameter is required. Otherwise, both center and zoom parameters are required.

Parameter Description
markers Location by which to center the map image highlighted with a marker (string); exs:Googleplex, 1600 Amphitheatre 94043, "37.4226277,-122.0841644", etc.
center Location by which to center the map image with (string); exs: (same as markers above)
zoom Magnification of generated map (integer from 1-20, inclusive); ex: 16
Maps Static API pseudo-required parameters

 

For center or markers, you need to provide a minimal string for the Maps service to find the location. Examples include a landmark name, street address, city & state, postal code, or latitude-longitude pair, to name a few.

The zoom level is an integer representing the magnification of the generated map. It must be an integer between 1 and 20. A zoom level is optional if markers is provided, defaulting to a zoom level of 16. The table below illustrates zoom levels and representative magnification views:

Zoom level Representative view
1 World
5 Landmass/continent
10 City
15 Streets
16 (default)
20 Buildings
Maps Static API zoom levels

 

Examples

Below are numerous examples of using the API, demonstrating its capabilities as well as how to use the parameters above.

Example set 1: Basic location with markers

Let's say you wanted a map of Google's headquarters, known as the "Googleplex" (or other landmarks or locations)

  • Map with marker on landmark: Issue the following request with the key, size, and markers parameters: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=Googleplex
    Map pinned to landmark
    Map pinned to landmark
     
  • Map with marker on street address: If you prefer using street addresses instead: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=1600+Amphitheatre+94043
    Map pinned to street address
    Map pinned to street address
     
  • Map with marker on geolocation: If you prefer using geolocation (latitude-longitude pairs): https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=37.4226277,-122.0841644
    Map pinned to geolocation
    Map pinned to geolocation
     

Notice that the three markers don't land on exactly the same spot even though the destination is the same. In certain situations, you may prefer not to use markers, so let's explore that.

Example set 2: Basic location without markers

Because markers is used on all the above examples, the zoom level is optional, defaulting to 16. If you want the same maps as the above but without markers on maps, provide both center and zoom:

  • Map of landmark: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&zoom=16&center=Googleplex
    Map of landmark
    Map of landmark
     
  • Map of street address: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&zoom=16&center=1600+Amphitheatre+94043
    Map of street address
    Map of street address
     
  • Map of/from geolocation: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&zoom=16&center=37.4226277,-122.0841644
    Map of/from geolocation
    Map of geolocation
     

Example set 3: Types & Sizes

While size is required, there's no reason to always use 480x480 or for it to be a square. Want a wider, thinner map "strip" instead? Change size accordingly. What a different type of map? Use the maptype parameter. Here are some examples:

  • Change size dimensions to reshape map https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x128&markers=Googleplex
    Wider, thinner map strip around the Googleplex
    Wider, thinner map strip around the Googleplex
     
  • terrain map type: The maptype parameter has roadmap as its default value, so use it to specify a different map type, like this example of the Googleplex in a terrain map: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=Googleplex&maptype=terrain
    Terrain map around the Googleplex
    Terrain map around the Googleplex
     
  • satellite map type: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=Googleplex&maptype=satellite
    Satellite map around the Googleplex
    Satellite map around the Googleplex
     
  • hybrid map type: The hybrid map type combines roadmap and satellite: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=Googleplex&maptype=hybrid
    Hybrid map around the Googleplex
    Hybrid map around the Googleplex
     

Example set 4: Zoom level

Desire a different zoom level? Change it with the zoom parameter... increasing it increases the magnification and vice versa:

  • Zooming in: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&zoom=18&markers=Googleplex
    Zooming in on the Googleplex
    Zooming in on the Googleplex
     
  • Zooming out: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&zoom=14&markers=Googleplex
    Zooming out from the Googleplex
    Zooming out from the Googleplex
     

Example set 5: Combos & Colors

Markers have some flexibility. You can place more than one marker and/or change their colors.

  • Additional markers: In the zoom-out map above, you see another landmark nearby, "Google Visitor Experience." Want to put a marker on that landmark as well? Provide an additional markers parameter or better yet, have a single parameter with locations separated by a pipe (|) symbol: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=Googleplex|Google+Visitor+Experience
    Multiple markers on a map
    Multiple markers on a map
     
  • Change marker colors: Want to change the default color? Provide markers with a secondary parameter, color:COLOR, also separated with a pipe, before the locations. Here's an example featuring blue markers: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=color:blue|Googleplex|Google+Visitor+Experience
    Changing map marker color
    Changing map marker color
     
  • Different marker colors: Changing the default marker color sets all markers to that color. To have different markers with different colors, multiple markers parameters are required. Here's an example where the Googleplex gets a default red marker while the Google Visitor Experience gets a green one: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=Googleplex&markers=color:green|Google+Visitor+Experience
    Different marker colors
    Different marker colors
     
  • Image formats: Don't like PNG, the default image format? Request other formats like GIF or JPG. Here's an example that outputs a JPG map with red & brown markers: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=Googleplex&markers=color:brown|Google+Visitor+Experience&format=jpg
    Colored marker JPG map image
    Colored marker JPG map image
     

The color parameter is either a 24-bit value, e.g., color=0xFFFFCC, or one of the predefined colors: black, brown, green, purple, yellow, blue, gray, orange, red, white.

The above are just some of the ways you can use the Maps Static API. There are plenty of other customizations available. For more information on stylizing maps, see the styling guide. The complete developers' guide outlines what else the Maps Static API can do.

While it's simple to call the Maps Static API as a URL, more than likely, you'll have an application generate the required parameters to render the desired map in your web application, and we'll address that in the next post. Want to try the examples above? Let's get you an API key!

Google developer project setup

These are the steps necessary before creating an API key:

  1. Designate a developer project -- either create a new project or reuse an existing one
  2. Enable billing -- Google Maps Platform usage isn't free, so you need an active billing account (more on this below)
  3. Enable Maps Static API -- all Google APIs must be enabled before they can be used. If you already enabled billing by the time you get here, the API will be enabled quickly. Otherwise, you will be prompted to enable billing when you enable the Maps Static API.
Billing account required
While many Google APIs are free to use, Maps APIs are not. However, all users are granted a free monthly quota of $200USD of usage before incurring billing. Review the Maps Platform billing page to understand all the terms and conditions, then create a billing account backed by a credit card or other financial instrument as described. Once you have a billing account, assign it to your project.

Let's walk through the steps above one-at-a-time:

  1. Create a new project from the Cloud/developer console or with the gcloud projects create . . . command; alternatively, reuse an existing project.
  2. Enable billing from the Cloud/developer console. Refer to the Cloud billing documentation to learn more. After creating the billing account, link it to your project.
  3. Enable Maps Static API. With a project and linked billing account, it's time to enable the Maps Static API. Choose your preferred method from these three common ways to enable Google APIs:
    • DevConsole manually -- Enable API manually from DevConsole with these steps:
      1. Go to DevConsole
      2. Click on Library tab in the left-nav; search for "Maps Static"
      3. Click on Maps Static API then click the blue Enable button (see image below)
    • DevConsole link -- You may be new to Google APIs or don't have experience enabling APIs manually in the DevConsole. If this is you...
      1. Go directly to API listing page to read more about it and click Enable from there (same image below)
      2. Alternatively, skip the API info and click this link for an enable-only button.
    • Command-line (gcloud) -- Those who prefer working in a terminal can enable APIs with a single command in the Cloud Shell or locally on your computer if you installed the Cloud SDK which includes the gcloud command-line tool (CLI) and initialized its use.
      1. If this is you, issue this command to enable the API: gcloud services enable static-maps-backend.googleapis.com
      2. Confirm all the APIs you've enabled with this command: gcloud services list

Maps Static API listing page

Maps Static API listing page

 

Create API key

With the prerequisites complete, it's time to create the API key to use with your Maps Static API requests. Follow these steps:

  1. Go to the DevConsole credentials page
  2. Click + Create Credentials up top
  3. Select API key and wait a few seconds for completion
  4. Copy and save API key somewhere safe you can refer to

⚠️ WARNING: Keep API keys secure
Storing API keys in files (or hard-coding them for use in actual code or even assigning to environment variables) is for prototyping and learning purposes only. When going to production, put them in environment variables or in a secrets manager. Files like settings.py or .env containing API keys are susceptible. Under no circumstances should you upload files like those to any public or private repo, have sensitive data like that in TerraForm config files, add such files to Docker layers, etc., as once your API key leaks, everyone in the world can use it.

If you're new to Google developer tools, API keys are one of the credentials types supported by Google APIs, and they're the only type supported by Maps APIs. Other credentials types include OAuth client IDs, mostly used by GWS APIs, and service accounts, mostly used by Google Cloud (GCP) APIs. The Maps team put together a great guide on API key best practices, so check it out!

Summary and next steps

Now armed with an API key, give it a shot, and take a look at a map of the Googleplex by substituting in your API key into the YOUR_API_KEY placeholder: https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=Googleplex as well as the other sample API calls from earlier. In the next post, we'll look at Python and Node.js code using the API so look for that!

Google provides a variety of APIs for developers across most of its product lines. But of all its 480+ APIs, I think the Maps Static API is the easiest to use: no client library, no API client objects, no API function/method calls, and no code required either! A URL with parameters and an API key is all that's needed. What do you think? If you can think of an easier Google API to use, let me know in a comment below!

If you find errors or have suggestions on content you'd like to see in future posts, also leave a comment below, and if your organization needs help integrating Google technologies via its APIs, reach out to me by submitting a request at https://cyberwebconsulting.com. Thanks for reading, and I hope to meet you if I come through your community... you'll find my travel calendar at the bottom of that page as well. Lastly, below is reference information plus relevant links for further exploration, and if you want to continue exploring Maps APIs, see the previous post in this series:

NEXT POST: Explore the world with Google Maps APIs

References

Here is a summary table of the Maps Static API parameters:

Maps Static API parameters

Parameter Description
key (required) Your API key (string); ex: UfwmmjcXOgfV9TviafMPUjYXVP-iQAWbqRmZ7WE (not a real one)
size (required) Image dimensions (string); ex: 480x480
markers (required without center and zoom) Location by which to center the map image highlighted with a marker (string); exs:Googleplex, 1600 Amphitheatre 94043, "37.4226277,-122.0841644", etc.
center (required without markers) Location by which to center the map image with (string); exs: (same as markers above)
zoom (required without markers) Magnification of generated map (integer from 1-20, inclusive); ex: 16
maptype Type of map to return; ex: terrain
Google Maps Static API parameters

 

Links relevant to the contents of this post:

Maps Static API

Google Maps APIs

Google Maps Platform

Other Google Maps content by the author



WESLEY CHUN, MSCS, is a Google Developer Expert (GDE) in Google Cloud (GCP) & Google Workspace (GWS), author of Prentice Hall's bestselling "Core Python" series, co-author of "Python Web Development with Django", and has written for Linux Journal & CNET. He runs CyberWeb specializing in GCP & GWS APIs and serverless platforms, Python & App Engine migrations, and Python training & engineering. Wesley was one of the original Yahoo!Mail engineers and spent 13+ years on various Google product teams, speaking on behalf of their APIs, producing sample apps, codelabs, and videos for serverless migration and GWS developers. He holds degrees in Computer Science, Mathematics, and Music from the University of California, is a Fellow of the Python Software Foundation, and loves to travel to meet developers worldwide at conferences, user group events, and universities. Follow he/him @wescpy & his technical blog. Find this content useful? Contact CyberWeb for professional services or buy him a coffee (or tea)!

Top comments (0)