React-google-maps: Custom Marker and Cluster Icons

[jacobokoenig]

Hi,

Is there a simple way to include options in Markers and the MarkerClusterer? I am looking to use my custom icons for both. Ideally something like what is available in javascript:

      var options = {
        styles: [{
          textColor: 'white',
          height: 53,
          url: "images/m1.png",
          width: 53
        },
        {
          textColor: 'white',
          height: 56,
          url: "images/m2.png",
          width: 56
        },
        {
          textColor: 'white',
          height: 66,
          url: "images/m3.png",
          width: 66
        },
        {
          textColor: 'white',
          height: 78,
          url: "images/m4.png",
          width: 78
        },
        {
          textColor: 'white',
          height: 90,
          url: "images/m5.png",
          width: 90
        }],
        maxZoom: 17
      }

      var markerCluster = new MarkerClusterer(map, markers, options);

[L3V147H4N]

👍 also interested in this

[n0ne]

For Marker you can use option icon={}

[hdrdavies]

@jacobo360 did you manage to achieve this?

[jacobokoenig]

No

[L3V147H4N]

I used the icon prop to use my own custom Marker Image:

var markerOk = require('../../../assets/img/google-marker-ok.png');
var markerNoSale = require('../../../assets/img/google-marker-no-sale.png');
var markerNotOk = require('../../../assets/img/google-marker-not-ok.png');

iconUrl = ... (if else choose image)

<Marker
  icon={{
    url: iconUrl
  }}
  onClick={...}>
  ...
</Marker>

[ctrlaltdylan]

Thank you @L3V147H4N that worked like a charm for my needs.

Now I just need to adjust the sizing of the icon and all will be kosher

[tomchentw]

Please refer to Getting Help section in the README (or #469).

[bordi]

@jacobo360 I was struggling with same issue. Properties imagePath and defaultImagePath doesn't worked for me.
So I've just pass property style to MarkerClusterer. See example:

<MarkerClusterer averageCenter enableRetinaIcons styles={[{ textColor: 'white', height: 53, url: "images/m1.png", width: 53 }, { textColor: 'white', height: 56, url: "images/m2.png", width: 56 }, { textColor: 'white', height: 66, url: "images/m3.png", width: 66 }, { textColor: 'white', height: 78, url: "images/m4.png", width: 78 }, { textColor: 'white', height: 90, url: "images/m5.png", width: 90 }]}> ... </MarkerClusterer>

[prashant-andani]

How can we have a conditional styling...
Say size of the icon based on the cluster size...

[mytextbookspdf]

This is my fix

<MarkerClusterer
  averageCenter
  gridSize={40}
  maxZoom={24}
  minimumClusterSize={2}
  styles={[
    {
      url: m1,
      height: 53,
      lineHeight: 53,
      width: 53,
    },
    {
      url: m2,
      height: 56,
      lineHeight: 56,
      width: 56,
    },
    {
      url: m3,
      height: 66,
      lineHeight: 66,
      width: 66,
    },
    {
      url: m4,
      height: 78,
      lineHeight: 78,
      width: 78,
    },
    {
      url: m5,
      height: 90,
      lineHeight: 90,
      width: 90,
    },
  ]}
>
</MarkerClusterer>

[oscarmyepes]

If you want to have a custom Marker with text, styles, etc, this is what worked for me:

<Marker
   ... 
    icon={{
      url: 'data:image/svg+xml;utf8,<svg ... > ... </svg>'
    }}
>
````

The last part **<svg ... > ... </svg>** could be a function that return an svg and you can pass in properties.
````
 icon={{
    url: 'data:image/svg+xml;utf8,getCustomSvg(price, rate)'
    }}
````
Example

export default (price, rate) => <svg xmlns="http://www.w3.org/2000/svg" width="65" height="20" viewBox="0 0 65 20"> <g fill-rule="evenodd"> <text font-size="8.276" font-weight="bold"> <tspan x="4" y="13">${price}</tspan> </text> <text font-size="8.276" font-weight="bold"> <tspan x=".37" y="8">${rate}</tspan> </text> </g> </svg>;
```

Result:

Reference:
https://css-tricks.com/lodge/svg/09-svg-data-uris/

[hariprasath14]

This is my fix

<MarkerClusterer
  averageCenter
  gridSize={40}
  maxZoom={24}
  minimumClusterSize={2}
  styles={[
  {
    url: m1,
    height: 53,
    lineHeight: 53,
    width: 53,
  },
  {
    url: m2,
    height: 56,
    lineHeight: 56,
    width: 56,
  },
  {
    url: m3,
    height: 66,
    lineHeight: 66,
    width: 66,
  },
  {
    url: m4,
    height: 78,
    lineHeight: 78,
    width: 78,
  },
  {
    url: m5,
    height: 90,
    lineHeight: 90,
    width: 90,
  },
  ]}
>
</MarkerClusterer>

i used multipli mustom icon but only two type of custom icon displayed in map??????????