> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/field-types/media/map-field/marker-from-image-field.md).

# How to use an Image field as a map marker

In **Advanced Views Lite**, [*Layouts*](/advanced-views/getting-started/first-layout.md) allow you to [display map fields](/advanced-views/field-types/media/map-field.md) out of the box.

In **Advanced Views Pro**, you can customize the appearance of map markers, including using a custom marker image.

In some cases, however, you may want to display the same map on different pages while using a different marker image for each one. This can be achieved by using the value of an **Image** field as the marker icon, allowing content editors to control the marker image for each map individually.

## 1. Step-by-step guide

**Select** the **Map** field from the Field list, and also assign the map marker **Image field** you'd like to use.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FpGy8sJF15kQFRmHm8Q1g%2Fmap-marker-image.png?alt=media&amp;token=3c3915cd-7e80-4888-86db-eac6144b2bcb" alt=""><figcaption></figcaption></figure>

**Publish** or **Update** your *Layout* to Save.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FMWk6b6qJupvKj5hCVO5Q%2Fpublish.png?alt=media&amp;token=dd3b1902-1837-4307-806d-b4c0df6639d1" alt=""><figcaption></figcaption></figure>

**Switch** to the **Template** tab, copy and paste the **Default Template** code into the **Custom Template** field.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2Fz3Znqja2EFsswcErRmOe%2Fcustom-template.png?alt=media&amp;token=3a926d80-0ece-4169-a664-6155885a1f7a" alt=""><figcaption></figcaption></figure>

In the Custom Template field copy the `{{ map_marker.value }}` from the `src` attribute of the Image field.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FJtRGYQggJFdk3xkRC8Ix%2Fcopy-marker.png?alt=media&amp;token=71c08452-a5ee-466a-bdee-3a55b56c7d6e" alt=""><figcaption></figcaption></figure>

**Paste** it, replacing the `data-icon="{{ map.marker_icon }}"` attribute of the Map field.&#x20;

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FOcueIWPSCTlnJZkwkPAu%2Fpaste-image-icon.png?alt=media&amp;token=d8dbc21f-bd80-4350-a4e6-4de1b9b560bc" alt=""><figcaption></figcaption></figure>

Then **delete** the lines for the map marker Image field markup.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2F8aQ1CWKHI4fhaA6Kq6Wi%2Fdelete-lines.png?alt=media&amp;token=36eb76eb-75a5-428a-ae62-03286723a2e4" alt=""><figcaption></figcaption></figure>

Save or update to publish your *Layout.*