google-map-react
google-map-react copied to clipboard
Re-center map if new center property value equals to previous one, but map was re-positioned manually
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:
- Click 'Locate Me' button - map would be centered to the detected location.
- Move the map.
- 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.