google-maps-react icon indicating copy to clipboard operation
google-maps-react copied to clipboard

Map onDragStart/onDragEnd not firing

Open joeyfigaro opened this issue 5 years ago • 4 comments

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.

joeyfigaro avatar Mar 05 '19 16:03 joeyfigaro

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

joeyfigaro avatar Mar 05 '19 16:03 joeyfigaro

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

nitelite avatar Apr 09 '19 14:04 nitelite

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.

BorjaL avatar Sep 13 '19 17:09 BorjaL

Please see my comment how to use it here https://github.com/fullstackreact/google-maps-react/issues/518

ivan133 avatar Oct 28 '21 11:10 ivan133