Static Images Guide

API description

If you want to build your own application, there are two basic options of how to define the area of your interest. The first one is called a Center-based URL, where the area displayed on an image is defined by the longitude/latitude of the image’s center point and zoom level (can be fractional). The other option, Bounds-based URL, is defined by a couple of coordinates defining the bottom left and top right corner.

Autofitting the area

It is also possible to use auto instead of the region specification (center or bounds) in the URL. In such a case, the area will be automatically calculated based on a path from the query (at least one polygon or marker has to be specified). See the documentation of the format and possible values below.

Adding polygons and lines

The polygon or polyline can be passed in a path query parameter (it can be used more than once). Coordinates of the individual path vertices are comma-separated lat,lng pairs. The vertices are separated with a pipe symbol. Additionally, these following special "commands" can be used (in a form of key:value appended before the path coordinates):

• fill - color to use as the fill (e.g. red, rgba(255,255,255,0.5), #0000ff, none, false)
• stroke - the color of the path stroke
• width - width of the stroke (in pixels)
• enc - Path encoded according to Google Encoded Polyline Format
• e.g. _p~iF~ps|U_ulLnnqC_mqNvxq`@
• If used, do not specify the coordinate pairs -- the rest of this path parameter is considered to be part of the encoded polyline string.

You can also use fill, stroke and width as a separate query parameters to specify default styling for all the paths.

Examples:

• path=5.9,45.8|5.9,47.8|10.5,47.8|10.5,45.8|5.9,45.8
• a polygon with default colors
• path=stroke:green|width:3|fill:none|5.9,45.8|5.9,47.8|10.5,47.8|10.5,45.8|5.9,45.8
• the same polygon, but with 3px green stroke a no fill
• path=stroke:red|fill:none|enc:_p~iF~ps|U_ulLnnqC_mqNvxq`@
• draws a red line based on the encoded polyline

Adding markers

The markers can be passed in a markers query parameter (it can be used more than once). Each marker is a comma-separated lat,lng pair. Individual markers are separated with a pipe symbol. Each marker can also have a different color - specified as the 3rd parameter (e.g. 14.4,50.1,red|8.6,47.4,blue). Additionally, these following special "commands" can be used (in a form of key:value appended before the marker coordinates):

• icon - URL to a remote image (URL-encoded)
• You can use a URL shortener service to create more compact queries.
• Icon has to be at most 64 kB and 4096 pixels (e.g. 64x64 image).
• If used, the specified colors of the markers are ignored.
• anchor - the anchor point of the custom icon, possible values:
• top, left, bottom, right, center, topleft, bottomleft, topright, bottomright
• the default value is bottom
• scale - the scale of the image (useful if you want to provide a HiDPI image that scales down correctly), the default value is 1

Examples:

• markers=14.4,50.1|8.6,47.4|2.4,48.9 - 3 separate markers will be displayed
• markers=14.4,50.1,red|8.6,47.4,blue - 1 red and 1 blue marker
• markers=icon:https://tinyurl.com/yakrjl3t|anchor:center|14.4,50.1|8.6,47.4
• 2 markers with the specified custom icon centered at their positions

Other

• attribution
• change the location of the attribution text: topleft, bottomleft, topright, bottomright
• attribution=false or attribution=0 to disable attribution (make sure to display the correct attribution yourself in case you use this)
• lnglat ( lnglat=true or lnglat=1) - indicates the polygon and marker coordinates are in lat,lng order rather than the usual lng,lat
• padding - “percentage” padding for fitted endpoints (bounds-based and auto)
• e.g. value of 0.1 means “add 10% size to each side to make sure the area of interest is nicely visible”