How can I change the color of a Google Maps marker

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

User · Answer

This relatively recent article provides a simple example with a limited Google Maps set of colored icons

User · Answer

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

User · Answer

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

User · Answer

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  p 105  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

User · Answer

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

User · Answer

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

User · Answer

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   quot  0000FF quot   cornercolor  quot  0000FF quot     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  quot  FE7569 quot   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    quot  FE7569 quot       if  highlight            color    quot  0000FF quot             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

User · Answer

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

[google-maps] How can I change the color of a Google Maps marker?

Examples related to google-maps

Examples related to google-maps-api-2