Google Maps API 3 - Custom marker color for default dot marker

Question

I ve seen lots of other questions similar to this  here  here and here   but they all have accepted answers that don t solve my problem  The best solution I have found to the problem is the StyledMarker library  which does let you define custom colours for markers  but I can t get it to use the default marker  the one you get when you do a google maps search - with a dot in the middle   it just seems to provide markers with a letter in  or with a special icon

User · Answer

If you use Google Maps API v3 you can use setIcon e.g.

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Or as part of marker init:

marker = new google.maps.Marker({
    icon: 'http://...'
});

Other colours:

Use the following piece of code to update default markers with different colors.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

User · Answer

I tried for a long time to improve vokimon s drawn marker and make it more similar to Google Maps one  and pretty much succeeded   This is the code I got     let circle true   path    M 0 0  C -0 7 -9 -3 -14 -5 5 -18 5        A 16 16 0 0 1 -11 -29       A 11 11 0 1 1 11 -29       A 16 16 0 0 1 5 5 -18 5       C 3 -14 0 7 -9 0 0 z            M -2 -28       a 2 2 0 1 1 4 0 2 2 0 1 1 -4 0   new Number circle         I also scaled it by 0 8

User · Answer

Hi you can use icon as SVG and set colors  See this code   x000D   x000D     x000D     declare map and places as a global variable x000D      x000D  var map  x000D  var places     x000D        Place 1     lt h1 gt Title 1 lt  h1 gt    -0 690542  -76 174856  red    x000D        Place 2     lt h1 gt Title 2 lt  h1 gt    -5 028249  -57 659052  blue    x000D        Place 3     lt h1 gt Title 3 lt  h1 gt    -0 028249  -77 757507  green    x000D        Place 4     lt h1 gt Title 4 lt  h1 gt    -0 800101286  -76 78747820  orange    x000D        Place 5     lt h1 gt Title 5 lt  h1 gt    -0 950198  -78 959302   FF33AA   x000D     x000D     x000D     use google maps api built-in mechanism to attach dom events x000D      x000D  google maps event addDomListener window   load   function      x000D   x000D         x000D         create map x000D          x000D      var map   new google maps Map document getElementById  map div      x000D          mapTypeId  google maps MapTypeId ROADMAP  x000D          x000D   x000D         x000D         create infowindow  which will be used by markers  x000D          x000D      var infoWindow   new google maps InfoWindow    x000D         x000D         create bounds  which will be used auto zoom map  x000D          x000D      var bounds   new google maps LatLngBounds    x000D   x000D         x000D         marker creater function  acts as a closure for html parameter  x000D          x000D      function createMarker options  html    x000D          var marker   new google maps Marker options   x000D          bounds extend options position   x000D          if  html    x000D              google maps event addListener marker   click   function      x000D                  infoWindow setContent html   x000D                  infoWindow open options map  this   x000D                  map setZoom map getZoom     1  x000D                  map setCenter marker getPosition     x000D                  x000D            x000D          return marker  x000D        x000D   x000D         x000D         add markers to map x000D          x000D      for  var i   0  i  lt  places length  i      x000D          var point   places i   x000D          createMarker   x000D              position  new google maps LatLng point 2   point 3    x000D              map  map  x000D              icon    x000D                  path   M27 648 -41 399q0 -3 816 -2 7 -6 516t-6 516 -2 7 -6 516 2 7 -2 7 6 516 2 7 6 516 6 516 2 7 6 516 -2 7 2 7 -6 516zm9 216 0q0 3 924 -1 188 6 444l-13 104 27 864q-0 576 1 188 -1 71 1 872t-2 43 0 684 -2 43 -0 684 -1 674 -1 872l-13 14 -27 864q-1 188 -2 52 -1 188 -6 444 0 -7 632 5 4 -13 032t13 032 -5 4 13 032 5 4 5 4 13 032z   x000D                  scale  0 6  x000D                  strokeWeight  0 2  x000D                  strokeColor   black   x000D                  strokeOpacity  1  x000D                  fillColor  point 4   x000D                  fillOpacity  0 85  x000D                 x000D             point 1    x000D         x000D      map fitBounds bounds   x000D      x000D   lt script type  text javascript  src  http   maps googleapis com maps api js v 3  gt  lt  script gt  x000D   lt div id  map div  style  height  400px   gt  lt  div gt  x000D   x000D   x000D

