feat(map): add padding option to defaultBounds (#392)

Add an additional property `padding` to the `defaultBounds` prop to control the padding around the area specified by the bounds.

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 `<Map>` 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

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]

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<MapProps>) => {

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