@ttoss/google-maps 1.9.6 → 1.11.1

package/README.md

@@ -123,7 +123,7 @@ const Providers: React.FC = ({ children }) => {
   }
 
   return (
-    <GoogleMapsProvider apiKey={apiKey} libraries={['places']}>
+    <GoogleMapsProvider apiKey={apiKey} libraries={['places']} language="pt-BR">
       {children}
     </GoogleMapsProvider>
   );
@@ -224,6 +224,7 @@ export type GoogleMaps = typeof google.maps;
 const GoogleMapsProvider: React.FC<{
   apiKey: string;
   libraries?: Libraries[] | undefined;
+  language?: string;
 }>;
 
 const useGoogleMaps: () =>

package/dist/esm/index.js

@@ -8,8 +8,17 @@ var GoogleMapsContext = React2.createContext({
   status: "idle",
   googleMaps: null
 });
-var GoogleMapsProvider = ({ children, apiKey, libraries }) => {
-  const src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=${libraries == null ? void 0 : libraries.join(",")}`;
+var GoogleMapsProvider = ({ children, apiKey, libraries, language }) => {
+  const src = (() => {
+    let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
+    if (libraries) {
+      srcTemp = srcTemp + `&libraries=${libraries.join(",")}`;
+    }
+    if (language) {
+      srcTemp = srcTemp + `&language=${language}`;
+    }
+    return srcTemp;
+  })();
   const { status } = useScript(src);
   const googleMaps = React2.useMemo(() => {
     if (status === "ready" && window.google.maps) {

package/dist/index.d.ts

@@ -9,6 +9,10 @@ declare type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
 declare const GoogleMapsProvider: React.FC<{
     apiKey: string;
     libraries?: Libraries[];
+    /**
+     * https://developers.google.com/maps/faq#languagesupport
+     */
+    language?: string;
 }>;
 /**
  *

package/dist/index.js

@@ -45,8 +45,17 @@ var GoogleMapsContext = React2.createContext({
   status: "idle",
   googleMaps: null
 });
-var GoogleMapsProvider = ({ children, apiKey, libraries }) => {
-  const src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=${libraries == null ? void 0 : libraries.join(",")}`;
+var GoogleMapsProvider = ({ children, apiKey, libraries, language }) => {
+  const src = (() => {
+    let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
+    if (libraries) {
+      srcTemp = srcTemp + `&libraries=${libraries.join(",")}`;
+    }
+    if (language) {
+      srcTemp = srcTemp + `&language=${language}`;
+    }
+    return srcTemp;
+  })();
   const { status } = (0, import_hooks.useScript)(src);
   const googleMaps = React2.useMemo(() => {
     if (status === "ready" && window.google.maps) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "1.9.6",
+  "version": "1.11.1",
   "author": "ttoss",
   "contributors": [
     {
@@ -31,12 +31,12 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@ttoss/hooks": "^1.9.6",
+    "@ttoss/hooks": "^1.11.1",
     "@types/google.maps": "^3.47.3"
   },
   "peerDependencies": {
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2"
   },
-  "gitHead": "a11f0c9d443263290cf5570e75424997aba1bc05"
+  "gitHead": "42b0a90dcb68ae3db12d6923be815c5e93d3d962"
 }

package/src/GoogleMapsProvider.spec.tsx

@@ -23,6 +23,10 @@ beforeAll(() => {
   (global.google as unknown) = googleMock;
 });
 
+beforeEach(() => {
+  document.querySelectorAll('script')[0]?.remove();
+});
+
 const RenderStatus = () => {
   const { status } = useGoogleMaps();
   return (
@@ -34,9 +38,11 @@ const RenderStatus = () => {
 
 const loadEvent = new Event('load');
 
+const apiKey = 'apiKey';
+
 it('should display correct status', () => {
   render(
-    <GoogleMapsProvider apiKey="apiKey">
+    <GoogleMapsProvider apiKey={apiKey}>
       <RenderStatus />
     </GoogleMapsProvider>
   );
@@ -49,3 +55,27 @@ it('should display correct status', () => {
 
   expect(screen.getByText('ready')).toBeInTheDocument();
 });
+
+it.each([
+  [{ apiKey }, `https://maps.googleapis.com/maps/api/js?key=${apiKey}`],
+  [
+    { apiKey, language: 'pt-BR' },
+    `https://maps.googleapis.com/maps/api/js?key=${apiKey}&language=pt-BR`,
+  ],
+  [
+    { apiKey, language: 'pt-BR', libraries: ['places'] },
+    `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&language=pt-BR`,
+  ],
+  [
+    { apiKey, language: 'pt-BR', libraries: ['places', 'geometry'] },
+    `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,geometry&language=pt-BR`,
+  ],
+])('Google Maps API src %#', (props, src) => {
+  render(
+    <GoogleMapsProvider {...(props as any)}>
+      <RenderStatus />
+    </GoogleMapsProvider>
+  );
+
+  expect(document.querySelectorAll('script')[0].src).toEqual(src);
+});

package/src/GoogleMapsProvider.tsx

@@ -28,10 +28,24 @@ type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
 export const GoogleMapsProvider: React.FC<{
   apiKey: string;
   libraries?: Libraries[];
-}> = ({ children, apiKey, libraries }) => {
-  const src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=${libraries?.join(
-    ','
-  )}`;
+  /**
+   * https://developers.google.com/maps/faq#languagesupport
+   */
+  language?: string;
+}> = ({ children, apiKey, libraries, language }) => {
+  const src = (() => {
+    let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
+
+    if (libraries) {
+      srcTemp = srcTemp + `&libraries=${libraries.join(',')}`;
+    }
+
+    if (language) {
+      srcTemp = srcTemp + `&language=${language}`;
+    }
+
+    return srcTemp;
+  })();
 
   const { status } = useScript(src);