Create a image of a map Google Maps Static API

Customized Google Maps API Static Map

The Google Maps Static API allows you to create a image of a map to use on your webpage rather than use the interactive, JavaScript-based Google Map option. The static image map option is good for when you do not need any interactivity on your map. The static map option is also easier to implement than the Javascript-based map option.

Step 1: Generate a Google Maps API Key

A Google Maps API key is required for every Google Maps implementation. There are a set of steps to make the process of generating this API key easy. Learn how to generate a Google Maps API key.

Step 2: Start with a basic static Google Map example,New+York,NY&size=600x300&key=YOUR_API_KEY

Copy and paste the url above into a new tab in your browser to ensure everything is working properly. Make sure to replace YOUR_API_KEY in the library path with your API key.

If you are getting an error, visit the Google Maps API troubleshooting guide to receive further assistance.

Step 3: Start customizing your static Google Map

To customize your static Google Map, you can adjust and add parameters in the url of your example map. There are required parameters on top of the key parameter in step 2, center, size, and zoom and optional parameters to add additional features such as different colors and pins.

See the Pen Static Google Map starter for your website by Michael Williamson (@mapsdeveloper) on CodePen.

Required Parameters For Google Static Maps API

Center Parameter

Defines the center of the map. You can use latitude and longitude or the address of the location you would like as the center of your map.

Latitude and longitude example: center=40.714728,-73.998672

Address example (note: instead of spaces, use + symbols): center=1600+Pennsylvania+Ave+NW,+Washington,+DC+20500

Size Parameter

Defines the size, in pixels, of your map. First, specify the number of pixels in width, add an ‘x‘, then, the number of pixels in height.

Example: size=600x400 . This will create an image of your map with a width of 600px and height of 400px.

Zoom Parameter

Defines how close to zoom into the earth. Zoom levels range from 0, for the furthest away from the earth, to 22 for the closest to the earth.

World zoom level example: zoom=1

City zoom level example: zoom=10

Streets zoom level example: zoom=15

Optional Parameters For Google Static Maps API

Scale Parameter

Defines the multiplier of pixels based on the size attribute that is specified. The default value is 1, other accepted values are 2 and 4. Note: 4 is only available with the Google Maps Platform Premium Plan).

Default example: scale=1&size=600x400, so returns an image with a width of 600px and height of 400px.

2x example: scale=2&size=600x400, so returns an image with a width of 1200px and height of 800px.

Format Parameter

Defines the image format returned. The default value is png. Other accepted values are png32, gif, jpg, jpg-baseline

Example: format=jpg

Maptype Parameter

Defines the type of texture of map. The default value is roadmap. Other accepted values are  satellitehybrid, and terrain.

Language Parameter

Defines the language of the labels on the map. When no language parameter is specified, Google Maps will attempt to load the most appropriate language based on the user’s location or browser settings. If you would like to override the user’s location or browser settings, see the accepted language values.

Example: language=pt-BR or language=ko

Region Parameter

Defines the way Google Maps will draw borders based on a given countries’ official geo-political position.

United States Example: region=US

India Example: region=IN

Markers Parameter

Specify one or more markers (or pins) to add to your Google Map. You can specify either single marker or multiple markers. You can specify additional marker customizations such as changing the color, size, or label of your markers.

Red “A” marker on New York City example: markers=color:red|label:A|New+York+City+NY

2 “tiny” markers, purple and brown, positioned using latitude and longitude example: markers=color:purple|size:tiny|label:C|41.40338,2.17403&markers=color:brown|size:tiny|label:C|41.4034,2.1742

Path Parameter

Specify one or more paths that will overlay on your Google Map. You can specify a single path by adding or a set of connected points by adding two or more locations or use an encoded polyline format. You can add more paths by adding additional path parameters.

Red path between two longitude and latitude points example: path=color:0xff0000|weight:5|40.737102,-73.990318|40.749825,-73.987963  

Blue path between Boston, MA, Rochester, NY, and Philadelphia, PA example: path=color:0x0000ff|weight:5|Boston+MA|Rochester+NY|Philadelphia+PA

Visible Parameter

Specify one or more locations or features to remain visible on your map. Google Maps will adjust the map boundaries to include the locations or features that were specified. Note: the zoom parameter will override this value, and it is best not to specify the zoom parameter in conjunction with the visible parameter.

Example that will keep New York City and Boston visible on the map: visible=New+York+City+NY|Boston+MA

Style Parameter

Defines custom styling to change specific features on the map such as roads, parks, labels, etc. You can add more styling directives by adding additional style parameters. Learn more about the style parameter on the Google Maps Static API.

Example that will turn all highways on the map red: style=feature:road.highway|element:geometry|visibility:simplified|color:0xff0000

Written By

Michael Williamson

I am a full stack web developer, digital strategist, and occasional content writer living in the city of Northeast Minneapolis, Minnesota.