Реагировать js реагировать- google-maps -api изменить цвет маркера по умолчанию

Question

Я хотел бы изменить цвет маркера по умолчанию, но у меня ничего не получается.

Я пробовал со стилем, но, похоже, он не работает.

В официальном В документации сказано, что вы можете поменять значок на другой, передав путь, но я бы хотел использовать значок по умолчанию, но изменить только его цвет.

Код:

   <Marker
          key={place.id}
          position={place.pos}
          label={key+"-"+key}
          onLoad={marker => markerLoadHandler(marker, place)}
          onClick={event => markerClickHandler(event, place)}
          // Not required, but if you want a custom icon:
          /*icon={{
            path: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
            //path: mapRef.FORWARD_CLOSED_ARROW,
            fillColor: "#0000ff",
            fillOpacity: 1.0,
            strokeWeight: 0,
            scale: 1.25,
            strokeColor: "0000ff",
          }}*/
          //icon={"http://maps.google.com/mapfiles/ms/icons/blue-dot.png"}
          style={{
            backgroundColor: "#0000ff",
            fillColor: "#0000ff",
            strokeColor: "0000ff",
          }}
        />

Answer 1

пожалуйста, попробуйте что-то вроде этого:

{myPlaces.map(place => (
        <Marker
          key={place.id}
          position={place.pos}
          onLoad={marker => {
            const customIcon = (opts) => Object.assign({
              path: 'M12.75 0l-2.25 2.25 2.25 2.25-5.25 6h-5.25l4.125 4.125-6.375 8.452v0.923h0.923l8.452-6.375 4.125 4.125v-5.25l6-5.25 2.25 2.25 2.25-2.25-11.25-11.25zM10.5 12.75l-1.5-1.5 5.25-5.25 1.5 1.5-5.25 5.25z',
              fillColor: '#34495e',
              fillOpacity: 1,
              strokeColor: '#000',
              strokeWeight: 1,
              scale: 1,
            }, opts);

            marker.setIcon(customIcon({
              fillColor: 'green',
              strokeColor: 'white'
            }));
            return markerLoadHandler(marker, place)
          }}
          onClick={event => markerClickHandler(event, place)}
        />
      ))}

https://codesandbox.io/s/react-google-maps-api-tl0sk?fontsize=14&hidenavigation=1&theme=dark