skip to Main Content

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.

2

Answers


  1. 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);
    
    Login or Signup to reply.
  2. 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;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search