Map generator
lightning-map renders live, licensed map tiles that a static generator genuinely can’t reproduce — so this generator styles the honest, legitimate part instead: the surrounding card, marker list and footer that ship around the map on a real record page. Treat the map canvas itself as a placeholder for the live component.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-map
map-markers={mapMarkers}
list-view="visible"
zoom-level="14"
class="studio-map"
></lightning-map>
</template>Design tips for maps
- Keep marker list entries short — this panel usually sits in a sidebar next to other record page components.
- Use the footer for a result count ("Showing 2 of 2") so users know whether they’re seeing everything or should zoom out.
- Match the pin color to your primary action color so the map visually belongs to the same page as the rest of your UI.
Related components
Components developers commonly compare against or pair with Map.