---
title: Map Configuration in HomeRunner
description: "![](http://homerunner.io/wp-content/uploads/2025/10/homerunner-map-config-comparison-2-1024x404.jpg) ## 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**…"
url: "https://homerunner.io/docs/map-configuration-in-homerunner/"
updated: "2025-10-06"
category: How To
---

# Map Configuration in HomeRunner

![](http://homerunner.io/wp-content/uploads/2025/10/homerunner-map-config-comparison-2-1024x404.jpg)

## 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

![](https://homerunner.io/wp-content/uploads/2025/10/Screenshot-2025-10-06-at-7.58.27-AM.jpg)

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](https://developers.google.com/maps/documentation/javascript/get-api-key). HomeRunner does not supply this.

### Obtaining a Google Maps API Key

1. Search YouTube for "[Google Maps API key 2025](https://www.youtube.com/results?search_query=google+maps+api+key+2025)" (or whatever the current year is)
2. Follow the step-by-step tutorial (typically takes a few minutes)
3. 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.

![](https://homerunner.io/wp-content/uploads/2025/10/Screenshot-2025-10-06-at-8.01.34-AM.jpg)

## 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](https://snazzymaps.com/). 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.