refactor: replace direct MapContext usage with useMap (#306)

src/components/advanced-marker.tsx

@@ -3,18 +3,17 @@ import React, {
   Children,
   forwardRef,
   useCallback,
-  useContext,
   useEffect,
   useImperativeHandle,
   useMemo,
   useState
 } from 'react';
 
 import {createPortal} from 'react-dom';
-import {GoogleMapsContext} from './map';
+import {useMap} from '../hooks/use-map';
+import {useMapsLibrary} from '../hooks/use-maps-library';
 
 import type {Ref, PropsWithChildren} from 'react';
-import {useMapsLibrary} from '../hooks/use-maps-library';
 
 export interface AdvancedMarkerContextValue {
   marker: google.maps.marker.AdvancedMarkerElement;
@@ -52,7 +51,7 @@ function useAdvancedMarker(props: AdvancedMarkerProps) {
   const [contentContainer, setContentContainer] =
     useState<HTMLDivElement | null>(null);
 
-  const map = useContext(GoogleMapsContext)?.map;
+  const map = useMap();
   const markerLibrary = useMapsLibrary('marker');
 
   const {

src/components/info-window.tsx

@@ -1,14 +1,8 @@
 /* eslint-disable complexity */
-import React, {
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
+import React, {PropsWithChildren, useEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
 
-import {GoogleMapsContext} from './map';
+import {useMap} from '../hooks/use-map';
 
 /**
  * Props for the Info Window Component
@@ -25,7 +19,7 @@ export type InfoWindowProps = google.maps.InfoWindowOptions & {
 export const InfoWindow = (props: PropsWithChildren<InfoWindowProps>) => {
   const {children, anchor, shouldFocus, onCloseClick, ...infoWindowOptions} =
     props;
-  const map = useContext(GoogleMapsContext)?.map;
+  const map = useMap();
 
   const infoWindowRef = useRef<google.maps.InfoWindow | null>(null);
   const [contentContainer, setContentContainer] =

src/components/marker.tsx

@@ -2,13 +2,12 @@
 import React, {
   forwardRef,
   useCallback,
-  useContext,
   useEffect,
   useImperativeHandle,
   useState
 } from 'react';
 
-import {GoogleMapsContext} from './map';
+import {useMap} from '../hooks/use-map';
 
 import type {Ref} from 'react';
 
@@ -28,7 +27,7 @@ export type MarkerRef = Ref<google.maps.Marker | null>;
 
 function useMarker(props: MarkerProps) {
   const [marker, setMarker] = useState<google.maps.Marker | null>(null);
-  const map = useContext(GoogleMapsContext)?.map;
+  const map = useMap();
 
   const {
     onClick,