How to show the lightning-map location list on the bottom?

Question

Normally, the location list is shown on the right side like this:

That is until you have a lot of markers - around 100 in my case. The map looks awful with many markers but users noticed that it looks pretty decent if you don't have the full width which leads to the location list being displayed below the map.

Can I force this behavior to always show the list below the map?

Answer 1

For forcing the map to show markers below , we need to limit the width of the map component as below :

Markup:

<div class="map-container">
    <lightning-map
      map-markers={mapMarkers}
      markers-title="Lunch Gems"
      onmarkerselect={handleMarkerSelect}
      selected-marker-value={selectedMarkerValue}
  >
  </lightning-map>
  </div>

CSS:

.map-container {
  width: 37vw;
}

Note : I've used vw for specifying width. You can change it for handling different screen sizes using either device sizes or media query