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

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_

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 = $("<div></div>");_x000D_
_x000D_
  var svg = $(_x000D_
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +_x000D_
    '<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"/>' +_x000D_
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +_x000D_
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +_x000D_
    '</svg>'_x000D_
  );_x000D_
  div.append(svg);_x000D_
_x000D_
  var dd = $("<canvas height='50px' width='50px'></cancas>");_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  &&  viewBox influent IE scaledSize_x000D_
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'_x000D_
  //    + '<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"/>'_x000D_
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'_x000D_
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'_x000D_
  //    + '</svg>';_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_

<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
  <meta charset="utf-8">_x000D_
  <title>Your Custom Marker </title>_x000D_
  <style>_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_
  </style>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
  <div id="map"></div>_x000D_
    <script src="https://canvg.github.io/canvg/canvg.js"></script>_x000D_
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

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

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

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

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

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

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

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

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

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    Blue marker Red marker Purple marker Yellow marker Green marker   Use the following piece of code to update default markers with different colors    BitmapDescriptorFactory defaultMarker BitmapDescriptorFactory HUE ROSE

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

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

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

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

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

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

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

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

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

Examples related to google-maps-api-3