Skip to main content
Frontend Glossary

UI components · Data display

Map

Also called: Map view, Map embed, Interactive map, Location map

A draggable, zoomable map embedded in a page, with markers for stores, addresses, or delivery locations. Clicking a marker opens its details.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Build a store finder page. On the left, a 360px-wide store list with a search box and a "Nearby / All cities" toggle at the top; each item shows the store name, address, hours, and distance. On the right, a Google Map (or Leaflet) filling the remaining space, with brand-colored pins for every store, clustered into numbered circles when there are too many. Clicking a list item pans the map to that store and opens an info window (name, address, phone, "Directions" button). Clicking a marker scrolls the list to that store and highlights it. Put "+ / −" zoom and "Locate me" buttons in the bottom right. Show a gray placeholder first and load the map script when it enters the viewport. Don't let the scroll wheel zoom the map while scrolling the page; require holding Ctrl. On phones, stack the map (240px tall) above the list.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Map is what you need.

Use Map when

  • Contact pages or event pages that show one specific address so people can find their way there
  • Store, branch, rental, or hotel finders where users browse and compare by location
  • Food delivery, shipping, and ride-hailing that show live location and routes

Pick something else when

  • You only need to give users an address. Write the address as text and add an "Open in Maps" link.

  • Places that can't be interactive, like emails and print pages. Use a static map image.

    Use insteadImage

  • Comparing data by region (like sales by state). Use a map chart, not a draggable map.

    Use insteadChart

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    When the page scrolls to the map, the scroll wheel starts zooming the map and the page can't scroll past it

  2. 02

    Just one marker on the map with no address as text, so users can't even copy the address

  3. 03

    Loading several big maps as soon as the page opens, which makes the first screen lag and wastes data

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A draggable, zoomable map canvas, location markers (which can cluster), an info window that opens on a marker, and zoom and locate buttons, often paired with a list of places or a search box on one side.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A map component embeds Google Maps, Mapbox, or open-source Leaflet (in China, usually Amap, Baidu, or Tencent Maps) into a page. You can drag it, zoom with the scroll wheel or two fingers, use the "+ / −" buttons and "Locate me" in a corner, and see locations as pin-like markers. Clicking a marker opens a small info window with the name, address, hours, and a "Directions" button. Common uses: the "Contact us" page showing the office, a store finder with a list on the left and a map on the right, food delivery and ride-hailing showing a live route, and rentals or hotels showing where listings are.

How it differs from an Image: a static map screenshot can only be looked at, not dragged or clicked, which is fine where you just need to show roughly where something is (emails, print pages). A real map component is interactive, but it needs the map provider's script and an API key. Store finders often use a list + map Master-Detail Layout: click an item in the list and the map moves to its marker; drag the map and the list refreshes to the stores currently in view.

Maps are heavy, so load them only on pages that need them. Show a gray placeholder or static image first, and load the interactive map when it scrolls into view or the user clicks. Don't let the map hijack the scroll wheel while the page scrolls (require Ctrl to zoom, or a click before dragging), and make sure one finger still scrolls the page on phones. Cluster markers into numbered circles when there are too many. Always show the address as text too, not just on the map. Restrict your API key to your domains so it can't be stolen. For projects in China, watch out for coordinate systems (Amap and Tencent use GCJ-02, Baidu uses BD-09).

Developer info
Term ID
component-map
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .leaflet-container
  • .mapboxgl-map
  • .maplibregl-map
  • .gm-style
  • gmp-map
  • .amap-container
  • .ol-viewport
  • .cesium-viewer
  • .esri-view
  • iframe[src*="google.com/maps"]
  • iframe[src*="maps.google."]
  • iframe[src*="openstreetmap.org"]
  • iframe[src*="map.baidu.com"]
  • iframe[src*="amap.com"]
  • iframe[src*="map.qq.com"]
Class keywords

Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.

  • map
  • map-view
  • map-canvas
  • map-embed
  • location-map
  • store-map
  • google-map
  • gmap
Component names

React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.

  • Map
  • MapContainer
  • MapView
  • GoogleMap
  • BaiduMap
  • MapboxMap
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 30, 2026