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);

Can you try to add the custom CSS using before selector?

.marker-class::before{
content: '';
background: url(image file);
position:absolute;
top:0px;
left:0px;
}