Map Settings
Configure your store locator map appearance, behavior, and provider settings.
Map Provider
PinPoint supports two map providers. Choose based on your needs and existing API keys.
| Provider | Best For |
|---|---|
| Mapbox (default) | Beautiful styles, great performance, generous free tier |
| Google Maps | Familiar interface, strong global coverage |
After selecting a provider, enter your API key in the corresponding field. Your key is stored securely and used only for your store locator.
Default View
Control what customers see when the map first loads.
Default Center
Set the initial map center using latitude and longitude coordinates. The default centers on the United States (39.8283, -98.5795).
- Latitude: North-south position (-90 to 90)
- Longitude: East-west position (-180 to 180)
Default Zoom
The zoom level determines how close or far the map appears initially. Values range from 1 (world view) to 22 (street level).
- 1-3: Continental view
- 4-6: Country/region view (recommended for national businesses)
- 7-10: State/province view
- 11-14: City view
- 15+: Neighborhood/street view
Map Style
Choose a map style that matches your brand. Available styles (Mapbox):
| Style | Description |
|---|---|
| Streets | Classic street map with full detail (default) |
| Light | Minimalist light theme, great for clean designs |
| Dark | Dark theme, ideal for dark-mode websites |
| Outdoors | Topographic style with terrain details |
| Satellite | Aerial imagery view |
Map Dimensions
Map Height
Set the map height in pixels. The default is 500px. Consider your page layout and how much screen real estate you want the map to occupy.
Side Panel Width
Controls the width of the store list sidebar in pixels. The default is 380px. Adjust based on how much store information you display.
Markers
Default Marker Color
Set the color for store markers using a hex color code (e.g., #667eea). This color is used for all stores unless overridden by tag-based colors.
Custom Pin Image
Replace the default marker with your own custom pin image:
- Enable Use Custom Pin
- Enter the Custom Pin URL (must be a publicly accessible image URL)
- Set the Width and Height in pixels (default: 40x40)
Marker Clustering
When you have many stores in a small area, clustering groups nearby markers together for better performance and readability.
Clustering Settings
- Enable Clustering: Turn clustering on or off (enabled by default)
- Cluster Color: Color of the cluster circles (hex code)
- Uncluster Zoom Level: Zoom level at which clusters expand to show individual markers (default: 12)
Display on Zoom Out
Control whether stores are visible when the map is zoomed out. When disabled, stores only appear after the customer searches or zooms in.
Map Popups
When Show Popups is enabled, clicking a marker shows a popup with store details. Disable this if you prefer customers to use the sidebar list exclusively.
Layout Options
Desktop Layout
Choose how the map and store list are arranged on desktop:
- Split bar top, results on left: Search bar spans top, list on left (default)
- Split bar top, results on right: Search bar spans top, list on right
- Map and results on left: Map with overlaid list panel
- List only: No map, just the store list
Mobile Layout
Choose how the map displays on mobile devices:
- Show map above results: Map on top, store list below (default)
- Show map below results: Store list on top, map below
- Don't show map on mobile: List only for faster mobile loading
List Position
Choose whether the store list appears on the left or right side of the map.
Search Behavior
These settings control how search works in your store locator. Found in Settings → Behavior.
- Show Search Bar: Display the search input (enabled by default)
- Show Store List: Display the sidebar with store cards (enabled by default)
- Search Radius: Maximum distance for search results
- Distance Units: Miles or kilometers
Admin Map Features
Location Preview
When adding or editing a store in the admin dashboard, a mini map preview displays the geocoded location. This helps you verify the address was correctly converted to coordinates.
- For existing stores: The map shows the saved latitude and longitude
- For new stores: Select an address from the autocomplete dropdown to see the location
- Coordinates: The exact lat/lng are displayed below the preview map
Address Autocomplete
When entering a store address, PinPoint provides autocomplete suggestions powered by your configured map provider. Select a suggestion to:
- Auto-fill city, state, and zip code fields
- Preview the location on the mini map
- Ensure accurate geocoding when the store is saved