User · Answer

In Internet Explorer  this solution does not work in ssl       One can see the error in console as       SEC7111  HTTPS security is compromised by this       Workaround   As one of the user here suggested replace    chart apis google com to chart googleapis com for the URL path to avoid SSL error

User · Answer

since version 3 11 of the google maps API  the Icon object replaces MarkerImage  Icon supports the same parameters as MarkerImage  I even found it to be a bit more straight forward   An example could look like this   var image       url  place icon    size  new google maps Size 71  71     origin  new google maps Point 0  0     anchor  new google maps Point 17  34     scaledSize  new google maps Size 25  25       for further information check this site

User · Answer

As others have mentioned  vokimon s answer is great but unfortunately Google Maps is a bit slow when there are many SymbolPath SVG-based markers at once   It looks like using a Data URI is much faster  approximately on par with PNGs   Also  since it s a full SVG document  it s possible to use a proper filled circle for the dot  The path is modified so it is no longer offset to the top-left  so the anchor needs to be defined   Here s a modified version that generates these markers   var coloredMarkerDef         svg              lt svg viewBox  0 0 22 41  width  22px  height  41px  xmlns  http   www w3 org 2000 svg  gt                  lt path d  M 11 41 c -2 -20 -10 -22 -10 -30 a 10 10 0 1 1 20 0 c 0 8 -8 10 -10 30 z  fill   fillColor   stroke   ffffff  stroke-width  1 5   gt                  lt circle cx  11  cy  11  r  3   gt              lt  svg gt         join          anchor   x  11  y  41       size   width  22  height  41      var getColoredMarkerSvg   function color        return coloredMarkerDef svg replace   fillColor    color       var getColoredMarkerUri   function color        return  data image svg xml     encodeURIComponent getColoredMarkerSvg color        var getColoredMarkerIcon   function color        return           url  getColoredMarkerUri color           anchor  coloredMarkerDef anchor          size  coloredMarkerDef size          scaledSize  coloredMarkerDef size            Usage   var marker   new google maps Marker       map  map      position  new google maps LatLng latitude  longitude       icon  getColoredMarkerIcon   FFF         The downside  much like a PNG image  is the whole rectangle is clickable  In theory it s not too difficult to trace the SVG path and generate a MarkerShape polygon

User · Answer

You can use color code also    const marker  Marker   this map addMarkerSync       icon    008000       animation   DROP       position   lat  39 0492127  lng  -111 1435662       map  this map

User · Answer

You can dynamically request icon images from the Google charts api with the urls   http   chart apis google com chart chst d map pin letter amp chld  E2 80 A2 FE7569   Which looks like this   the image is 21x34 pixels and the pin tip is at position  10  34   And you ll also want a separate shadow image  so that it doesn t overlap nearby icons    http   chart apis google com chart chst d map pin shadow   Which looks like this   the image is 40x37 pixels and the pin tip is at position  12  35   When you construct your MarkerImages you need to set the size and anchor points accordingly       var pinColor    FE7569       var pinImage   new google maps MarkerImage  http   chart apis google com chart chst d map pin letter amp chld  E2 80 A2     pinColor          new google maps Size 21  34           new google maps Point 0 0           new google maps Point 10  34        var pinShadow   new google maps MarkerImage  http   chart apis google com chart chst d map pin shadow           new google maps Size 40  37           new google maps Point 0  0           new google maps Point 12  35      You can then add the marker to your map with           var marker   new google maps Marker                   position  new google maps LatLng 0 0                    map  map                  icon  pinImage                  shadow  pinShadow                   Simply replace  FE7569  with the color code you re after  Eg    Credit due to Jack B Nimble for the inspiration

