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!
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:
- Google Cloud/GCP (serverless, AI/ML APIs)
- YouTube
- Google Workspace/GWS (Drive, Docs, Sheets)
- Generative AI with Gemini
- Google Maps
- Auth & Security (API keys, OAuth client IDs)
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
|
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
|
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 |
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, andmarkersparameters:https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=GoogleplexMap 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+94043Map 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.0841644Map 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¢er=GoogleplexMap of landmark -
Map of street address:
https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&zoom=16¢er=1600+Amphitheatre+94043Map of street address -
Map of/from geolocation:
https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&zoom=16¢er=37.4226277,-122.0841644Map 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
sizedimensions to reshape maphttps://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x128&markers=GoogleplexWider, thinner map strip around the Googleplex -
terrainmap type: Themaptypeparameter hasroadmapas 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=terrainTerrain map around the Googleplex -
satellitemap type:https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=Googleplex&maptype=satelliteSatellite map around the Googleplex -
hybridmap type: Thehybridmap type combinesroadmapandsatellite:https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&markers=Googleplex&maptype=hybridHybrid 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=GoogleplexZooming in on the Googleplex -
Zooming out:
https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=480x480&zoom=14&markers=GoogleplexZooming 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
markersparameter 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+ExperienceMultiple markers on a map -
Change marker colors: Want to change the default color? Provide
markerswith 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+ExperienceChanging 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
markersparameters 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+ExperienceDifferent 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=jpgColored 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:
- Designate a developer project -- either create a new project or reuse an existing one
- Enable billing -- Google Maps Platform usage isn't free, so you need an active billing account (more on this below)
- 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:
-
Create a new project from the Cloud/developer console or with the
gcloud projects create . . .command; alternatively, reuse an existing project. - 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.
-
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:
- Go to DevConsole
- Click on Library tab in the left-nav; search for "Maps Static"
- 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...
- Go directly to API listing page to read more about it and click Enable from there (same image below)
- 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 thegcloudcommand-line tool (CLI) and initialized its use.- If this is you, issue this command to enable the API:
gcloud services enable static-maps-backend.googleapis.com - Confirm all the APIs you've enabled with this command:
gcloud services list
- If this is you, issue this command to enable the API:
-
DevConsole manually -- Enable API manually from DevConsole with these steps:
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:
- Go to the DevConsole credentials page
- Click + Create Credentials up top
- Select API key and wait a few seconds for completion
- 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 likesettings.pyor.envcontaining 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.
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
|
Links relevant to the contents of this post:
Maps Static API
Google Maps APIs
Google Maps Platform
Other Google Maps content by the author
- Explore the world with Google Maps APIs post
- Getting started using Google APIs: API Keys (Part 2/2) post
- Accessing Google Maps from a spreadsheet?!? video
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)