# ACF OpenStreetMap Field

AVF supports the [ACF OpenStreetMap plugin](https://wplake.org/blog/acf-google-map-field/#4-acf-open-street-map-field_ov0d), 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.

## How to use it

To display Open Street Maps, you'll need to download and install the plugin.

{% hint style="success" %}
[Download ACF OpenStreetMap Field plugin](https://wordpress.org/plugins/acf-openstreetmap-field/).
{% endhint %}

**Assign** the **OpenStreetMap Field** in your ACF Field Group.

**Select** the Map field to assign it to your *Layout*.

**Paste** the **shortcode** into place.

**Fill** in the **address** information on the post or page.

**View** the page to see the results.

{% hint style="warning" %}
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.
{% endhint %}

## Field Options (Pro)

**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](https://www.flaticon.com/free-icons/google-maps) (.png, .jpg allowed). Dimensions of 32x32px is recommended.

{% hint style="danger" %}
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.
{% endhint %}

**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.

## See it in action

[Visit the Playground](https://playground.wordpress.net/?blueprint-url=https://wplake.org/playground/advanced_views_lite-latest-101.json)  and Navigate to Display Meta fields > Advanced fields.

## Displaying multiple CPT items on a single 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.

For a step-by-step guide on this, refer to the "[CPT items map](https://wplake.org/blog/embed-maps-in-wordpress/#5-advanced-how-to-display-all-wordpress-cpt-items-on-a-single-map_juvs)" section in our blog article.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wplake.gitbook.io/advanced-views/display-content/meta-fields/advanced-fields/acf-openstreetmap-field.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.