User · Answer

Well the closest thing I ve been able to get with the StyledMarker is this   The bullet in the middle isn t quite a big as the default one though  The StyledMarker class simply builds this url and asks the google api to create the marker    From the class use example use   E2 80 A2  as your text  as in    var styleMaker2   new StyledMarker  styleIcon new StyledIcon StyledIconTypes MARKER  text   E2 80 A2   styleIconClass  position new google maps LatLng 37 263477473067  -121 880502070713  map map      You will need to modifiy StyledMarker js to comment out the lines     if  text         text    text  substr 0 2         as this will trim the text string to 2 characters   Alternatively you could create custom marker images based on the default one with the colors you desire and override the default marker with code such as this   marker   new google maps Marker     map map    position  latlng    icon  new google maps MarkerImage       http   www gettyicons com free-icons 108 gis-gps png 24 needle left yellow 2 24 png       new google maps Size 24  24       new google maps Point 0  0       new google maps Point 0  24

User · Answer

I try two ways to create the custom google map marker  this run code used canvg js is the best compatibility for browser the Commented-Out Code is not support IE11 urrently    x000D   x000D  var marker  x000D  var CustomShapeCoords    16  1 14  21  2 1  25  4 2  28  7 4  30  11 3  30 6  15 74  25 85  26 49  21 02  31 89  15 92  43 86  10 92  31 89  5 9  26 26  1 4  15 74  2 1  11 3  4  7 4  7 1  4 2  11  2 1  16  1 14   x000D   x000D  function initMap     x000D    var map   new google maps Map document getElementById  map      x000D      zoom  13  x000D      center    x000D        lat  59 325  x000D        lng  18 070 x000D        x000D        x000D    var markerOption     x000D      latitude  59 327  x000D      longitude  18 067  x000D      color         000   x000D      text   ha  x000D       x000D    marker   createMarker markerOption   x000D    marker setMap map   x000D    marker addListener  click   changeColorAndText   x000D     x000D   x000D  function changeColorAndText     x000D    var iconTmpObj   createSvgIcon    c00    ok     x000D    marker setOptions    x000D                  icon  iconTmpObj x000D                   x000D     x000D   x000D  function createMarker options    x000D      IE MarkerShape has problem x000D    var markerObj   new google maps Marker   x000D      icon  createSvgIcon options color  options text   x000D      position    x000D        lat  parseFloat options latitude   x000D        lng  parseFloat options longitude  x000D         x000D      draggable  false  x000D      visible  true  x000D      zIndex  10  x000D      shape    x000D        coords  CustomShapeCoords  x000D        type   poly  x000D        x000D        x000D   x000D    return markerObj  x000D     x000D   x000D  function createSvgIcon color  text    x000D    var div       lt div gt  lt  div gt     x000D   x000D    var svg      x000D        lt svg width  32px  height  43px   viewBox  0 0 32 43  xmlns  http   www w3 org 2000 svg  gt     x000D        lt path style  fill  FFFFFF stroke  020202 stroke-width 1 stroke-miterlimit 10   d  M30 6 15 737c0-8 075-6 55-14 6-14 6-14 6c-8 075 0-14 601 6 55-14 601 14 6c0 4 149 1 726 7 875 4 5 10 524c1 8 1 801 4 175 4 301 5 025 5 625c1 75 2 726 5 11 976 5 11 976s3 325-9 25 5 1-11 976c0 825-1 274 3 05-3 6 4 825-5 399C28 774 23 813 30 6 20 012 30 6 15 737z   gt     x000D        lt circle style  fill     color       cx  16  cy  16  r  11   gt     x000D        lt text x  16  y  20  text-anchor  middle  style  font-size 10px fill  FFFFFF   gt     text     lt  text gt     x000D        lt  svg gt   x000D       x000D    div append svg   x000D   x000D    var dd       lt canvas height  50px  width  50px  gt  lt  cancas gt     x000D   x000D    var svgHtml   div 0  innerHTML  x000D   x000D      todo yao gai bu dui x000D    canvg dd 0   svgHtml   x000D   x000D    var imgSrc   dd 0  toDataURL  image png    x000D       scaledSize  and  optimized  false  together seems did the tricky ---IE11   amp  amp   viewBox influent IE scaledSize x000D      var svg     lt svg width  32px  height  43px   viewBox  0 0 32 43  xmlns  http   www w3 org 2000 svg  gt   x000D              lt path style  fill  FFFFFF stroke  020202 stroke-width 1 stroke-miterlimit 10   d  M30 6 15 737c0-8 075-6 55-14 6-14 6-14 6c-8 075 0-14 601 6 55-14 601 14 6c0 4 149 1 726 7 875 4 5 10 524c1 8 1 801 4 175 4 301 5 025 5 625c1 75 2 726 5 11 976 5 11 976s3 325-9 25 5 1-11 976c0 825-1 274 3 05-3 6 4 825-5 399C28 774 23 813 30 6 20 012 30 6 15 737z   gt   x000D              lt circle style  fill     color       cx  16  cy  16  r  11   gt   x000D              lt text x  16  y  20  text-anchor  middle  style  font-size 10px fill  FFFFFF   gt     text     lt  text gt   x000D              lt  svg gt    x000D      var imgSrc    data image svg xml charset UTF-8     encodeURIComponent svg   x000D   x000D    var iconObj     x000D      size  new google maps Size 32  43   x000D      url  imgSrc  x000D      scaledSize  new google maps Size 32  43  x000D       x000D   x000D    return iconObj  x000D     x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt title gt Your Custom Marker  lt  title gt  x000D     lt style gt  x000D         Always set the map height explicitly to define the size of the div x000D           element that contains the map     x000D       map   x000D        height  100   x000D        x000D         Optional  Makes the sample page fill the window     x000D      html  x000D      body   x000D        height  100   x000D        margin  0  x000D        padding  0  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div id  map  gt  lt  div gt  x000D       lt script src  https   canvg github io canvg canvg js  gt  lt  script gt  x000D       lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D       lt script async defer src  https   maps googleapis com maps api js callback initMap  gt  lt  script gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I ve extended vokimon s answer a bit  making it a bit more convenient for changing other properties as well   function customIcon  opts      return Object assign       path   M 0 0 C -2 -20 -10 -22 -10 -30 A 10 10 0 1 1 10 -30 C 10 -22 2 -20 0 0 z M -2 -30 a 2 2 0 1 1 4 0 2 2 0 1 1 -4 0       fillColor    34495e       fillOpacity  1      strokeColor    000       strokeWeight  2      scale  1       opts       Usage   marker setIcon customIcon     fillColor    fff     strokeColor    000         Or when defining a new marker   const marker   new google maps Marker     position        lat           lng             icon  customIcon       fillColor    2ecc71          map  map

