Static map with markers

To add markers to your static map, use the markers parameter in the URL. Each marker is a lng,lat pair of coordinates, with multiple markers separated by pipe symbols |.

To get the coordinates of a place, use our Coordinates finder tool.

Basic markers

https://api.maptiler.com/maps/base-v4/static/auto/825x350.png?key=YOUR_MAPTILER_API_KEY_HERE\&markers=14.4,50.1|8.6,47.4|2.4,48.9

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to protect the key before you publish it!

Colored markers

To style your markers in various colors, add color as a third parameter. You can define color in several ways:

• Color names: red, blue
• RGBA: rgba(255,255,255,0.5)
• Hexadecimal: #0000ff (use %23 instead of # in URLs!)

https://api.maptiler.com/maps/base-v4/static/auto/825x350.png?key=YOUR_MAPTILER_API_KEY_HERE&markers=14.4,50.1,red|8.6,47.4,rgba(118,31,232,1)|2.4,48.9,%23ffaa00

Custom marker icons

To use a custom image as marker, add the necessary parameters in this format:

&markers=icon:{url}|anchor:{position]}|{scale}|{lng,lat}

• icon – Specify URL to a remote image.
  • Max size of the icon image is 4096 pixels (64 × 64)
  • SVG icons must have explicit width and height attributes
  • URLs generated by shortener services are allowed
  • Any specified colors are ignored
• anchor – Specify the position (anchor point) of the icon relative to its coordinates.
  • Accepted values: top, left, bottom, right, center, topleft, bottomleft, topright, bottomright
  • Default is bottom
• scale – Scale of the image icon. Default is 1, for HiDPI/Retina displays use 2.
• lng, lat – Add the coordinates of where to place the marker icon. You can specify multiple places separated by pipe symbols |.

Single custom marker

https://api.maptiler.com/maps/dataviz-v4/static/8.579446,47.127792,16/825x350.png?key=YOUR_MAPTILER_API_KEY_HERE&markers=icon:https://tinyurl.com/yakrjl3t|anchor:center|8.57916,47.127899

Multiple custom markers

Note that you can only use one custom icon for multiple markers.

https://api.maptiler.com/maps/base-v4/static/auto/825x350.png?key=YOUR_MAPTILER_API_KEY_HERE&markers=icon:https://tinyurl.com/yakrjl3t|anchor:center|14.4,50.1|8.6,47.4|2.4,48.9

Use case: Office locations

Display office or store locations with static map images that link to interactive maps:

Headquarters

Zugerstrasse 22

6314 Unterägeri

Switzerland

Dev center

Tišnovská 137

614 00 Brno

Czech Republic

This example uses our Static maps API and Maps API. Copy the code snippet here:

<a
  href="https://api.maptiler.com/maps/{{site.map-styles.dataviz}}/?key=YOUR_MAPTILER_API_KEY_HERE#17.87/49.21256/16.626597"
  target="_blank"
  rel="noopener"
>
  <img
    src="https://api.maptiler.com/maps/{{site.map-styles.dataviz}}/static/16.626597,49.21256,15/200x200.png?key=YOUR_MAPTILER_API_KEY_HERE&markers=icon:https://tinyurl.com/yakrjl3t|anchor:center|16.626597,49.21256"
  />
</a>