Need to change markers from circle to icon in react-google-charts GeoChart

I am using react-google-charts library for my personal project and found there is a way to display markers on the map.

      <Chart
        width={"200%"}
        height={"100%"}
        chartType="GeoChart"
        data={geoData}
        rootProps={{ "data-testid": "1" }}
        mapsApiKey="***My Key***"
        options={{
          displayMode: "markers",
          sizeAxis: { maxSize: 10, minSize: 10 },
          markerOpacity: 0.9,
          backgroundColor: "none",
          colors: ["#FFA4A5", "#34D399"],
          legend: "none",
          datalessRegionColor: "#343434",
        }}
       />
      

But the default marker is circle, and then I am gonna change it to my favorite icon. In a word, I want to customize the marker with my favorite one.

Is there any way to change/customize the markers in using react-google-charts?

I checked the options for geoChart APIs, but it seems there are not such relevant options.

Unfortunately GeoChart does not have marker customization support.

You can however use the google-maps package for this:

npm install google-maps

In your code:

 import React, { Component } from "react";
    import { GoogleMap, Marker } from "google-maps-react";
    
    class MapContainer extends Component {
      render() {
        const mapStyles = {
          width: "100%",
          height: "100%",
        };
    
        return (
          <div style={mapStyles}>
            <GoogleMap
              google={this.props.google}
              zoom={10}
              initialCenter={{ lat: 37.7749, lng: -122.4194 }}
            >
              <Marker
                position={{ lat: 37.7749, lng: -122.4194 }}
                icon={{
                  url: "path/to/your/custom/icon.png",
                  scaledSize: new window.google.maps.Size(50, 50),
                }}
              />
            </GoogleMap>
          </div>
        );
      }
    }
    
    export default GoogleApiWrapper({
      apiKey: "YOUR_API_KEY",
    })(MapContainer);

Replace YOUR_API_KEY, with your API key.

Don't forget to render your map in your application:

import React from "react";
import MapContainer from "./MapContainer";

function App() {
  return <MapContainer />;
}

export default App;

The google-maps-react library itself does not provide direct support for coloring countries or areas on the map. However, you can achieve this effect by utilizing the Google Maps JavaScript API directly.

To color countries or areas on the map, you can use the Data Layer of the Google Maps JavaScript API. Here's an example of how you can modify your code to achieve this:

import React, { Component } from "react";
import { GoogleApiWrapper, Map, Marker } from "google-maps-react";

class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef();
  }

  componentDidMount() {
    const { google } = this.props;
    const map = this.mapRef.current.map;

    // Create a new Data Layer
    const dataLayer = new google.maps.Data();

    // Set the map for the Data Layer
    dataLayer.setMap(map);

    // Define the style for the colored areas
    const areaStyle = {
      fillColor: "red",
      fillOpacity: 0.5,
      strokeWeight: 1,
      strokeColor: "red",
    };

    // Create a new GeoJSON feature
    const feature = {
      type: "Feature",
      properties: {},
      geometry: {
        type: "Polygon",
        coordinates: [
          // Add the coordinates for the desired country/area
          // For example, the coordinates for the United States
          [
            [-125, 50],
            [-125, 24],
            [-66, 24],
            [-66, 50],
            [-125, 50],
          ],
        ],
      },
    };

    // Add the feature to the Data Layer
    dataLayer.addGeoJson(feature);

    // Apply the style to the feature
    dataLayer.setStyle(areaStyle);
  }

  render() {
    const mapStyles = {
      width: "100%",
      height: "100%",
    };

    return (
      <div style={mapStyles}>
        <Map
          google={this.props.google}
          zoom={4}
          initialCenter={{ lat: 37.7749, lng: -122.4194 }}
          ref={this.mapRef}
        >
          <Marker
            position={{ lat: 37.7749, lng: -122.4194 }}
            icon={{
              url: "path/to/your/custom/icon.png",
              scaledSize: new window.google.maps.Size(50, 50),
            }}
          />
        </Map>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "YOUR_API_KEY",
})(MapContainer);

To make the earth gray and other areas a different color:

import React, { Component } from "react";
import { GoogleApiWrapper, Map, Marker, DataLayer } from "google-maps-react";

class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef();
  }

  render() {
    const mapStyles = {
      width: "100%",
      height: "100%",
    };

    const areaStyle = {
      fillColor: "red",
      fillOpacity: 0.5,
      strokeWeight: 1,
      strokeColor: "red",
    };

    const earthStyle = {
      fillColor: "gray",
      fillOpacity: 1,
      strokeWeight: 0,
    };

    return (
      <div style={mapStyles}>
        <Map
          google={this.props.google}
          zoom={2}
          initialCenter={{ lat: 0, lng: 0 }}
          ref={this.mapRef}
        >
          <DataLayer>
            <Map
              google={this.props.google}
              zoom={2}
              initialCenter={{ lat: 0, lng: 0 }}
              ref={this.mapRef}
            >
              <DataLayer
                options={{
                  style: earthStyle,
                }}
              />
              <DataLayer
                options={{
                  style: areaStyle,
                }}
                feature={{
                  type: "Feature",
                  properties: {},
                  geometry: {
                    type: "Polygon",
                    coordinates: [
                      // Add the coordinates for the desired country/area
                      // For example, the coordinates for the United States
                      [
                        [-125, 50],
                        [-125, 24],
                        [-66, 24],
                        [-66, 50],
                        [-125, 50],
                      ],
                    ],
                  },
                }}
              />
            </Map>
          </DataLayer>
          <Marker
            position={{ lat: 37.7749, lng: -122.4194 }}
            icon={{
              url: "path/to/your/custom/icon.png",
              scaledSize: new window.google.maps.Size(50, 50),
            }}
          />
        </Map>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "YOUR_API_KEY",
})(MapContainer);