ACF OpenStreetMap Field
Last updated
Was this helpful?
Last updated
Was this helpful?
AVF supports the , which allows you to add Open Street Map fields in ACF.
OpenStreetMap (OSM) is a collaborative project that creates a free, editable map of the world. It is often referred to as the "Wikipedia of maps" because it relies on a community of volunteers to contribute and maintain geographic data. OpenStreetMap provides a platform where individuals can add and edit information about roads, trails, cafés, railway stations, and much more.
To display Open Street Maps, you'll need to download and install the plugin.
Assign the OpenStreetMap Field in your ACF Field Group.
Select the Map field to assign it to your View.
Paste the shortcode into place.
Fill in the address information on the post or page.
View the page to see the results.
Warning: The Return format for the OSM field must always be set to the 'Leaflet JS' option, even if you're going to employ the 'address' feature.
Switch to the Field Options tab for more control of your map and its display.
Don't use an SVG icon for the marker icon, as there is no way to restrict the dimensions using CSS. Rather upload the correct size .png or .jpg image.
Map Marker icon title - Shown when mouse hovers on Map Marker.
Hide Map - The Google Map is shown by default. Turn on the switcher to hide the map.
Show address from the map - The address is hidden by default. Turn this on to show the address from the map.
This page focuses on embedding single maps on individual pages or Custom Post Type items. However, there are scenarios where displaying multiple CPT items on a single map is essential. For example, if you’re managing an "events" CPT, you might need to showcase all events on a single map to provide a comprehensive view of all locations.
The process leverages ACF to store item coordinates as post meta, allowing you to query these CPT items and render them as markers on a unified map.
.
Map Marker Icon - Customize the Map Marker by using your own icon or uploading an image from (.png, .jpg allowed). Dimensions of 32x32px is recommended.
and Navigate to Display Meta fields > Advanced fields.
For a step-by-step guide on this, refer to the "" section in our blog article.
