-
Notifications
You must be signed in to change notification settings - Fork 817
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to call fitBounds() or center the map such that it shows all markers? #63
Comments
Well I see it's quite empty here. So I'll respond with at least some suggestion(not the best but could help). Warning Typescript syntax! :) So, use onReady attribute and in Map tag and define your callback there. <Map google={googleMap} And for callback fetchPlaces(mapProps, map)
interface IMapPoint { lat: number, lng: number }; //TODO: use some less primitive function in the future
P.S. This is very "quick&dirty" solution, I'm sure you can find other approach or make it more elegant. As for the interface, it's optional in this case, you can get rid of it. |
any updates on this issue? |
@marikvntu Where did you find typescript definitions? Or did you make them yourself? Care to share? |
I used this comment from a different package, and it appears to work fine: Only difference for me was that I had to use the ".map" on the ref.
|
I tried this way to auto-center and auto-zoom the map. const markerList = [{
name : 'name',
position : {
lat : 0,
lng : 0
}
}, ...]; // set of markers
adjustMap(mapProps, map) {
const {google, markers} = mapProps;
const bounds = new google.maps.LatLngBounds();
markers.forEach(marker => {
const {lat, lng} = marker.position;
bounds.extend(new google.maps.LatLng(lat, lng));
});
map.fitBounds(bounds);
// map.panToBounds(bounds);
} <Map
google={google}
initialCenter={position}
// like this ↓↓
onReady={this.adjustMap}
>
{markers.map(marker => <Marker />))}
</Map> |
No description provided.
The text was updated successfully, but these errors were encountered: