How to add a draggable circle?

Hey there! I’m using google-map-react with GeoFire and need to implement a draggable circle as in this demo.

I didn’t see any documentation on doing something like this, so decided to try to use the Google Maps API directly. The circle shows up and the hand cursor changes to a pointer when hovering over it, but unfortunately, once I start dragging, the entire map is dragged rather than just the circle. Is there a workaround for this? (example code and screenshot below).

Thanks for the help and for making this great component!

Best, -Jedidiah

  initDraggableCircle({ map, maps }) {
    let circle = new maps.Circle({
      strokeColor: '#6D3099',
      strokeOpacity: 0.7,
      strokeWeight: 1,
      fillColor: '#B650FF',
      fillOpacity: 0.35,
      map: map,
      center: new google.maps.LatLng(...this.props.mapConfig.center),
      radius: this.props.mapConfig.radius * 1000,
      draggable: true
    });
    maps.event.addListener(circle, 'drag', ::this.onCircleDragged);
  }
  render() {
    return (
      <div>
        <h2>Welcome to the map!</h2>
        <div style={{height:"500px"}}>
          <GoogleMap center={this.props.mapConfig.center}
                     defaultZoom={this.props.mapConfig.zoom}
                     onGoogleApiLoaded={::this.initDraggableCircle}
                     yesIWantToUseGoogleMapApiInternals={true}>
            {this.geofireMarkers()}
          </GoogleMap>
        </div>
      </div>
    );
  }

[kjeske]

@kad3nce I see you’ve created MapCircle component. How do you get there the map reference to apply the circle on it? Maybe you could post your implementation for that component, it might be useful.

[hemedani]

please someone create a full documented example for draggable markers