I would like to change the color of the default marker, but I am not succeeding.

I tried with the style but it doesn't seem to work.

In the official documentation, it says that you can change the icon with another by passing the path, but what I would like to do is use the default one, but only change the color of it.

Code:

   <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: ".png",
            //path: mapRef.FORWARD_CLOSED_ARROW,
            fillColor: "#0000ff",
            fillOpacity: 1.0,
            strokeWeight: 0,
            scale: 1.25,
            strokeColor: "0000ff",
          }}*/
          //icon={".png"}
          style={{
            backgroundColor: "#0000ff",
            fillColor: "#0000ff",
            strokeColor: "0000ff",
          }}
        />

I would like to change the color of the default marker, but I am not succeeding.

I tried with the style but it doesn't seem to work.

In the official documentation, it says that you can change the icon with another by passing the path, but what I would like to do is use the default one, but only change the color of it.

Code:

   <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./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./mapfiles/ms/icons/blue-dot.png"}
          style={{
            backgroundColor: "#0000ff",
            fillColor: "#0000ff",
            strokeColor: "0000ff",
          }}
        />

• javascript
• reactjs
• google-maps
• google-maps-markers
• marker

• try ` color : "#0000ff" ` – Sina Farhadi Commented Jan 16, 2020 at 10:03
• It doesn't work: codesandbox.io/s/react-google-maps-api-2q3h4 – Paul Commented Jan 16, 2020 at 10:05

2 Answers 2

please try something like this:

{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

2024 Answer

tl;dr This package is no longer supported. Use the react-google-maps package if you can.

In the Marker object, you can set the icon properties. To change the color, set the fillColor and fillOpacity. This package requires that you provide an SVG path for the marker too so you'll need to find a marker path that looks similar to the default one:

<GoogleMap
      
    >
      {markers.map((marker) => {
      

        return (
          <Marker
            key={marker.id}
            onMouseOver={() => {
              console.log("mouse over");
            }}
options={{
              icon: {
                path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
                fillColor: "#000000",
                fillOpacity: 1,
              },
            }}
            position={{
              lat: marker.coordinate!.lat,
              lng: marker.coordinate!.lng,
            }}
          />
        );
      })}
    </GoogleMap>

The official docs site for this package is down, but you can access them here.

Better Option

There is now an official react-google-maps package that has support for all of the official APIs, including the AdvancedMarker ponent.

First wrap your parent ponent with the APIProvider ponent. This is required to use the Google map hooks:

import React from 'react';
import {createRoot} from 'react-dom/client';
import {APIProvider, Map} from '@vis.gl/react-google-maps';

const App = () => (
  <APIProvider apiKey={API_KEY}>
    <MyMap />
  </APIProvider>
);

Then, in your map ponent, use the AdvancedMarker ponent and change the pin color:

export default function MyMap() {
  const map = useMap();

  return (
    <Map
      mapId={"my-map"}
      id="google-map"
      style={{ width: "100vw", height: "100vh" }}
      defaultCenter={center}
      defaultZoom={14}
      gestureHandling={"greedy"}
      disableDefaultUI={true}
    >
      {markers.map((marker) => {
        return (
          <AdvancedMarker
            key={marker.id}
            position={{
              lat: marker.coordinate!.lat,
              lng: marker.coordinate!.lng,
            }}
          >
            <Pin
              background={"#0f9d58"}
              borderColor={"#0a32c3"}
              glyphColor={"#d6c11b"}
            ></Pin>
          </AdvancedMarker>
        );
      })}
    </Map>
  );
}

You can read more about defining custom paths in the Google Map docs.