Fix load Google Map

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];
     }

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;

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;
     }

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);
+  constructor($container, options: UnitedMapSettings, private injector: Injector) {
-        this.loadGoogle(() => {
+    super($container, options);
-            const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
+    this.resource = injector.get(ResourcesService);
-            (L.gridLayer as any).googleMutant({
+    this.loadGoogle(() => {
-                type: options?.gmDefaultMapType || 'roadmap'
+      const map = L.map($container, {attributionControl: false}).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
-            }).addTo(map);
+      (L.gridLayer as any).googleMutant({
-            super.setMap(map);
+        type: options?.gmDefaultMapType || 'roadmap'
-        }, options.credentials.apiKey);
+      }).addTo(map);
-        super.initSettings(options);
+      super.setMap(map);
-    }
+    }, options.gmApiKey);
+    super.initSettings(options);
+  }
 
-    private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
+  private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') {
-        if (googleLoaded) {
+    if (gmGlobals[apiKey]) {
-            callback()
+      callback()
-        }
+    } else {
-        else {
+      this.resource.loadResource(`https://maps.googleapis.com/maps/api/js?key=${apiKey}`).subscribe(
-            googleLoaded = true;
+        () => {
-            const script = document.createElement('script');
+          gmGlobals[apiKey] = true;
-            script.onload = () => {
+          callback();
-                callback();
+        },
-            }
+        (error) => {
-            script.onerror = () => {
+          gmGlobals[apiKey] = false;
-                googleLoaded = false;
+          console.error(`Google map api load failed!`, error);
-            }
-            script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
-            document.getElementsByTagName('head')[0].appendChild(script);
         }
+      );
     }
+  }
 }