react-instantsearch

react-instantsearch copied to clipboard

Using the latest react-instantsearch and have an odd behavior where the map zooms out every time the map is moved.

Here's a video of the bug: https://youtu.be/emmX_4k14vI

My component is pretty bare bones:

class SearchContainer extends Component {
  render() {
    return (
      <div className="home-search nav-margin">
        <Container>
          <InstantSearch
            appId={"TPZU3N3QU7"}
            apiKey={"c08b0985768ff14b1a71a96cb1f2884b"}
            indexName={"properties"}
          >
            <GoogleMapsLoader
              apiKey={"AIzaSyBawL8VbstJDdU5397SUX7pEt9DslAwWgQ"}
            >
              {google => (
                <GeoSearch google={google}>
                  {({ hits }) => (
                    <Fragment>
                      <Control />
                      <Fragment>
                        {hits.map(hit => (
                          <HomeSearchCustomMarker
                            showProperty={this.showProperty.bind(this)}
                            property={hit}
                          />
                        ))}
                      </Fragment>
                    </Fragment>
                  )}
                </GeoSearch>
              )}
            </GoogleMapsLoader>
          </InstantSearch>
        </Container>
      </div>
    );
  }
}

Indeed there is an issue with Google Maps when the container of the map has dimensions that are not rounded pixel (here is an example that demonstrates the issue with Google Maps alone). Could you check that your container has integer dimensions? The only solution to avoid this issue is to use rounded numbers for the dimensions of the container.

In case you have rounded numbers for the container, could you provide us a working example of the issue? It will help a lot to better understand where the problem come from. Here is a template for the example.

@samouss yeah it was an issue with float dimensions. Thanks.

Thanks for the answer! I'll let the issue opened until we (or Google Maps) fix the issue.

Thanks @francoischalifour for finding this issue! We have been pulling out hair out trying to figure out why this happens. Also in the process of testing rounded pixel container size for our map. I'll keep you posted.

UPDATE I spent some time testing this with our example. Indeed there is an issue with decimal pixel widths. However, it seems that it does not happen for increments of .5. Here is a link to a recording I made: https://streamable.com/5d5bh

As you can see, when the container width is 1105.5px the behavior does not occur and at 1116.23px the behavior does occur.

Our frontend dev is working on a solution now. Thank you for the find!

@samouss Is there a google map github issue we can follow?

@concertcoder Unfortunately Google Map SDK is not open sourced. There is an issue tracker on Google where I've open an issue a while ago, but it was closed Won't Fix (Intended Behavior).

https://issuetracker.google.com/u/1/issues/116827958

I think we should fix the issue on our side. Last time I checked if we provide a negative value to the padding e.g. -1 it did worked. The problem is to ensure that it works for most cases. You can give this solution a shot, otherwise you have to ensure that the width & height are rounded numbers.

So this issue pointed me in the right direction of what was going on one of our sites. Here is my implementation of the fix:

// Resize map element's by rounding down width to closest integer
$(window).on('resize', function(){
  $('#map').width(function(index, currentwidth) {
	return Math.floor($(this).parent('.map-container').width());
  });
}).trigger('resize');

Another issue on that. Solution is provided above to use fixed dimensions for the MAP Wrapper. BUT: We have clients still using IE11 and therefore the behaivor is a weird zoom again although the MAP Wrapper has fixed dimensions. Any ideas?

Hi - is there any updates are workarounds for this issue? I know we can set fixed widths / heights but unfortunately, if a user zooms in or out the browser window, this can still result in the containing div having float dimensions and displaying this bug.

EDIT: FYI the only way I found a way around this was to use const boundingBoxPadding = !currentRefinement ? undefined : -1; but that obviously requires a fork or copy/paste which is not ideal.

Google Maps seems to behave as expected now in containers with float values.

Feel free to reopen and attach a reproduction sandbox if necessary.