Static Maps with Stadia Maps

In this tutorial, we will be using simple <img> tags to add simple, but powerful, static map (non-interactive) images to a website. Since these are just images, they can be used anywhere an image could be used—and that's a lot of places.

How do I create a static map?

If you need to just create a static map without any markers, you'll need to determine a few of the details required to render the map: the center of the map, the size in pixels of the map, and the zoom level of the map. These result in a set of parameters to add to the base URL for the static map.

Once you have your information, plug them in the designated areas of the URL, and our final HTML code will look something like this:

<img src="https://tiles.stadiamaps.com/static/alidade_smooth?center=40.438569,-86.901396&zoom=14&size=400x200@2x" />

And you'll see an image something like this:

How do I add markers to a static map?

If you need to add markers to your static map (and you usually do), there's one more parameter that allows you to add as many markers as you want to your static map.

Once you determine your marker placement, plug them in the designated areas of the URL, and our final HTML code will look something like this:

<img src="https://tiles.stadiamaps.com/static/alidade_smooth?center=40.438569,-86.901396&zoom=14&markers=40.439448,-86.901352|40.438427,-86.900706&size=400x200@2x" />

And you'll see an image something like this:

How do I …?

That's all folks! If you have any questions or need fuller documentation, you can read all about the cool features our static maps support in the documentation.