User · Answer

You can use this code it works fine    var pinImage   new google maps MarkerImage  http   www googlemapsmarkers com v1 009900     lt br gt    var marker   new google maps Marker               position  yourlatlong              icon  pinImage              map  map

User · Answer

Using swift and Google Maps Api v3  this was the easiest way I was able to do it   icon   GMSMarker markerImageWithColor UIColor blackColor      hope it helps someone

User · Answer

Sometimes something really simple  can be answered complex  I am not saying that any of the above answers are incorrect  but I would just apply  that it can be done as simple as this   I know this question is old  but if anyone just wants to change to pin or marker color  then check out the documentation  https   developers google com maps documentation android-sdk marker  when you add your marker simply set the icon-property   GoogleMap gMap  LatLng latLng          write your code         gMap addMarker new MarkerOptions        position latLng       icon BitmapDescriptorFactory defaultMarker BitmapDescriptorFactory HUE GREEN      There are 10 default colors to choose from  If that isn t enough  the simple solution  then I would probably go for the more complex given in the other answers  fulfilling a more complex need   ps  I ve written something similar in another answer and therefore I should refer to that answer  but the last time I did that  I was asked to post the answer since it was so short  as this one

User · Answer

These are custom Circular markers  small red    data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC NUlH5v9rF5f ZoCAwHaig8B8oPhOmKC1NU P  7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv VqtJAAAAAElFTkSuQmCC   small yellow   data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC NijL7v3p1 v8zZ6rAdGCg4X g EyYorS0NNv    PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg     small green   data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746 X VmSowbRho B8oPhOmKM02zfb TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT  K9KQAAAABJRU5ErkJggg     small blue   data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56  n9V1RkwbWgY B8oPhOmKM3WNu3 zJn MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9 SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk i9OhipcQAAAAAElFTkSuQmCC   small purple   data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC NMov6vzp99f8zVWfAdKBh4H g EyYorQ027T  2f x8CxFrEghbEgRQcOFB Aqmhv4V6Qor0gRQ8ftj Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg     They are 9x9 png images    Once they re on your page you can just drag them off and you ll have the actual png file

