--- title: "Static map with markers | Guides | Maps apis | Static maps" description: "Add various types of markers to your static map images." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Static map with markers To add markers to your [static map](https://docs.maptiler.com/guides/maps-apis/static-maps/static-maps-for-your-web/), 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](https://www.maptiler.com/tools/coordinates) 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](https://api.maptiler.com/maps/base-v4/static/auto/825x350.png?key=mNLmXyaTH4gRlwJHSYWp&markers=14.4,50.1%7C8.6,47.4%7C2.4,48.9) Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it. ![Add multiple basic markers](../img/basic-markers.webp) ## 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](https://api.maptiler.com/maps/base-v4/static/auto/825x350.png?key=mNLmXyaTH4gRlwJHSYWp&markers=14.4,50.1,red|8.6,47.4,rgba\(118,31,232,1\)|2.4,48.9,%23ffaa00) ![Add multiple colored markers](../img/colored-markers.webp) ## 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. - The icon image dimensions are max 4096 pixels (e.g. 64 × 64 px) - The icon size is max 64 KiB - 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](https://www.maptiler.com/tools/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](https://api.maptiler.com/maps/dataviz-v4/static/8.581627,47.137726,16/825x350.png?key=mNLmXyaTH4gRlwJHSYWp&markers=icon:https://tinyurl.com/yakrjl3t|anchor:center|8.581627,47.137726,16) ![Add a custom marker](../img/custom-marker.png) ### 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](https://api.maptiler.com/maps/base-v4/static/auto/825x350.png?key=mNLmXyaTH4gRlwJHSYWp&markers=icon:https://tinyurl.com/yakrjl3t|anchor:center|14.4,50.1|8.6,47.4|2.4,48.9) ![Add multiple custom markers](../img/custom-markers.webp) ## 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 [![](https://api.maptiler.com/maps/dataviz-v4/static/8.581627,47.137726,16/200x200.png?key=mNLmXyaTH4gRlwJHSYWp&markers=icon:https://tinyurl.com/yakrjl3t|anchor:center|8.581627,47.137726)](https://api.maptiler.com/maps/dataviz-v4/?key=mNLmXyaTH4gRlwJHSYWp#17/47.137726/8.581627) ### Dev center Tišnovská 137 614 00 Brno Czech Republic [![](https://api.maptiler.com/maps/dataviz-v4/static/16.626597,49.21256,16/200x200.png?key=mNLmXyaTH4gRlwJHSYWp&markers=icon:https://tinyurl.com/yakrjl3t|anchor:center|16.626597,49.21256)](https://api.maptiler.com/maps/dataviz-v4/?key=mNLmXyaTH4gRlwJHSYWp#17/49.21256/16.626597) This example uses our **Static maps API** and **Maps API**. Copy the code snippet here: ```html ```