feat(google-map): add language change for map (#9)

* feat(google-map): add language change for map

* refactor(google-map): refactor code

* refactor(map-provider): adjust useEffect hooks

* feat(readme): adjust readme for language and region

* fix(README): correct typo

* 1.4.0

Author: BiniCodes

README.md

@@ -62,6 +62,8 @@ function App() {
       options={mapOptions}
       libraries={['places']}
       mapIds={['<your-mapstyle-id>']}
+      language={'de'}
+      region={'DE'}
       onLoad={(map) => map.setZoom(4)}
     >
       <React.StrictMode>
@@ -100,6 +102,8 @@ Component to wrap around the code where the map should be available.
   options={mapOptions}
   libraries={['places']}
   mapIds={['<your-mapstyle-id>']}
+  language={'de'}
+  region={'DE'}
   onLoad={(map) => map.setZoom(4)}
 >
   {children}
@@ -115,6 +119,8 @@ interface GoogleMapProviderProps {
   options: google.maps.MapOptions;
   libraries: string[];
   mapIds: string[];
+  language: string;
+  region: string;
   onLoad?: (map: google.maps.Map) => void;
 }
 ```

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ubilabs/google-maps-react-hooks",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "React hooks and map context provider for Google Maps",
   "source": "src/index.ts",
   "main": "dist/index.umd.js",

package.json

@@ -7,6 +7,8 @@ interface GoogleMapOptions {
   onLoadScript: () => void;
   onLoadMap: (loadedMap: GoogleMap) => void;
   libraries?: string[];
+  language?: string;
+  region?: string;
   mapIds?: string[];
 }
 
@@ -18,8 +20,7 @@ export default class GoogleMap {
   map?: google.maps.Map;
 
   constructor(options: GoogleMapOptions) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if ((window as any).google) {
+    if (window.google && window.google.maps) {
       this.initMap(options);
     } else {
       this.loadGoogleScript(options);
@@ -31,11 +32,14 @@ export default class GoogleMap {
    */
   private loadGoogleScript(options: GoogleMapOptions): void {
     const scriptTag = document.createElement('script');
+    const defaultLanguage = window.navigator.language.slice(0, 2);
+    const defaultRegion = window.navigator.language.slice(3, 5);
     scriptTag.setAttribute('type', 'text/javascript');
     scriptTag.setAttribute(
       'src',
       `https://maps.googleapis.com/maps/api/js?key=${
         options.googleMapsAPIKey
+      }&language=${options.language || defaultLanguage}&region=${options.region || defaultRegion}
       }${
         options.libraries && `&libraries=${options.libraries.join(',')}`
       }${
@@ -66,9 +70,23 @@ export default class GoogleMap {
   /**
    * Remove event listeners
    */
-  public destroy = (): void => {
+  public destroyListeners = (): void => {
     if (this.map) {
       google.maps.event.clearInstanceListeners(this.map);
     }
   };
+
+  /**
+   * Remove map instance
+   */
+  public destroyComplete = (): void => {
+    if (this.map) {
+      document.querySelectorAll('script[src^="https://maps.googleapis.com"]').forEach(script => {
+        script.remove();
+      });
+      if (window.google && window.google.maps) {
+        delete window.google.maps;
+      }
+    }
+  };
 }

src/google-map.ts

@@ -32,12 +32,12 @@ const useDirections = (props: DirectionsProps = {}): DirectionsHookReturns => {
   // Creates a Directions Service instance
   const directionsService = useMemo<google.maps.DirectionsService | null>(() => {
     // Wait for map to be initialized
-    if (loading) {
+    if (!map || loading) {
       return null;
     }
 
     return new google.maps.DirectionsService();
-  }, [loading]);
+  }, [map, loading]);
 
   // Creates a Directions Renderer instance
   const directionsRenderer = useMemo<google.maps.DirectionsRenderer | null>(() => {

src/hooks/directions.ts

@@ -8,6 +8,8 @@ export interface GoogleMapProviderProps {
   mapContainer?: HTMLElement | null;
   options: google.maps.MapOptions;
   libraries: string[];
+  language?: string;
+  region?: string;
   mapIds: string[];
   onLoad?: (map: google.maps.Map) => void;
 }
@@ -33,16 +35,18 @@ const GoogleMapProvider = (props: GoogleMapProviderProps): JSX.Element => {
     mapContainer,
     options,
     libraries,
+    language,
+    region,
     mapIds,
     onLoad
   } = props;
+
   const [loading, setLoading] = useState<boolean>(true);
   const [map, setMap] = useState<GoogleMap>();
 
-  // Initializes Google Map on mount
-  useEffect(() => {
+  const createGoogleMap = (() => {
     if (!mapContainer) {
-      return (): void => {};
+      return;
     }
 
     const mapOptions = {
@@ -57,23 +61,55 @@ const GoogleMapProvider = (props: GoogleMapProviderProps): JSX.Element => {
       },
       config: options,
       libraries,
-      mapIds
+      mapIds,
+      language,
+      region
     };
+    // Create Google Map instance
+    new GoogleMap(mapOptions);
+  });
 
-    // Destroy old map instance
-    if (map) {
-      map.destroy();
+  // Initializes map on mount
+  useEffect(() => {
+    if (!mapContainer) {
+      return (): void => {};
     }
 
-    // Create Google Map instance
-    new GoogleMap(mapOptions);
+    // create new map instance
+    createGoogleMap();
 
-    // Destroy Google Map when component unmounts
-    return (): void => {
-      map && map.destroy();
+     // Destroy Google Map when component unmounts
+     return (): void => {
+      map && map.destroyComplete();
     };
+  }, []);
+
+  // Destroy and recreate map on mapcontainer change
+  useEffect(() => {
+    if (!map || !mapContainer) {
+      return;
+    }
+    
+    // Destroy old map instance listeners
+    map.destroyListeners();
+
+    // create new map instance
+    createGoogleMap();
   }, [mapContainer]);
 
+  // Destroy and recreate map on language or region change
+  useEffect(() => {
+    if (!map || !mapContainer) {
+      return;
+    }
+
+    // Destroy old map instance
+    map.destroyComplete();
+
+    // create new map instance
+    createGoogleMap();
+  }, [language, region]);
+
   return (
     <GoogleMapContext.Provider value={{...map, loading}}>
       {children}