React-google-maps: bounds property on <GoogleMap> does not work

[TomCaserta]

I cannot seem to set the bounds on a GoogleMap component. As far as I can tell you are supposed to set the "bounds" property to be a LngLatBounds object.

As a work around to this I attempted to call the fitBounds function directly once the component had been mounted however the map state did not exist (yet). Is there a event for when the map has initialised?

[solace]

@TomCaserta

Edit (two options)

1. On the ref. Add your fitBounds to the mapLoaded(map) function.

<GoogleMap
   ref={this.mapLoaded}
</GoogleMap

1. On tilesloaded event, although there's a delay for the update until well, the tiles are loaded. Add fitBounds to the tilesLoadedHandler using the map ref.

<GoogleMap
   ref="map"
   ...
   onTilesloaded={this.tilesLoadedHandler} >
</GoogleMap

[mmahalwy]

@solace option one is what i am using and works well until the parent is rerendered... any solution to that?

[solace]

@mmahalwy : Does this help: https://gist.github.com/solace/edfade8f48ce03de5ef9a1221e1c26b2 ?

It seems a bit involved, but it's what got it working for me. If anyone knows of a more elegant solution, would love to hear it.

[tomchentw]

We're going to look into this shortly. Close for now

We're also looking for maintainers. Involve in #266 to help strengthen our community!

[davidpelayo]

@solace example incompleted. Also utils aren't available.

Anyone knows a better solution? I'm looking at how to solve the same issue, and there is no docs for doing proper fitBounds with your current markers in a markerClusterer.

[solace]

It wasn't meant to be a complete solution, just point people in the right direction.

You may have to take a look inside the lib in node_modules to figure out what will work for you. Those same files will also have the functions so you can see what params they need you to pass in. If it helps, grep for the functions used to find file they're in.

Based on how you're implementing it, you will also need to dump your objects to see what values are available to you. It took me some trial and error to find the right combination, which is why the gist says 'YMMV'.

Good luck.

[davidpelayo]

@solace, your rebuildMarkers function looks like this now (and works):

rebuildMarkers(markers) {
    const newBounds = new google.maps.LatLngBounds();

    if (markers.length) {
      const latLongMarkersArray = map(markers, m => pick(m, ['longitude', 'latitude']));
      each(latLongMarkersArray, (marker) => newBounds.extend(new google.maps.LatLng(marker.latitude, marker.longitude)));
    }

    if (newBounds && this.refs.map && this.refs.map.fitBounds) {
      this.refs.map.fitBounds(newBounds);
      const newBoundsCenter = newBounds.getCenter();
      const newCenter = {
        lat: newBoundsCenter.lat(),
        lng: newBoundsCenter.lng()
      };

      const newState = {
        center: newCenter,
        zoom: this.refs.map.getZoom(),
        bounds: newBounds
      };

      this.setState(newState);
    }
}

Edit: Only using componentWillReceiveProps and rebuildMarkers. The onChange event doesn't get fired at the Map level.

[solace]

I'm glad you found a solution for your problem.

I can't recall at this point, and am not going to go check, but the onChange may have been to handle zoom in/out and dragging of the map to update the positions, otherwise when new markers come in from props, the center and bounds would jump away from where the user had them.

Of course, I could be wrong.

[davidpelayo]

@solace Now is named onCenterChanged.

[ryan-hamblin]

so.... @tomchentw did fitBounds() get removed from the 'ref'. When I log this.refs.map (after putting a ref on the GoogleMap component I don't see 'fitBounds' anywhere. I can't see the ref in CDM() function, but I see it when I log it in the render portion of the component.