# Custom map marker icons

**URL:** https://community.glideapps.com/t/custom-map-marker-icons/38030
**Category:** Project Showcase
**Created:** [February 2, 2022, 3:40pm UTC](https://community.glideapps.com/t/custom-map-marker-icons/38030 "2022-02-02T15:40:36Z")
**Posts on this page:** 6
**Page:** 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 2, 2022, 3:40pm UTC](https://community.glideapps.com/t/custom-map-marker-icons/38030/1 "2022-02-02T15:40:36Z")

</div>

Continuing what @ThinhDinh started about customizing the pin color of the map with CSS. I’m trying to add using a custom marker that can be changed according to a company’s logo to display the location spread of its store/branch office on a map.  
Hopefully what is shared is useful for those who need it.

 ![Capture](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/e/2e1d9cd187ff2e8abb5fb38736ed96737d7a2ca2.jpeg)

```auto
div[title*="{T}"] >svg >path {
display:none;
}
div[title*="{T}"]>svg{
background-image: URL("https://upload.wikimedia.org/wikipedia/commons/a/ab/Icon-Mac.svg");  
transform:scale(1.2);
background-repeat: no-repeat;
background-size: cover;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); 
background-position: center; 
}

div[title*="{T}"] >svg >circle {
display:none;
}

div[title*="{T}"]::after {
content: "{S}";
font-size: 12px;
font-weight: 700;
color: white; /*You can follow the Tinh Dinh way for this part*/
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
}

```

This application is copyable and I prefer to simplify the number of sheets a bit by using the filter from the map. It’s free and feels free to copy it.

> **[Custom Marker](https://encouraging-crowd-2632.glideapp.io/)**

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [February 2, 2022, 11:54pm UTC](https://community.glideapps.com/t/custom-map-marker-icons/38030/2 "2022-02-02T23:54:25Z")

</div>

Neat! Thanks for sharing.

---

<div class="post-metadata">

### Author: ![VVerhille](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vverhille/32/16246_2.png) [@VVerhille](https://community.glideapps.com/u/VVerhille)
#### Post date: [February 3, 2022, 1:46pm UTC](https://community.glideapps.com/t/custom-map-marker-icons/38030/3 "2022-02-03T13:46:07Z")

</div>

Thanks ! Great and useful

---

<div class="post-metadata">

### Author: ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)
#### Post date: [June 19, 2023, 6:54am UTC](https://community.glideapps.com/t/custom-map-marker-icons/38030/4 "2023-06-19T06:54:45Z")

</div>

Can this be done in the current Glideapp (page)?

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [June 19, 2023, 11:10pm UTC](https://community.glideapps.com/t/custom-map-marker-icons/38030/5 "2023-06-19T23:10:18Z")

</div>

Most likely no, since you can not have the CSS box pointing to a dynamic column.

If you want to work with it, it would still work, but you have to paste static code to the CSS box, on a Business/Enterprise plan.

---

<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:53am UTC](https://community.glideapps.com/t/custom-map-marker-icons/38030/6 "2024-02-06T03:53:49Z")

</div>

Hi @l3oy8231, this is my update in this post:

> [@Customizing Map Markers in New Glide Apps](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540):
>
> 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 package 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. 1. Change the c…
