setBounds, setZoom, and panTo on GeoSearch React InstantSearch Widget

With React InstantSearch.js, I can’t seem to reach the map object to manipulate it.

The goal is to accomplish what this fiddle is demo’ing:

I want to reserve a portion of the map (provided by GoogleMapsLoader) for displaying results / cards. The fiddle shows it as a “Tile Overlay”.

The purpose is to display a full page map but reserve the top 50% for markers and the bottom 50% for cards (as a slider).

If I can snag the google map object in your widget, I think I can take it from there.

Is this possible?

Hi @drupalphil, i’m actually trying to manipulate the zoom ratio of the map but i’m unable to manipulate the map object. Did you find a solution ?

Yes! I ended up using this for guidance:

In the docs there, you’ll find this line:

const [map, setMap] = React.useState();

React.useEffect(() => {
  if (ref.current && !map) {
    setMap(new window.google.maps.Map(ref.current, {}));
  }
}, [ref, map]);

That said, if you can switch, Mapbox has a much more robust (and React-friendly) api for this.

1 Like