Is there a way to change the color of the markers in a map? I want to have a map showing some of the items in my database but I want to make their colors conditional based on different parameters in the database. I haven’t found a way to change the color of the map markers and it doesn’t seem like there’s anyway to make the map marker’s color conditional.
Why don’t you use your own map icons. Just store them in the DB and access them through the map element
Ali, Thanks for your reply. Would there be a way to make those icons different colors based on values in the database?
what about if you can save the different colored icons in you database. then depending on your values you choose the appropriate icon.
How do I set the icon to come out of my database. It looks like I can only set “customized icon” to “no” or “upload custom” which would just make it a static icon separate from the database.
There is a number of steps you need to follow to get to the option to specify your images.
In the property editor do the following:
- Choose List for the Number of markers option.
- Choose Data dependent for the Customized icon option.
- Then a new option Icon field will show up. Here you can select the field that contains your images.
Here is what the documentation says about this:
“Icon field
If you’re using a list of markers and set the marker to be Data dependent and coming from the database, define the field that contains the image. The field should be of type image.”
https://bubble.io/reference#Elements.GoogleMap.custom_marker_field
Seanhoots. I can only set the customized icon option as “data dependent” when I’m using a dynamic list as the thing to display. However, when I do that the icons on the screen don’t show up even though I’m using the geographic address formatted field from my database. Is this some kind of a bug?
If you’re very certain that this is a bug then you can follow link below to file a bug.
But if you’re not very sure it’s a bug, then you can create a new post and choose the bug category. This way other members may be able to confirm if i’ts a bug or not.
You either share your app or recreate it in another public app so that people can take a look to see if you’re doing something wrong or its a bug.
I haven’t used the map elements before, i only read it from the documentation so i may not be able to assist further here.
I would like to use this same functionality with a map element so I’m looking forward to learning more.
I have the map icon functionality working, so it is more likely to be something in your app. Post a link, or recreate and we can have a look.
Be aware that there is an issue with the map icons in that they don’t scale with the map zoom, so if you allow zooming on your map they can look odd.
Hi Nigel,
Thanks for looking into it.
Here’s the link.
You were not pulling back any “Hikes” into your Map. So nothing was showing.
Sorted that and you now have a lot of paw prints over Colorado 
You will see the issue with the icon size.
Love the hiking with your dog idea 
Hi Nigel,
Thanks for fixing it. It looks great (although the icons are still too bit and I’m trying to figure out how make them smaller).
What was I doing wrong? It would be nice to be able to learn.
Thanks again
So on your map, you have markers set to your Data Type “Hiking”.
But in the “Data source” there was nothing to say which markers to show. So all I did was to replace the blank with a search for all “Hiking” records.
So you needed to specify your markers when you do a list. Like this …
Reported this as a “bug”. So hopefully it will be fixed shortly.
2 Likes
Hi, just piggybacking on this this discussion 
I’m trying to make map markers truly conditional: I’m displaying a list of things on the map, and the things that a user has added to his personal list should show in a different colour (say, orange) than the things that aren’t contained in that list (say, blue).
Based on Google’s documentation I could make it with code here and a map embedded in an HTML element, but I’m not sure how to implement this with the native map element (as I need to use the native actions) rather than the HTML element.
Any hint? 
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: -33.9, lng: 151.2}
});
setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beachesOrange = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5]
];
var beachesBlue = [
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map) {
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var imageOrange = {
url: 'https://s3.amazonaws.com/appforest_uf/f1561771982540x842622919165562500/map-marker-orange.svg',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
var imageBlue = {
url: 'https://s3.amazonaws.com/appforest_uf/f1561772795456x806929470518512100/map-marker-blue.svg',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < beachesOrange.length; i++) {
var beach = beachesOrange[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
icon: imageOrange,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
for (var i = 0; i < beachesBlue.length; i++) {
var beach = beachesBlue[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
icon: imageBlue,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
1 Like
Did you every get an answer to this? I’m interested in the same.
Didn’t get any answer from the forum, no. It doesn’t seem that there’s a no-code way or public plugin available to achieve this currently. Sorry 
So I think Ali may have had it right all along (because he’s a map guru, shout out to his MapsExtended plugin) I had been trying to do this for a while. I’ve seen posts from many on this thread and you’re all way smarter than I am so please ignore my ignorance if this is not the right idea…
Here is my data setup to do get Markers that are showing up in different “colors” (in quotes because they are just different colors of the same image) “conditionally” (in quotes because it is really just displaying a DB value:
I create Orders and Locations in my form (things).
Each Order has a Field that is List of Locations that are of the data type Location. (List of things)
Each Location has an Icon Field (image) and a Geographic Location Field (geographic location)
By workflow assign the image a certain Marker image (I just used Markers off of google and cropped it as much as possible) at a certain point to determine its color. You can use any image.
Setup the Map data source as a search, in my case it is a search for Orders List of Locations. Set the address field to Geographic Address.
Change the two customized icon boxes to Data Dependant / select the image field in the DB for the icon for both boxes.
You can easily make an image in the DB blank if you do not want it to show.
They have fixed the image zoom issue for Custom Markers since this last came up too. My cropped images aren’t perfect and are used from a high zoom level so they don’t really overlap.
You still get great caption functionality when you click on a Marker with this too.
Hope this helps somebody and they don’t spend all day on it like me… stay bubblin!
Hey,
I was trying to do a similar thing to yours. However, I am using bubbles you map element. Whenever I select list a geo graphic addresses. The option to select data dependent. Do you have a editable sample copy I can access to see how your doing it. My data is saved as custom states. and not in database.