I'm using the Google Maps API to build a map full of markers, but I want one marker to stand out from the others. The simplest thing to do, I think, would be to change the color of the marker to blue, instead of red. Is this a simple thing to do or do I have to create a whole new icon somehow? If I do have to create a new icon, what's the easiest way to do that?
9 Answers
With version 3 of the Google Maps API, the easiest way to do this may be by grabbing a custom icon set, like the one that Benjamin Keen has created here:
http://www.benjaminkeen.com/google-maps-coloured-markers/
If you put all of those icons at the same place as your map page, you can colorize a Marker simply by using the appropriate icon option when creating it:
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'brown_markerA.png'
});
This is super-easy, and is the approach I'm using for the project I'm working on currently.
-
6This answer is awesome. I was sad that the accepted answer is for V2, but thankfully scrolling down paid off. Thanks! Aug 26, 2013 at 19:49
-
I created a version that doesn't rely on images: stackoverflow.com/a/23163930/1689770– JonathanMar 19, 2019 at 15:53
-
How to add custom marker with poly line created on the map. I created two custom markers, source and destination but, when I draw a line between them. that creates a default red markers over my custom markers.– Ziayesterday
EDITED MARCH 2019 now with programmatic pin color,
PURE JAVASCRIPT, NO IMAGES, SUPPORTS LABELS
no longer relies on deprecated Charts API
var pinColor = "#FFFFFF";
var pinLabel = "A";
// Pick your pin (hole or no hole)
var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
var labelOriginHole = new google.maps.Point(12,15);
var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
var labelOriginFilled = new google.maps.Point(12,9);
var markerImage = { // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
path: pinSVGFilled,
anchor: new google.maps.Point(12,17),
fillOpacity: 1,
fillColor: pinColor,
strokeWeight: 2,
strokeColor: "white",
scale: 2,
labelOrigin: labelOriginFilled
};
var label = {
text: pinLabel,
color: "white",
fontSize: "12px",
}; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
this.marker = new google.maps.Marker({
map: map.MapObject,
//OPTIONAL: label: label,
position: this.geographicCoordinates,
icon: markerImage,
//OPTIONAL: animation: google.maps.Animation.DROP,
});
-
2This feature has been deprecated unfortunately as you can see here. This is such a disappointing situation, where this is deprecated and the previous version I used,
MapIconMaker
, has been deprecated already. Jun 16, 2014 at 4:53 -
-
@JoeGalind is there any reason encryption is required when fetching colors? I mean, I see no security risk to use
http
unless it is exposing something that I'm not aware of in the header– JonathanDec 13, 2017 at 2:42 -
11
-
1the problem is the custom ones seem to use a rectangular hit target which is really bad if you try to place markers close to each other manually Jul 11, 2019 at 0:07
MapIconMaker: a library for Google Maps v2
One way is to use the MapIconMaker(deadlink). There's an example here(deadlink). Google Maps default icons are 20px width and 34px height, so you could use something like this to emulate:
var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});
You could even wrap it in some function to make things even easier on yourself:
function getIcon(color) {
return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}
That's what I personally use for all markers I create. I prefer to have the option to change colors of a whim.
Update: The Hex color of the default icon is "#FE7569". Also, you can setImage on a Marker rather than creating a new Marker with a new icon. So if you want a function to highlight you could go with something like this, using the function above:
function highlightMarker(marker, highlight) {
var color = "#FE7569";
if (highlight) {
color = "#0000FF";
}
marker.setImage(getIcon(color).image);
}
StyledMarker: a library for Google Maps v3
Since V2 was replaced by V3 sometime ago I thought I should update this answer. I created a library for custom markers that can be found on the V3 Utility Library here(deadlink). It allows for different colors and shapes, and you can place text on the marker as well. It works by using the Google Charts API which has methods for creating Google Maps type markers. Feel free to look at the source code if you'd rather use the Google Charts API directly.
The thing about that library, however, is that it takes care of defining the clickable regions of these marker images for you, so, for instance, the longer bubble with text will have the clickable regions one expects, like this example(deadlink).
-
3
-
7@Tigraine I actually made an entirely new library to use for v3 called "StyledMarker" that can be found on the v3 Utility Library: code.google.com/p/google-maps-utility-library-v3/wiki/Libraries– BobDec 20, 2010 at 12:59
-
-
@Matt Originally, yes, it was only v2. I've since updated to include a v3 solution– BobNov 29, 2012 at 7:05
-
FYI, "setImage" is not a function of market in Google Maps API v3. "setIcon" is the correct function to use. Aug 26, 2013 at 18:59
Since maps v2 is deprecated, you are probably interested in v3 maps: https://developers.google.com/maps/documentation/javascript/markers#simple_icons
For v2 maps:
http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview
You would have one set of logic do all the 'regular' pins, and another that does the 'special' pin(s) using the new marker defined.
-
26Note to future readers: This is for Google Maps API v2 which is deprecated. If you're using v3, then you need to look elsewhere.– priestcAug 26, 2013 at 21:33
-
14I clicked on the first link, ctrl-f for 'color': no results. It would be great to add more details to the answer to actually answer the question. The OP specifically asks if it is possible to change the color without making a new icon. Mar 26, 2018 at 15:24
Personally, I think the icons generated by the Google Charts API look great and are easy to customise dynamically.
See my answer on Google Maps API 3 - Custom marker color for default (dot) marker
-
1This is similar to @Jonathan's answer, and the service is unfortunately now deprecated. Jan 13, 2019 at 2:44
The simplest way I found is to use BitmapDescriptorFactory.defaultMarker() the documentation even has an example of setting the color. From my own code:
MarkerOptions marker = new MarkerOptions()
.title(formatInfo(data))
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
.position(new LatLng(data.getLatitude(), data.getLongitude()))
-
-
@Jonathan - this is only for android - the example he posted is in JAVA Aug 14, 2019 at 3:13
2023 Solution: Advanced Markers
👋 Hi Google Maps JavaScript API developer here.
Google recently announced the new Advanced Markers, it has some really cool features including customizing the default marker's color, glyph, glyph color and scale etc. And we've been trying to improve the performance.
The new APIs are still in beta, we would love your feedback! 😊
-
2Nice! I included this in my Advanced Markers Guide along with some other SVG-based approaches. Nov 26, 2022 at 19:45
To customize markers, you can do it from this online tool: https://materialdesignicons.com/
In your case, you want the map-marker which is available here: https://materialdesignicons.com/icon/map-marker and which you can customize online.
If you simply want to change the default Red color to Blue, you can load this icon: http://maps.google.com/mapfiles/ms/icons/blue-dot.png
It's been mentioned in this thread: https://stackoverflow.com/a/32651327/6381715
This relatively recent article provides a simple example with a limited Google Maps set of colored icons.
For a real website example using blue and orange map markers, see this website and view the script under the Google map.
<section id="map" class="map">
<script>
let map;
const speediwash = { lat: 52.656937, lng: -8.634390 };
const stJosephX = { lat: 52.658041, lng: -8.632414};
// const maryI = { lat: 52.653192, lng: -8.638974 };
const trainStn = { lat: 52.658757, lng: -8.623560 };
// const claytonH = { lat: 52.660802, lng: -8.636411 };
let markersArray = []; // Global array to store the marker object
function initMap()
{
map = new google.maps.Map(document.getElementById('map'),
{
center: stJosephX,
zoom: 15.1
});
addMarker(speediwash, "Speediwash", "blue");
//addMarker(maryI, "Mary I College", "green");
addMarker(trainStn, "Train Station", "orange");
//addMarker(claytonH, "Clayton Hotel", "purple");
}
function addMarker(latLng, alabel, color)
{
let url = "https://maps.google.com/mapfiles/ms/icons/";
url += color + "-dot.png";
let marker = new google.maps.Marker(
{
map: map,
position: latLng,
label: alabel,
icon:
{
url: url,
labelOrigin: new google.maps.Point(60, 30)
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANwXk4HVQv7w5WAEUCStjAgT25b0s0p1Y&callback=initMap">
</script>