# How to show two different color pins on a map **URL:** \ **Category:** Ask for Help\ **Created:** [January 16, 2026, 11:28am UTC](https://community.glideapps.com/t/how-to-show-two-different-color-pins-on-a-map/86046 "2026-01-16T11:28:17Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [January 16, 2026, 11:28am UTC](https://community.glideapps.com/t/how-to-show-two-different-color-pins-on-a-map/86046/1 "2026-01-16T11:28:17Z")
Currently using CSS to make the pins orange, however we now want to make the pins red if the customer has a deal there, and green if they don’t (ie it’s just a boolean, so the color would change based off that boolean). Is there any way to do this on the same map using the map component in Glide? ---
**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\ **Post date:** [January 16, 2026, 1:18pm UTC](https://community.glideapps.com/t/how-to-show-two-different-color-pins-on-a-map/86046/2 "2026-01-16T13:18:40Z")
I would refer you to the Map expert 😂 @Jeff_Hager ---
**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\ **Post date:** [January 16, 2026, 1:19pm UTC](https://community.glideapps.com/t/how-to-show-two-different-color-pins-on-a-map/86046/3 "2026-01-16T13:19:25Z")
For the CSS part, this might also be useful > [@artist\_palette CSS Hack: Role-Based App Themes](https://community.glideapps.com/t/css-hack-role-based-app-themes/85185): > > Here’s a simple dynamic CSS trick to make your Glide app’s theme automatically change based on user roles — like admin, member, vip or banned. By declaring global CSS variables and using the :is() selector to shorten rules — together with :has() for data-driven conditions — you can keep your CSS clean, dynamic, and highly scalable. [ScreenRecording2025-11-01112758-ezgif.com-video-to-gif-converter] globe_showing_americas 1. Global Variable Declaration Define role-based color variables that … ---
**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:** [January 16, 2026, 6:01pm UTC](https://community.glideapps.com/t/how-to-show-two-different-color-pins-on-a-map/86046/4 "2026-01-16T18:01:09Z")
When working with maps, targeting individual pins via the Rich Text component is difficult. The most practical solution is still to rely on the **title attribute** , but you need to be cautious with translators since they can modify the title text. > [@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 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. 1. Change the colo… ---
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [January 20, 2026, 2:08pm UTC](https://community.glideapps.com/t/how-to-show-two-different-color-pins-on-a-map/86046/5 "2026-01-20T14:08:27Z")
/_Map Marker - Color_/ [title\*=“ACTIVE”] \> svg \> path { fill: #00C853; } [title\*=“INACTIVE”] \> svg \> path { fill: #FF1744; } ended up going with this, very simple and works perfectly fine, obviously adjust active and inactive to whatever you’re filtering by in your title! ---
**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:** [January 20, 2026, 3:03pm UTC](https://community.glideapps.com/t/how-to-show-two-different-color-pins-on-a-map/86046/6 "2026-01-20T15:03:43Z")
> [@Customizing Map Markers in New Glide Apps](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/1): > > ```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; > } > > ``` It’s better not to add an asterisk to your `title` attribute, in order to avoid affecting other elements that may have the same attribute. Alternatively, you can add a custom class in front of it to specifically target and ensure it only applies to the map. ---
**Author:** ![MattGlides](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@MattGlides](https://community.glideapps.com/u/MattGlides)\ **Post date:** [January 20, 2026, 3:37pm UTC](https://community.glideapps.com/t/how-to-show-two-different-color-pins-on-a-map/86046/7 "2026-01-20T15:37:51Z")
Forgot about the custom class, need the \* cause I needed to include other info that’s not consistent in the title. Thanks! ---
**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\ **Post date:** [January 27, 2026, 3:38pm UTC](https://community.glideapps.com/t/how-to-show-two-different-color-pins-on-a-map/86046/8 "2026-01-27T15:38:42Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.