Listeo User Group on FacebookGoogle Maps API pricing got you down? You can use OpenStreetMap (default, free), MapBox or Yandex Maps instead. Listeo also supports location autocomplete powered by OpenStreetMap, so you don’t need a Google API key even for thatok.
What’s more Listeo supprorts also location autocomplete feature powered by OpenStreetMap which means that you don’t need to use Google API even for this. It’s exclusive to Listeo – not found in other themes! We took care to develop it with best UX/UI practices and it works as good as Google’s autocomplete.
An example of map and location autocomplete field powered by OpenStreetMap:
With the public OpenStreetMap server, address suggestions appear after you type and hit Enter. Its usage policy doesn’t allow a request on every key press (like Google does), and the server is shared for free, so we respect that. If you run your own Nominatim server, enter it in Nominatim server URL and enable Search addresses as you type
An example of map and location autocomplete field powered by Google Maps:
You will find all map settings in Listeo Core → Map Settings:
Custom Map Styles
You can change how the map looks with every provider. All options are in Listeo Core → Map Settings.
OpenStreetMap
Paste a tile URL template of any compatible tile service in OpenStreetMap tile server URL, for example a light or dark style from Stadia Maps, Thunderforest or CARTO, or your own tile server. Use the placeholders {z}/{x}/{y} (optionally {s} and {r} for retina), and add the API key to the URL if the service needs one:
https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png?api_key=YOUR_KEY
Leave the field empty to use the standard OpenStreetMap tiles.
MapBox
Create a style in MapBox Studio and paste its link in MapBox Studio Style URL.
Google Maps
Create a map style in Google Cloud Console → Maps → Map Styles, link it to a Map ID and paste the ID in Google Map ID. For a dark map, set Google Maps color scheme to Dark, Follow system or Match Listeo dark mode. With a Map ID, the dark scheme uses the dark style you published for that ID.
Most tile services are paid for commercial use or limit free requests, and require their own credit on the map. Check the terms of the service before using it on a live site.
Listeo Core → Map Settings
| Setting Name | Option/Details |
|---|---|
| Search Restrictions & Behavior | |
| Restrict search results to one country (Google Maps and OpenStreetMap) | Limits address suggestions to one country. Put the two-letter ISO country code (eg. gb for United Kingdom, us for United States). Use gb, not uk, OpenStreetMap accepts only the ISO code. Leave empty to search whole world. text |
| Enable Map Bounds Search | Search listings within current map view when dragging/zooming the map checkbox Default: ON |
| Automatically locate users on page load | You need to be on HTTPS, this uses html5 geolocation feature checkbox Default: OFF |
| Map Configuration | |
| Listings map center point | Write latitude and longitude separated by comma, for example -34.397,150.644 text Default: 29.577712,-45.629483 |
| Autofit all markers on map | Disable checkbox to set the zoom of map manually checkbox Default: ON |
| Group nearby markers in clusters | Disable to show every marker individually (with All published listings, up to 1000 markers in view) checkbox Default: ON |
| Zoom level for Listings Map | Number between 0-20, works only with autofit disabled text Default: 9 |
| Zoom level for Single Listing Map | Number between 1-20 number Default: 9 |
| All Listings on Map | |
| Map markers source | Current search results: markers of the listings shown on the page. All published listings: clustered markers for the whole directory. Marker data is generated in the background and refreshes automatically when listings change. radio Default: Current search results |
| Cluster grid size | Cluster density in pixels, 40-160. Bigger value means fewer, larger clusters. Shown only with All published listings text Default: 80 |
| Map Provider & Services | |
| Maps Provider | OpenStreetMap, Google Maps (requires API key), MapBox (requires API key), Yandex Maps (requires API key) or None (removes all map scripts) radio Default: OpenStreetMap |
| Address suggestion provider | OpenStreetMap, Google Maps (requires API key and Maps Provider set to Google Maps) or Disable address suggestion radio Default: OpenStreetMap |
| Nominatim server URL | Optional. Your own Nominatim server for OpenStreetMap address suggestions, eg. https://nominatim.example.com/. Leave empty to use nominatim.openstreetmap.org text |
| OpenStreetMap tile server URL | Optional. Tile URL template, eg. https://tiles.example.com/{z}/{x}/{y}.png. Leave empty to use tile.openstreetmap.org text |
| Search addresses as you type | Shows OpenStreetMap suggestions while typing instead of after pressing Enter. Works only with your own Nominatim server checkbox Default: OFF |
| Minimum characters for address search | With your own Nominatim server you can lower this, eg. to 1. The public server always uses 3 number Default: 3 |
| API Keys & Credentials | |
| Google Maps API key | API key for Google Maps (can be domain restricted). Getting Google Maps API key text |
| MapBox Access Token | Access Token for MapBox text |
| MapBox Studio Style URL | Style link generated in MapBox Studio. How to use MapBox custom map styles text |
| MapBox Retina Tiles | Use Retina Tiles. Might affect map loading speed checkbox |
| Yandex Maps API key | Key for the “JavaScript API and Geocoder HTTP API” service from the Yandex Developer Dashboard. Used only when Maps Provider is set to Yandex Maps text |
| Yandex Maps language | Language of map labels and controls. “Site language” picks the closest match to the WordPress site language select Default: Site language |
| Google Map ID | Optional. Styled Map ID from Google Cloud Console → Maps → Map Styles text |
| Google Maps color scheme | Light, Dark, Follow system (visitor’s system preference) or Match Listeo dark mode. With a Google Map ID, the dark scheme uses the dark style of that Map ID radio Default: Light |
| Server-side Geocoding & Radius Search | |
| Server side geocoding provider | Google Maps or Geoapify select Default: Google Maps |
| Google Maps API key for server side geocoding | Separate key without any domain/key restriction text |
| Geoapify API key for server side geocoding | Geoapify API key for geocoding search text |
| Radius slider default state | Disabled by default or Enabled by default. If you never saved Map Settings, save the page once so this choice is stored select Default: Disabled by default |
| Radius search unit | km or miles select Default: km |
| Default radius search value | Used when the radius slider is enabled by default. Leave empty to disable default radius search text Default: 50 |
| Location Search Method | |
| Location Search Method | Radius-based: circular area around the location. Viewport-based: rectangular area of the searched place (from the address suggestion or the server-side geocoder), recommended for countries and regions. Auto: viewport for countries and regions, for other places viewport only when the area is bigger than the threshold, otherwise radius radio Default: Radius-based |
| Viewport Fallback Radius | Radius used when the viewport is not available (unit from “Radius search unit”) number Default: 50 |
| Auto Mode Area Threshold (km²) | In Auto mode, areas bigger than this use viewport search, smaller ones radius search number Default: 50000 |
