Map

This component renders a map based on the current user's location and allows other interactions such as showing markers and popups.

Examples

Map

<div style={{ display: "flex", width: "100%" }}>
  <Map />
</div>

Marker

<div style={{ display: "flex", width: "100%" }}>
  <Map>
    {Object.values(FAKE_MARKERS).map(marker => (
      <MapMarker
        key={marker.id}
        coordinates={marker.coordinates}
        Popup={({ onClose }) => (
          <div>
            <h2>{marker.name}</h2>
            <button onClick={onClose}>Close</button>
          </div>
        )}
      />
    ))}
  </Map>
</div>