Create your first static map
Discover Static Map basics
This guide shows how to construct a basic map image, add a marker, or drawings on top of your static map using a set of HTTP query parameters.
Display a Basic Map
Here’s the simplest way to display a static map in an HTML content:
<img
src="https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.11864317571526771&zoom=16&width=600&height=400&retina=yes&key=YOUR_API_KEY" alt="Map of the London Eye surroundings" />
Result: A 600 × 400 pixels map centered on the London Eye surroundings, zoom level 15.
Add a Marker
You can add a single marker by including the marker parameter as a JSON object representing a coordinates for the location:
<img
src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.11864317571526771&zoom=16&width=600&height=400&retina=yes&key=YOUR_API_KEY&markers={"lat":51.50350,"lng":-0.11864317}' alt='Map with marker' />
Result: A 600 × 400 pixels map with a Marker in the middlle.
Add a Polygon
You can add a single polygon geometry by including the polygon parameters as a JSON object representing the coordinates of the geometry:
<img
src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.11864317571526771&zoom=16&width=600&height=400&retina=yes&key=YOUR_API_KEY&polygons={"shape":"qgjyHtgVb@mHiBq@cB_AgA`H\\n@~Ap@rBZ","color":"rgba(255, 20, 147, 0.5)", "fill_color": "rgba(199, 21, 133, 0.7)"}' alt='Map with a polygon' />
Result: This displays a map centered on The London Eye and the Jubilee Gardens (UK), with a polygon representing limits of a theoretical “Summer event” area in pink.
To limit size of URL and avoid error with URL interpretation, shape value should be an encoded string of an encoded polygon.
Add a Polyline
You can add a single polyline geometry by including the polyline parameters as a JSON object representing the coordinates of the geometry:
<img
src='https://api.woosmap.com/maps/static?lat=51.50350&lng=-0.11864317571526771&zoom=16&width=600&height=400&retina=yes&key=YOUR_API_KEY&polylines={"enc":"wfjyH`iVJuBG_@T{DAKBi@mAi@TiB[O","color":"blue","weight":4}' alt='Map with a polyline' />
Result: This displays a map centered on The London Eye and the Jubilee Gardens (UK) with a polyline representing a path between the London Eye and the close by Pret à Manger.
To limit size of URL and avoid error with URL interpretation, enc value should be an encoded string of an encoded polyline.
You’re all set!