# Customizing Map Markers in New Glide Apps

**URL:** <https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540>\
**Category:** Community Resources\
**Created:** [February 6, 2024, 3:48am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540 "2024-02-06T03:48:01Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 6, 2024, 3:48am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/1 "2024-02-06T03:48:01Z")

</div>

I’m just updating what I used to post when we were still using Glide Classic [Custom map marker icons](https://community.glideapps.com/t/custom-map-marker-icons/38030).  
Now, through more static CSS, we can still change the color and icon of the map marker. Of course, you have to subscribe to the Business/Enterprise plan to use this feature.

The selector from this CSS is related to the “Title” in your “Map configuration panel.” Therefore, you can still group or categorize the appearance of your markers.

 ![Screenshot 2024-02-06 at 10.07.39](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/a/eab3ffad35154afd5a19eaef9d560c0b7256aae8.png)

**1. Change the color of the map marker**

 ![Screenshot 2024-02-06 at 09.51.02](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/0/b049cd398f854a808e9581b9ecbaa0f81dd7e0fa.jpeg)

```auto
/*Map Marker - Color*/
[title="Apple Store"] > svg > path {
fill: #6253BE;
}
[title="Samsung Store"] > svg > path {
fill: #BA55D3;
}
.mapboxgl-marker [title="Xiaomi Store"] > svg > path {
fill: #0065cb;
}

```

**2. Change the map marker icon**

 ![Screenshot 2024-02-06 at 10.06.24](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/1/d14ac2d353fae9b4f6fbf188c79bb8f6a6550aa4.jpeg)

```auto
/*Map Marker - Icon*/
.mapboxgl-marker > div > svg > path, .mapboxgl-marker > div > svg > circle {
display: none;
}
[title="Apple Store"] > svg{
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/976px-Apple_logo_black.svg.png') center/contain no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); 
}
[title="Samsung Store"] > svg{
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Samsung_Logo.svg/1600px-Samsung_Logo.svg.png') center/contain no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); 
}
[title="Xiaomi Store"] > svg{
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Xiaomi_logo_%282021-%29.svg/220px-Xiaomi_logo_%282021-%29.svg.png') center/contain no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); 
}

```

Adjust the selector to your own “title.”  
Hope this helps.

---

_[View the full topic](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540)._