Google Maps Static API for Beginners!

Introduction

The Google Maps Static API retrieves an image (in GIF, PNG, or JPEG format) via a URL with three required pieces of information:

The center location
The zoom Level
The size of the map

Quick Peek

The following URL will return an image that can be directly embedded to your website that accepts an <img> tag. No javascript required.

https://maps.googleapis.com/maps/api/staticmap?center=San%20Francisco,CA&zoom=12&size=600x600&key=YOUR_API_KEY

NOTE: Replace YOU_API_KEY in the URL with your private API Key in order to access the Google Map Static API. (Keep this API key private.)

Before you begin:

This guide is intended for beginners. Only key parameters that are absolutely necessary to retrieve an image will be covered. For a more advanced tutorial on the static API, see Google Maps Static API.

In this lesson, we’ll cover:

Introduction
API Key and Enable Billing
What is a URL
1. Query Strings
2. Required parameters
Putting it all together
What’s next

API Key and Enable Billing

Before requesting an image, create a personal API key and enable billing
(💡 NOTE: the service is free for the first 90 days) in order to use Google’s Map API service.

Review the authentication requirements and register for a free API key.
Review the API usage and billing information.(you need to enable billing onto your project).

What is a URL

Base URL:

A URL is a Uniform Resource Locator, the name given to the way webpages are referenced and found when using web browsers. Below is a typical structure of a URL and a description of its components:

components	Description
Protocol	`https://` (Hypertext Transfer Protocol) tells the web server which protocol to use when accessing a web page. Another example of a common protocol you may have seen is `mailto://`.
Subdomain	`www` (World Wide Web) is the most commonly used subdomain which contains the website’s web pages.
Domain	`google`, the websites name, is the highest-level part of the URL and can be thought of as the location where your webpage is stored.
Top-level domain	`.com` is the top-level domain and plays an important role in the DNS lookup. Other examples of common top-level domains are `.org`, `.net` `.info`.

To learn more about URLs, see URL Construction.

Query Strings

Query strings are used to pass in additional information via the URL to the server. Query strings appear after the ? and are part of the URL which contain key-value pairs where data is passed.

components	Description
?	`?` is the identifier that separates the base URL from the query strings. All query strings begin with `?`.

(Key = Value pair)

Parameter	`paramater1` is the name of the paramter defined by the server.
=	`=` is the separator that connects key and value pairs.
value	`value1` is the value assigned to the parameter.

&	The `&` joins multiple query strings, if present.

Required parameters

3 parameters are required (along with our private API KEY) to retrieve an image using Google Maps Static API.

Required parameters:
1. Center location
2. Zoom level
3. Size of the map

1. Center location

The center parameter accepts two forms:

• Longitude and Latitude Coordinates
or
• String address

• Longitude and Latitude

Longitude and latitude coordinates specify locations using numbers separated by commas.

Example: (23.1234, 12.1234)
Note: Anything more than 6 digits per coordinate will be ignored. To retrieve the longitude and latitude coordinates of a specific location, see Get Coordinates

• String address

The string address is the more common way of thinking of locations. Google maps converts string addresses into a geographic point, a process known as geocoding.

When using String addresses, strings must be URL-enocded like so:
Example: San Francisco should be written as San+Francisco.
(the + will take the place of the space using URL-encoding).

For more information, see URL encoding.

2. Zoom level

The Zoom parameter defines the magnification level of the map. Zoom levels start from 0 (widest level) to 21+ (most detailed).

Here’s the general guideline of approximate zoom levels:

Level 1: World (widest view)
Level 5: Continent
Level 10: City
Level 15: Streets
Level 20: Buildings (detailed view)

About Zoom Levels:
- Each succeeding zoom level doubles the precision in both horizontal and vertical dimensions.
- Zoom levels vary depending on the location.
- If you send a request with a zoom level that is not available, the api will return the maximum zoom level available at that location.

3. Size

The size paramenter determines the dimensions in pixels of the returned image. This parameter takes 2 sets of numerals in the form of (horizontal_value) x (vertical_value).

Example: 500x400 results in a map of 500 pixles wide by 400 pixels high.

Note: Maps smaller than 180 pixels in width will display a reduced-size google logo.

Putting it all together

Our goal is to retrieve an image at street level of the Golden Gate Bridge that’s about medium width and height in size.

Our parameters may look something like this:

Key parameters	Values
center	Golden Gate Bridge
Zoom	17
Size	500x500
Your_API_KEY	(insert private API key)

When componsed together, our final URL will look like this:

https://maps.googleapis.com/maps/api/staticmap?center=Golden%Gate%Bridge&zoom=17&size=500x500&key=YOUR_API_KEY

What’s next

And that’s it! In this lesson, we’ve covered:

Creating your first API key.
Understanding how a URL is constructed.
Composed a custom query string
Retrieved your first image using the Maps Static API.

To see more features you can add to your map, see Maps Static API.