StaticMap
A map image that can display markers and radius area.
Use StaticMap to show a map image with optional markers and radius area.
Center
Use center to center the map on a geographical location. The provided center will be used along with the zoom level to define the area displayed on the map.
Map width and height
Use width and height to set the dimensions of the map.
Zoom
Use zoom to set the zoom level of the map. The following is the approximate level of detail for a given zoom level:
- 1: World
- 5: Landmass/continent
- 10: City
- 15: Streets
- 20: Buildings
Radius
Use radius to add a circle with specified radius.
Marker
Use StaticMarker within StaticMap to place markers. When using markers it is optional to provide a center, the map will automatically figure the correct area to show based on the markers and zoom.
Custom marker icon
Use the iconUrl on StaticMarker to change the icon for markers. This image isn't needed to be whitelisted in NextJS configuration.
- Icon images may be in PNG, JPEG or GIF formats, though PNG is recommended.
- Icons may be up to 4096 pixels maximum size (64x64 for square images).
Unoptimized images
Use the unoptimized property to disable Next.js image optimization.