Reputation: 6866

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

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?

Upvotes: 203

Answers (9)

jeantimex

Reputation: 1779

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! 😊

Upvotes: 16

Trunk

Reputation: 756

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>

Upvotes: -2

Sean McMains

Reputation: 59263

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.

Upvotes: 135

Bob

Reputation: 7981

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

Upvotes: 50

Jonathan

Reputation: 7128

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

Upvotes: 83

GuGuss

Reputation: 81

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

Upvotes: 2

Michael Hamilton

Reputation: 586

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

Upvotes: 14