diff --git a/docs/api-reference/components/map.md b/docs/api-reference/components/map.md index 13577cf8..9253b40f 100644 --- a/docs/api-reference/components/map.md +++ b/docs/api-reference/components/map.md @@ -214,11 +214,17 @@ The initial state of the camera. This can be used to leave the map component in uncontrolled mode. When both a default-value and a controlled value are present for a parameter, the controlled value takes precedence. -#### `defaultBounds`: [google.maps.LatLngBoundsLiteral][gmp-llb] +#### `defaultBounds`: object An alternative way to specify the region that should initially be visible on the map. Has otherwise the same effect as `defaultCenter` and `defaultZoom`. +The `defaultBounds` type is an extension of [google.maps.LatLngBoundsLiteral][gmp-llb] +that can also contain the optional property `padding`: number | [google.maps.Padding][gmp-pad] +that represents padding in pixels for the initial view. +The bounds will be fit in the part of the map that remains after padding is removed. +A number value will yield the same padding on all 4 sides. + #### `controlled`: boolean This Indicates that the map will be controlled externally. Disables all controls @@ -324,6 +330,7 @@ to get access to the `google.maps.Map` object rendered in the `` component. [gmp-map-options]: https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions [gmp-map-events]: https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events [gmp-llb]: https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLngBoundsLiteral +[gmp-pad]: https://developers.google.com/maps/documentation/javascript/reference/coordinates#Padding [gmp-ll]: https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLngLiteral [gmp-coordinates]: https://developers.google.com/maps/documentation/javascript/coordinates [gmp-mapid]: https://developers.google.com/maps/documentation/get-map-id diff --git a/src/components/__tests__/map.test.tsx b/src/components/__tests__/map.test.tsx index efb1f85d..dd4f0484 100644 --- a/src/components/__tests__/map.test.tsx +++ b/src/components/__tests__/map.test.tsx @@ -166,6 +166,20 @@ describe('camera configuration', () => { [{zoom: 1}, true], [{defaultZoom: 1}, true], [{defaultBounds: {north: 1, east: 2, south: 3, west: 4}}, false], + [ + { + defaultBounds: { + north: 1, + east: 2, + south: 3, + west: 4, + padding: { + left: 50 + } + } + }, + false + ], [{defaultCenter: {lat: 0, lng: 0}, zoom: 0}, false], [{center: {lat: 0, lng: 0}, zoom: 0}, false], [{center: {lat: 0, lng: 0}, defaultZoom: 0}, false] diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx index 3c74d830..556bed8a 100644 --- a/src/components/map/index.tsx +++ b/src/components/map/index.tsx @@ -79,7 +79,9 @@ export type MapProps = google.maps.MapOptions & /** * Alternative way to specify the default camera props as a geographic region that should be fully visible */ - defaultBounds?: google.maps.LatLngBoundsLiteral; + defaultBounds?: google.maps.LatLngBoundsLiteral & { + padding?: number | google.maps.Padding; + }; }; export const Map = (props: PropsWithChildren) => { diff --git a/src/components/map/use-map-instance.ts b/src/components/map/use-map-instance.ts index ffe8795e..f8cf3dc1 100644 --- a/src/components/map/use-map-instance.ts +++ b/src/components/map/use-map-instance.ts @@ -140,7 +140,8 @@ export function useMapInstance( addMapInstance(map, id); if (defaultBounds) { - map.fitBounds(defaultBounds); + const {padding, ...defBounds} = defaultBounds; + map.fitBounds(defBounds, padding); } // prevent map not rendering due to missing configuration