Overview #
HomeRunner supports two mapping systems: OpenStreetMaps (via Leaflet) and Google Maps. Each has different capabilities and requirements.
Default Configuration: OpenStreetMaps/Leaflet #
By default, HomeRunner uses OpenStreetMaps through the Leaflet library. This option is:
- Free to use with no API key required
- Fully operational for basic mapping needs
- Limited in customization and advanced features
Accessing Map Settings #
Navigate to: HomeRunner Settings > Property > General > Map
The default “Map to use” setting is Leaflet.
Upgrading to Google Maps #
Requirements #
To use Google Maps, you must provide your own Google Maps API key. HomeRunner does not supply this.
Obtaining a Google Maps API Key #
- Search YouTube for “Google Maps API key 2025” (or whatever the current year is)
- Follow the step-by-step tutorial (typically takes a few minutes)
- Create the key through your Google account
Important: Restrict Your API Key #
You should restrict your API key to your domain only. If someone discovers your unrestricted key and uses it on a high-traffic website, you will be charged for their usage. This can result in significant, unexpected expenses.
Enabling Google Maps in HomeRunner #
Once you have your API key, enter it in the Map settings. HomeRunner will automatically switch to using Google Maps.
Google Maps Features #
Google Maps provides a more polished appearance and unlocks additional functionality:
Map Type Options #
Switch between roadmap, satellite, and other view types from Explorer > Map.
Clustering #
When zoomed out, properties in close proximity are grouped into numbered clusters instead of overlapping pins. This keeps the map readable when displaying many properties in one area.
Search on Map Movement #
Properties update as users pan and zoom the map. (This works on Leaflet too, but performs better with Google Maps.)
Custom Styling with Snazzy Maps #
Google Maps can be styled using custom JSON from Snazzy Maps. This allows you to:
- Match the map colors to your brand
- Adjust contrast and visual elements
- Create a more intentional, custom look
Without custom styling, Google Maps uses its standard bright, high-contrast appearance. With styling, you can create something that feels more integrated with your site design.
Where Maps Appear #
Maps are displayed in two locations:
- Explorer/Search page (showing multiple properties)
- Individual property details pages (showing single property location)
Both locations use whichever mapping system you’ve configured.