Cant drag or zoom map when directions are on

[zlwaterfield]

I have the directions showing, they are working, but when you drag or zoom the map it defaults back to where the directions are. It is like the map is locked on the directions.

GIF to show => http://g.recordit.co/R3sDpLyqB6.gif

        <GoogleMapLoader
          containerElement={
            <div
              {...this.props}
              style={{ height: '100%' }}
            />
          }
          googleMapElement={
            <GoogleMap
              ref='map'
              defaultZoom={14}
              defaultCenter={{lat: this.props.center[0], lng: this.props.center[1]}}
              onDragend={this.handleBoundsChange}
              onIdle={this.handleBoundsChange}>
              { this.props.directions ? <DirectionsRenderer directions={this.props.directions} /> : null }
              { (this.props.directions === null) &&
                <MarkerClusterer
                  averageCenter
                  enableRetinaIcons
                  styles={clusterStyles}
                  gridSize= {25} >
                  { this.props.locations.map((location, i) => {
                    const geometry = location.address.geometry.location
                    let icon = '/images/marker.png'
                    if (location._id === this.state.hoverMarker || location._id === this.props.locationId) {
                      icon = '/images/marker-hover.png'
                    }
                    return (
                      <Marker
                        position={{ lat: geometry.lat, lng: geometry.lng }}
                        onClick={this.props.openModal.bind(this, location._id, 'location')}
                        onMouseover={this.markerHoverOn.bind(this, location._id)}
                        onMouseout={this.markerHoverOn.bind(this, null)}
                        icon={icon}
                        key={i}
                      />
                    )
                  })}
                </MarkerClusterer> ||
                null
              }
            </GoogleMap>
          }
        />
`

[JoshuaGross]

What version are you using? I'm seeing similar behaviour on 5.0.0, even with the default search box example (http://react-google-maps.tomchentw.com/#/places/search-box), but not on 4.x.

[tbtommyb]

I am having a similar problem using fitBounds, did either of you find a resolution?

[tomchentw]

@zlwaterfield @JoshuaGross @tbtommyb I'm not sure what's the cause to this. Could you check out if there's any option in DirectionsRenderer that can disable this (because react-google-maps just by-pass everything into Google Maps JavaScript API)? https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRendererOptions

Also, 6.0.0 is released on npm beta tag now. We also have a new demo page. Feel free to try it:
https://tomchentw.github.io/react-google-maps/

[tbtommyb]

@tomchentw In my case it turned out to be because fitBounds was immediately rebounding the map, so I had to change it so that it was only called once when my map's markers were created.

[tomchentw]

Please refer to Getting Help section in the README (or #469).

[adarshks]

@tbtommyb can you please tell me how you managed to call the fitbounds only once after markers were created?? I used the fitbounds method in the onTilesLoaded so it will be calling all the time when i try to zoom.