google-map-react icon indicating copy to clipboard operation
google-map-react copied to clipboard

Re-center map if new center property value equals to previous one, but map was re-positioned manually

Open undeletable opened this issue 3 years ago • 0 comments

Related to https://github.com/google-map-react/google-map-react/issues/546 Assume the following code:

import React, {Fragment, useEffect, useState} from 'react';
import GoogleMapReact from 'google-map-react';

const Map = () => {
  const [center, setCenter] = useState();

  useEffect(() => {
    window.navigator.geolocation.getCurrentPosition(position => {
      setCenter({
        lat: position.coords.latitude,
        lng: position.coords.longitude
      });
    });
  }, []);

  return <Fragment>
    <GoogleMapReact
      bootstrapURLKeys={{ key: 'my_api_key' }}
      center={center}
      yesIWantToUseGoogleMapApiInternals
    />
  <button
    onClick={() => window.navigator.geolocation.getCurrentPosition(position => {
      setCenter({
        lat: position.coords.latitude,
        lng: position.coords.longitude
      });
    })}
  >
    Locate Me
  </button>
  </Fragment>;
};

Execute the following steps:

  1. Click 'Locate Me' button - map would be centered to the detected location.
  2. Move the map.
  3. Click 'Locate Me' - map would not be centered, even thougn center prop receives the expected value.

center prop value is not changed (on steps 1 and 3 coordinates are the same), but at the same time center prop value is different from actual center. Such a behavior of component might be confusing. IMHO, when deciding whether to re-center map programmatically, it makes sense to compare center value with current actual center.

undeletable avatar Mar 26 '22 14:03 undeletable