Setting the Map Height

One of the most common mistakes when rendering a map is when you accidentally create a map that is zero pixels tall. This will, of course, hide the map entirely. To see the map as intended, make sure to specify a height for the map container.

Enable devMode

Make sure to enable the devMode config setting (opens new window) when developing your maps. You will see a much more detailed log of the map creation process, which will warn you if there are any issues with the map height.

Via CSS

Using CSS to manage the map height is arguably the easiest approach.

.mb-map {
    height: 320px;
}

As you can see, there is a universal mb-map class which exists on all map containers. Additionally, if you specified an id when creating the map, you could also refer to the container that way...

#my-map-id {
    height: 320px;
}

Via JS, Twig, or PHP

The other recommended way to control the map height is to set it when the map is initially created. Regardless of which language you are working with, you can specify the height option of the map.

• JavaScript
• Twig
• PHP

const map = mapbox.map(locations, {
    'height': 320
});

Take a look at the available options for creating a dynamic map.