React-google-maps: Using symbol with Marker

[farhan687]

Hello there,

I want to use the symbol within marker, and I am using following code snippet:

<Marker 
              symbol={{
                  path: '<path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />'
              }}
              ...
/>

Am I missing anything?

[mndewitt]

See the Google Maps JS API docs example for adding a custom SVG icon:

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}

So something like:

const icon =
    path: 'M 100 100 L 300 100 L 200 300 z',
    fillColor: 'red',
    strokeColor: 'blue',
    strokeWidth: 3,
  };

...

<Marker icon={icon} />

...May be what you are looking for...

[farhan687]

Hey @mndewitt Thanks a lot. It resolved my issue.

[tomchentw]

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