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

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