Google-maps-react: Map onDragStart/onDragEnd not firing

Created on 5 Mar 2019  路  3Comments  路  Source: fullstackreact/google-maps-react

version: 9.4.5

Map doesn't seem to support onDragEnd or onDragStart-they aren't being called no matter what I try.

<GoogleMap
          disableDefaultUI={this.props.disableDefaultUI}
          google={this.props.google}
          initialCenter={this.props.initialCenter}
          zoom={this.props.zoom}
          mapTypeId={this.props.google.maps.MapTypeId.HYBRID}
          onClick={this.handleClick}
          onReady={this.handleMapReady}
          onDragEnd={this.handleDragEnd}
          onDragStart={(x, y) => {
            console.log('drag started');
            console.log(x);
            console.log(y);
          }}
/>

onMapReady and onClick both seem to work.

Most helpful comment

The event prop is called onDragend, not onDragEnd, isn't it?

All 3 comments

For anyone else who ends up here, I'm currently getting around this by setting up event listeners by hand inside my onReady handler:

  handleMapReady = (mapProps, map) => {
    map.addListener('projection_changed', () => {
      Map.instance = map;
      this.setState({ projectionAvailable: true });
    });

    map.addListener('dragend', () => {
      console.log({ lat: map.center.lat(), lng: map.center.lng() });
    });

    console.warn('Map is ready. Setting projection and map type.');

    return map.setMapTypeId && map.setMapTypeId(this.props.type);
  };

The event prop is called onDragend, not onDragEnd, isn't it?

There is an error in the code. All events are _camelized_ but only taking whitespaces in account.
Events like bounds_changed or zoom_changed have to be called onBounds_changed and onZoom_changed respectively.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

anushreepatil picture anushreepatil  路  5Comments

EmmaU25 picture EmmaU25  路  3Comments

ranleung picture ranleung  路  4Comments

rullymartanto picture rullymartanto  路  5Comments

iansu picture iansu  路  4Comments