From 8f880da13d2b2390262ba9bd773ef68d7a0d7557 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 25 May 2020 21:36:54 +0300
Subject: [PATCH] Fix load Google Map

---
 .../app/core/services/resources.service.ts    |  2 +-
 .../components/widget/lib/maps/map-models.ts  |  1 +
 .../components/widget/lib/maps/map-widget2.ts |  2 +-
 .../widget/lib/maps/providers/google-map.ts   | 60 ++++++++++---------
 4 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/ui-ngx/src/app/core/services/resources.service.ts b/ui-ngx/src/app/core/services/resources.service.ts
index ec90cbb232..16667ec64c 100644
--- a/ui-ngx/src/app/core/services/resources.service.ts
+++ b/ui-ngx/src/app/core/services/resources.service.ts
@@ -48,7 +48,7 @@ export class ResourcesService {
     }
 
     let fileType;
-    const match = /[.](css|less|html|htm|js)?((\?|#).*)?$/.exec(url);
+    const match = /[./](css|less|html|htm|js)?(([?#]).*)?$/.exec(url);
     if (match !== null) {
       fileType = match[1];
     }
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 b730f1df20..8567110a76 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
@@ -48,6 +48,7 @@ export type MapSettings = {
     mapImageUrl?: string;
     provider?: MapProviders;
     credentials?: any; // declare credentials format
+    gmApiKey?: string;
     defaultCenterPosition?: LatLngTuple;
     markerClusteringSetting?;
     useDefaultCenterPosition?: boolean;
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 181bf9b186..616b3a4261 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
@@ -76,7 +76,7 @@ export class MapWidgetController implements MapWidgetInterface {
             return;
         }
         parseWithTranslation.setTranslate(this.translate);
-        this.map = new MapClass($element, this.settings);
+        this.map = new MapClass($element, this.settings, this.ctx.$injector);
         this.map.setImageAlias(this.subscribeForImageAttribute());
         this.map.saveMarkerLocation = this.setMarkerLocation;
     }
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
index b62262bf53..2a06f5c056 100644
--- 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
@@ -19,39 +19,45 @@ import L from 'leaflet';
 import LeafletMap from '../leaflet-map';
 import { UnitedMapSettings } from '../map-models';
 import 'leaflet.gridlayer.googlemutant';
+import { ResourcesService } from '@core/services/resources.service';
+import { Injector } from '@angular/core';
 
-let googleLoaded = false;
+const gmGlobals: GmGlobal = {};
 
+interface GmGlobal {
+  [key: string]: boolean;
+}
 
 export class GoogleMap extends LeafletMap {
-    constructor($container, options: UnitedMapSettings) {
+  private resource: ResourcesService;
 
-        super($container, options);
-        this.loadGoogle(() => {
-            const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
-            (L.gridLayer as any).googleMutant({
-                type: options?.gmDefaultMapType || 'roadmap'
-            }).addTo(map);
-            super.setMap(map);
-        }, options.credentials.apiKey);
-        super.initSettings(options);
-    }
+  constructor($container, options: UnitedMapSettings, private injector: Injector) {
+    super($container, options);
+    this.resource = injector.get(ResourcesService);
+    this.loadGoogle(() => {
+      const map = L.map($container, {attributionControl: false}).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
+      (L.gridLayer as any).googleMutant({
+        type: options?.gmDefaultMapType || 'roadmap'
+      }).addTo(map);
+      super.setMap(map);
+    }, options.gmApiKey);
+    super.initSettings(options);
+  }
 
-    private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
-        if (googleLoaded) {
-            callback()
-        }
-        else {
-            googleLoaded = true;
-            const 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);
+  private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
+    if (gmGlobals[apiKey]) {
+      callback()
+    } else {
+      this.resource.loadResource(`https://maps.googleapis.com/maps/api/js?key=${apiKey}`).subscribe(
+        () => {
+          gmGlobals[apiKey] = true;
+          callback();
+        },
+        (error) => {
+          gmGlobals[apiKey] = false;
+          console.error(`Google map api load failed!`, error);
         }
+      );
     }
+  }
 }