How can I change the color of a Google Maps marker? [duplicate]

Question

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?

Adair

Answer 1

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.

Brakeman

Note to future readers: This is for Google Maps API v2 which is deprecated. If you're using v3, then you need to look elsewhere. – Crowd

I 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. – Friable

Answer 2

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.

Giliana

This answer is awesome. I was sad that the accepted answer is for V2, but thankfully scrolling down paid off. Thanks! – Aspersion

I created a version that doesn't rely on images: https://mcmap.net/q/101917/-how-can-i-change-the-color-of-a-google-maps-marker-duplicate – Hypotenuse

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. – Ruderal

Answer 3

Material Design

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,
    });

Hypotenuse

This 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. – Reviewer

Note that this does not work with https, only http. Bummer! – Lulululuabourg

@Lulululuabourg 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 – Hypotenuse

@JonathanLeaders: This means you have to add the domain to the allowed list on the info.plist of your project, since it is not an https call. – Lulululuabourg

Updated for 2019, no longer deprecated – Hypotenuse

@Hypotenuse the code does indeed works, but some explanations on what you're doing would be welcomed! +1 nevertheless – Prevenient

@CyrilC. I'm embedding SVG coordinate data into a string – Hypotenuse

this looks fine, but why does the default marker have a hit area that is only inside its shape whereas the custom markers have a rectangular one? This is very problematic if you want to allow the user to add consecutive markers close to each other (see zoomicon.files.wordpress.com/2019/06/… ) – Appearance

@GeorgeBirbilis for clarity, by default marker, do you mean pinSVGfilled? – Hypotenuse

@GeorgeBirbilis Just don't use the default one, just make a red custom one so the behavior is consistent? – Hypotenuse

the 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 – Appearance

@Hypotenuse is there a way to couple the text to the pin so that the DROP makes sense? jsfiddle.net/anmgk0to/1 – Pappano

How are the points 12, 9, 12, 15 and 12, 17 determined? – Gasteropod

The anchor position is wrong. If you copy that path into an .svg file set viewBox="0 0 22 22" then open it in an image editor, you can view the rasterized icon. Should be around 12,22. It's also off-center. Why 22x22? Because developers.google.com/maps/documentation/javascript/symbols – Wrapper

Answer 4

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).

Egide

It seems to be that this is only compatible with GMaps API v2? – Neurilemma

@Neurilemma 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 – Egide

look at Sean McMains's answer for v3 – Truscott

@Matt Originally, yes, it was only v2. I've since updated to include a v3 solution – Egide

FYI, "setImage" is not a function of market in Google Maps API v3. "setIcon" is the correct function to use. – Skeleton

these links no longer work - does anyone know where they can be found now? – Rosenzweig

@dESource I am not the author of this answer post. If you want, go ahead and edit the answer with the correct links. – Nydianye

Answer 5

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

Loesceke

This is similar to @Jonathan's answer, and the service is unfortunately now deprecated. – Recalesce

Answer 6

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 generally available now, we would love your feedback! 😊

Johnsson

Nice! I included this in my Advanced Markers Guide along with some other SVG-based approaches. – Harbert

When can we expect this to be released into stable? – Thickset

It's generally available today! Here is the API reference. – Johnsson

Guys, this has made life difficult for us! We just want different coloured pins with labels and drop animation, should be easy. With the new API the drop animation is custom JS. Nightmare. The fact there are whole Stack Overflow sections on how to change marker colour shows it is too hard. Just have it as an option when you create the marker? Appreciate the hard work though as always. – Robbins

Answer 7

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()))

Clippers

Is this android only, or also for web browsers? – Hypotenuse

@Hypotenuse - this is only for android - the example he posted is in JAVA – Trula

Answer 8

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://mcmap.net/q/103016/-how-to-change-marker-color-google-maps-duplicate

Label

Answer 9

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>

Opus