diff --git a/ui-ngx/package-lock.json b/ui-ngx/package-lock.json
index 968dad4a0c..e30dce7982 100644
--- a/ui-ngx/package-lock.json
+++ b/ui-ngx/package-lock.json
@@ -8263,6 +8263,11 @@
       "resolved": "https://registry.npmjs.org/leaflet-providers/-/leaflet-providers-1.9.1.tgz",
       "integrity": "sha512-YpJB9y4/nT5NGicU9vuqlttJaCer6paD3J3b8Wrw+IIQvK9dtcdzE9CsTkDg7Dg9FeGp5NEr3hu17xcHbYI/2w=="
     },
+    "leaflet.gridlayer.googlemutant": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/leaflet.gridlayer.googlemutant/-/leaflet.gridlayer.googlemutant-0.8.0.tgz",
+      "integrity": "sha512-Ain+jgDKRhlM6qNDDj2QFJa9vXUqV096N0PmpHO3DoNLS4I7EynTQCJXN+9qY4C51ZpV4Q4CI+apNv5XiP5aUA=="
+    },
     "leaflet.markercluster": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz",
diff --git a/ui-ngx/package.json b/ui-ngx/package.json
index d1bfb4f738..0ea3547ac6 100644
--- a/ui-ngx/package.json
+++ b/ui-ngx/package.json
@@ -58,6 +58,7 @@
     "jstree-bootstrap-theme": "^1.0.1",
     "leaflet": "^1.6.0",
     "leaflet-providers": "^1.9.1",
+    "leaflet.gridlayer.googlemutant": "^0.8.0",
     "leaflet.markercluster": "^1.4.1",
     "material-design-icons": "^3.0.1",
     "messageformat": "^2.3.0",
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
index 0922b5c12f..1b86d5ef34 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
@@ -5,7 +5,7 @@ export interface MapOptions {
     disableScrollZooming?: boolean,
     minZoomLevel?: number,
     mapProvider: MapProviders,
-    credentials?: string,
+    credentials?: any, // declare credentials format
     defaultCenterPosition?: L.LatLngExpression,
     markerClusteringSetting?
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
index 87824991c3..a307c53d33 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
@@ -4,6 +4,7 @@ import { deepClone } from '@core/utils';
 import { openstreetMapSettingsSchema, googleMapSettingsSchema, imageMapSettingsSchema, tencentMapSettingsSchema, hereMapSettingsSchema, commonMapSettingsSchema, routeMapSettingsSchema, markerClusteringSettingsSchema, markerClusteringSettingsSchemaGoogle, markerClusteringSettingsSchemaLeaflet } from './schemes';
 import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface';
 import { OpenStreetMap, TencentMap } from './providers';
+import { GoogleMap } from './providers/google-map';
 
 const providerSets = {
     'openstreet-map': {
@@ -13,6 +14,10 @@ const providerSets = {
     'tencent-map': {
         MapClass: TencentMap,
         schema: tencentMapSettingsSchema
+    },
+    'google-map': {
+        MapClass: GoogleMap,
+        schema: googleMapSettingsSchema
     }
 }
 
@@ -39,13 +44,12 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
             defaultCenterPosition: [0, 0],
             markerClusteringSetting: null
         }
-        console.log("TCL: TbMapWidgetV2 -> constructor -> providerSets[mapProvider]", providerSets[mapProvider], mapProvider)
+        console.log("TCL: TbMapWidgetV2 -> constructor -> providerSets[mapProvider]",mapProvider)
         let MapClass = providerSets[mapProvider]?.MapClass;
         if(!MapClass){
             //delete this;
             return;
         }
-        console.log("TCL: TbMapWidgetV2 -> constructor -> MapClass", MapClass)
         this.map = new MapClass($element, options)
 
         this.schema = providerSets[mapProvider]?.schema;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
new file mode 100644
index 0000000000..949b02cc42
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts
@@ -0,0 +1,41 @@
+
+import L from 'leaflet';
+import LeafletMap from '../leaflet-map';
+import { MapOptions } from '../map-models';
+import 'leaflet.gridlayer.googlemutant';
+
+var googleLoaded = false;
+
+
+export class GoogleMap extends LeafletMap {
+    constructor($container, options: MapOptions) {
+
+        super($container, options);
+        this.loadGoogle(() => {
+            const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
+            var roads = (L.gridLayer as any).googleMutant({
+                type: 'roadmap'	// valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
+            }).addTo(map);
+            super.setMap(map);
+        }, options.credentials.apiKey);
+        super.initSettings(options);
+    }
+
+    private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
+        if (googleLoaded) {
+            callback()
+        }
+        else {
+            googleLoaded = true;
+            let script = document.createElement('script');
+            script.onload = () => {
+                callback();
+            }
+            script.onerror = () => {
+                googleLoaded = false;
+            }
+            script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
+            document.getElementsByTagName('head')[0].appendChild(script);
+        }
+    }
+}
\ No newline at end of file
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts
index 12c4cf30db..30ff0bc6eb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts
@@ -1,4 +1,3 @@
-
 import L from 'leaflet';
 import LeafletMap from '../leaflet-map';
 import { MapOptions } from '../map-models';