change cursor to pointer google-maps-react

Question

I am using google-maps-react. By default, when I put the mouse on map, it shows a hand cursor. I would like to set a normal pointer when person hover on map, and only when start dragging, the cursor become again a hand cursor.

I was trying to set draggableCursos prop in many ways, but I didnt get what I wanted.

Thank You for help in advance.

Answer 1

It appears the current version (2.0.2) of google-maps-react package published in npm does not support to specify a few properties including MapOptions.draggableCursor and MapOptions.draggingCursor via Map component. In such a cases those properties could be specified via native map object. The following example demonstrates it

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

  handleMapReady(mapProps,map) {
    map.setOptions({
      draggableCursor: "default",
      draggingCursor: "pointer"
    });
  }



  render() {
    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={this.props.zoom}
          initialCenter={this.props.center}
          onReady={this.handleMapReady}
        />
      </div>
    );
  }
}

Here is a demo

Answer 2

You can add a custom className to the map and attach an event that will change the pointer-events CSS property on the map.