ACF OpenStreetMap Field
Last updated
Last updated
AVF supports the ACF OpenStreetMap plugin, 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.
Map Marker Icon - Customize the Map Marker by using your own icon or uploading an image from Flaticon (.png, .jpg allowed). Dimensions of 32x32px is recommended.
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.
Visit the Playground and Navigate to Display Meta fields > Advanced fields.
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.
For a step-by-step guide on this, refer to the "CPT items map" section in our blog article.
