Unknown chnages over lastr year...

package.json

@@ -38,6 +38,7 @@
     "@angular/router": "^16.0.3",
     "@angular/service-worker": "^16.0.3",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@googlemaps/js-api-loader": "^1.15.2",
     "@googlemaps/markerclusterer": "^2.1.4",
     "@material/banner": "^14.0.0",
     "@material/icon-button": "^14.0.0",
@@ -105,4 +106,4 @@
       "options": {}
     }
   }
-}
+}

src/app/app.module.ts

@@ -16,6 +16,7 @@ import {
 import { RouterModule } from '@angular/router'
 
 import { GoogleMapsModule } from '@angular/google-maps'
+//import { Loader } from '@googlemaps/js-api-loader'
 import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
@@ -62,6 +63,7 @@ import { HeaderComponent, AlertsComponent, FooterComponent, IconsComponent, Inst
     // DayjsModule,
     FormsModule,
     GoogleMapsModule,
+    //    Loader,
     HttpClientModule,
     MaterialModule,
     ReactiveFormsModule,

src/app/gmap/gmap.component.ts

@@ -4,14 +4,15 @@ import { DOCUMENT, JsonPipe } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
 import { Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { GoogleMap } from '@angular/google-maps'
+import { Loader } from '@googlemaps/js-api-loader'
 import { MarkerClusterer } from '@googlemaps/markerclusterer'
 
 import { Utility } from '../shared/'
 import { AbstractMap } from '../shared/'
 import { Map } from '../shared/mapping/map.interface';
 import {
   FieldReportService, FieldReportStatusType, FieldReportType, LogService,
-  SettingsService
+  SettingsService, Secret
 } from '../shared/services'
 
 /*
@@ -41,6 +42,8 @@ GoogleMapsModule (their Angular wrapper) exports three components that we can us
  https://console.cloud.google.com/google/maps-apis/ does *NOT* support client side usage?!
 */
 
+
+
 declare const google: any // declare tells compiler "this variable exists (from elsewhere) & can be referenced by other code. There's no need to compile this statement"
 /**
  * @ignore
@@ -75,6 +78,16 @@ export class GmapComponent extends AbstractMap implements OnInit, OnDestroy {
   overviewMapType = { cur: 0, types: { type: ['roadmap', 'terrain', 'satellite', 'hybrid',] } }
   // overviewGMapOptions: google.maps.MapOptions
 
+
+  loader!: Loader
+  /*
+    loader = new Loader({
+      apiKey: "YOUR_API_KEY", //SettingsService.secrets[Secret.GoogleMaps].key, //"YOUR_API_KEY",
+      version: "weekly",
+      //...additionalOptions,
+    });
+  */
+
   // items for <google-map>
   trafficLayer = new google.maps.TrafficLayer()
   trafficLayerVisible = 0
@@ -153,6 +166,20 @@ See googlemaps.github.io/v3-utility-library/classes/_google_markerclustererplus.
 
 */
 
+
+
+
+    /*
+          // https://developers.google.com/maps/documentation/javascript/get-api-key
+          (g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
+            key: "YOUR_API_KEY_HERE",
+            v: "weekly",
+            // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
+            // Add other bootstrap parameters as needed, using camel case.
+          });
+    */
+
+
     // https://developers.google.com/maps/documentation/javascript/examples/map-latlng-literal
     // https://developers.google.com/maps/documentation/javascript/reference/coordinates
 
@@ -202,6 +229,7 @@ See googlemaps.github.io/v3-utility-library/classes/_google_markerclustererplus.
 
   }
 
+
   // ---------------- Init Main Map -----------------
   /**
    *
@@ -210,14 +238,45 @@ See googlemaps.github.io/v3-utility-library/classes/_google_markerclustererplus.
   override initMainMap() {
     super.initMainMap()
 
-    this.log.excessive("initMap()", this.id)
+    this.log.excessive("initMap() %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%", this.id)
 
     // ! Repeat of the guards in super:
     if (!this.settings) {
       this.log.error(`Settings not yet initialized while in initMap()!`, this.id)
       return
     }
 
+
+    // https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+    // https://developers.google.com/maps/documentation/javascript/overview#Loading_the_Maps_API
+    // this.initMap();
+    if (!this.loader) {
+
+      this.log.excessive("initMap() --------------  creating loader !!!!!!!!!!!!", this.id)
+      this.log.excessive(`initMap() --------------  creating loader using Google Maps key ${(SettingsService.secrets[Secret.GoogleMaps].key)}`, this.id)
+
+      this.loader = new Loader({
+        apiKey: SettingsService.secrets[Secret.GoogleMaps].key, //"YOUR_API_KEY",
+        version: "weekly",
+        //...additionalOptions,
+      });
+
+    } else {
+      this.log.excessive("initMap() --------------  loader exists!!!!!!!!!!!!", this.id)
+    }
+
+    this.loader.load().then(async () => {
+      const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+      this.gMap = new Map(document.getElementById("map") as HTMLElement, {
+        center: { lat: -34.397, lng: 150.644 },
+        zoom: 8,
+      });
+    });
+
+
+
+
+
     //? Per guidence on settings page: Maps do not use defLat/lng... They are auto-centered on the bounding coordinates centroid of all points entered and the map is then zoomed to show all points.
 
     this.zoom = this.settings ? this.settings.google.defZoom : 15
@@ -241,6 +300,25 @@ See googlemaps.github.io/v3-utility-library/classes/_google_markerclustererplus.
     }
   }
 
+
+
+
+  // https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+
+  /* let gMap: google.maps.Map;
+  async initMap(): Promise<void> {
+    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+    this.gMap = new Map(document.getElementById("map") as HTMLElement, {
+      center: { lat: -34.397, lng: 150.644 },
+      zoom: 8,
+    });
+  }
+*/
+
+
+
+
+
   /**
    *
    * @param mappy

src/app/shared/services/index.ts

@@ -11,6 +11,7 @@ export { FieldReportType, FieldReportsType, FieldReportStatusType, FieldReportSo
 export { LocationType, undefinedAddressFlag, undefinedLocation } from "./location.interface"
 export { LogLevel, LogType, LogHeadings } from "./log.interface"
 export { RangerType, UnknownRanger } from "./ranger.interface"
+export { Secret } from "./secrets.interface"
 export { SettingsType } from "./settings.interface"
 
 

src/app/shared/services/secrets.interface.ts

@@ -0,0 +1,9 @@
+export enum Secret {
+  W3W,
+  unused,
+  AgmCoreModule,
+  GoogleMaps,
+  Mapbox_Public,
+  Mapbox_Secret,
+  Firebase
+}

src/index.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -30,7 +30,7 @@
       // Uncaught ReferenceError: System is not defined
       // System.import('app').catch(function (err) { console.error(err); });
   </script>
-  <script src="https://maps.googleapis.com/maps/api/js?key=&amp;libraries=places"></script>
+  <!-- script src="https://maps.googleapis.com/maps/api/js?key=&amp;libraries=places"></script -->
   <!--  & callback=initMap async -->
 
   <!-- sc ript src="https://leafletjs-cdn.s3.amazonaws.com/content/le   aflet/main/leaflet-src.js"></scri   pt -->
@@ -48,4 +48,4 @@
 
 </body>
 
-</html>
+</html>

tsconfig.json

@@ -27,7 +27,10 @@
       "dom"
     ],
     "resolveJsonModule": true,
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "typeRoots": [
+      "node_modules/@types",
+    ]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
@@ -45,16 +48,20 @@
     ]
   }
   /*
-  above from https://giancarlobuomprisco.com/typescript/writing-scalabale-typescript
-  https://www.devasking.com/issue/tsconfigjson-include-property
-  ,
-  "files": [
-    "./node_modules/picocolors/types.ts"
-  ]
+    RE: Typeroots: see https://developers.google.com/maps/documentation/javascript/using-typescript#specifying_typeroots
+    Some frameworks such as Angular may require specifying the typeRoots compiler option to include types installed from @types/google.maps and all other "@types" packages
+
 
-  ,
-  "exclude": [
-    "./node_modules/picocolors/types.ts"
-  ]
+    above from https://giancarlobuomprisco.com/typescript/writing-scalabale-typescript
+    https://www.devasking.com/issue/tsconfigjson-include-property
+    ,
+    "files": [
+      "./node_modules/picocolors/types.ts"
+    ]
+
+    ,
+    "exclude": [
+      "./node_modules/picocolors/types.ts"
+    ]
   */
-}
+}