User · Answer

Here is a nice solution using the Gooogle Maps API itself  No external service  no extra library  And it enables custom shapes and multiple colors and styles  The solution uses vectorial markers  which googlemaps api calls Symbols   Besides the few and limited predefined symbols  you can craft any shape of any color by specifying an SVG path string  Spec    To use it  instead of setting the  icon  marker option to the image url  you set it to a dictionary containing the symbol options  As example  I managed to craft one symbol that is quite similar to the standard marker   function pinSymbol color        return           path   M 0 0 C -2 -20 -10 -22 -10 -30 A 10 10 0 1 1 10 -30 C 10 -22 2 -20 0 0 z M -2 -30 a 2 2 0 1 1 4 0 2 2 0 1 1 -4 0           fillColor  color          fillOpacity  1          strokeColor    000           strokeWeight  2          scale  1           var marker   new google maps Marker      map  map     position  new google maps LatLng latitude  longitude      icon  pinSymbol   FFF            I you are careful to keep the shape key point at 0 0 you avoid having to define marker icon centering parameters  Another path example  the same marker without the dot       path   M 0 0 C -2 -20 -10 -22 -10 -30 A 10 10 0 1 1 10 -30 C 10 -22 2 -20 0 0 z       And here you have a very simple and ugly coloured flag       path   M 0 0 -1 -2 V -43 H 1 V -2 z M 1 -40 H 30 V -20 H 1 z       You can also create the paths using a visual tool like Inkscape  GNU-GPL  multiplatform   Some useful hints    Google API just accepts a single path  so you have to turn any other object  square  cercle     into a path and join them as a single one  Both commands at the Path menu  To move the path to the  0 0   go to the Path Edit mode  F2  select all the control nodes and drag them  Moving the object with F1  won t change the path node coords  To ensure the reference point is at  0 0   you can select it alone and edit the coords by hand on the top toolbar  After saving the SVG file  which is an XML  open it with an editor  look for the svg path element and copy the content of the  d  attribute

User · Answer

Combine a symbol-based marker whose path draws the outline  with a     character for the center  You can substitute the dot with other text   A    B   etc   as desired   This function returns options for a marker with the a given text  if any   text color  and fill color  It uses the text color for the outline   function createSymbolMarkerOptions text  textColor  fillColor        return           icon                path   M 0 0 C -2 -20 -10 -22 -10 -30 A 10 10 0 1 1 10 -30 C 10 -22 2 -20 0 0 z               fillColor  fillColor              fillOpacity  1              strokeColor  textColor              strokeWeight  1 8              labelOrigin    x  0  y  -30                      label                text  text                     color  textColor

User · Answer

change it to chart googleapis com for the path  otherwise SSL won t work

[google-maps-api-3] Google Maps API 3 - Custom marker color for default (dot) marker

Examples related to google-maps-api-3