Replace @agm/core with @angular/google-maps

package-lock.json

@@ -835,6 +835,22 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.0.4.tgz",
       "integrity": "sha512-WyfZ2u2JzGrwkxQmfxHvZMoYHEGfoUL+JlSXa2Sy3T/FPGNckHzIzggqweJij/qGjabWLabZDla4vak42f+4PA=="
     },
+    "@angular/google-maps": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/google-maps/-/google-maps-9.1.0.tgz",
+      "integrity": "sha512-0laZvjJNiZGiJoCmNT8o7Xc1QU+FFidXUbvZpoDhyLbNnzlXjLetYCdfijhcxyqxydKRbqT6unnOZZbo48QvsA==",
+      "requires": {
+        "@types/googlemaps": "^3.37.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "@types/googlemaps": {
+          "version": "3.39.3",
+          "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.39.3.tgz",
+          "integrity": "sha512-L8O9HAVFZj0TuiS8h5ORthiMsrrhjxTC8XUusp5k47oXCst4VTm+qWKvrAvmYMybZVokbp4Udco1mNwJrTNZPQ=="
+        }
+      }
+    },
     "@angular/language-service": {
       "version": "9.0.4",
       "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-9.0.4.tgz",
@@ -2126,9 +2142,9 @@
       }
     },
     "@types/googlemaps": {
-      "version": "3.30.4",
+      "version": "3.39.3",
-      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.30.4.tgz",
+      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.39.3.tgz",
-      "integrity": "sha512-S5Bzg+vlguaIhJa20V+QmetQqoAHAtpy+tAsv7ayps3Vsu0sU1QAEqHrV3KdBb7qy/tq9m4qDs1wQws0gm5Vpg==",
+      "integrity": "sha512-L8O9HAVFZj0TuiS8h5ORthiMsrrhjxTC8XUusp5k47oXCst4VTm+qWKvrAvmYMybZVokbp4Udco1mNwJrTNZPQ==",
       "dev": true
     },
     "@types/jasmine": {

package.json

@@ -36,6 +36,7 @@
     "@angular/compiler": "^9.0.4",
     "@angular/core": "^9.0.4",
     "@angular/forms": "^9.0.4",
+    "@angular/google-maps": "^9.1.0",
     "@angular/platform-browser": "^9.0.4",
     "@angular/platform-browser-dynamic": "^9.0.4",
     "@angular/router": "^9.0.4",
@@ -82,7 +83,7 @@
     "@compodoc/compodoc": "1.0.1",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@types/d3-color": "1.0.5",
-    "@types/googlemaps": "^3.30.4",
+    "@types/googlemaps": "^3.39.3",
     "@types/jasmine": "2.5.54",
     "@types/jasminewd2": "2.0.3",
     "@types/leaflet": "1.2.3",

src/app/pages/maps/gmaps/gmaps.component.ts

@@ -3,19 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ngx-gmaps',
   styleUrls: ['./gmaps.component.scss'],
-  template: `
+  templateUrl: './gmaps.component.html'
-    <!-- <nb-card>
-      <nb-card-header>Google Maps</nb-card-header>
-      <nb-card-body>
-        <agm-map [latitude]="lat" [longitude]="lng">
-          <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
-        </agm-map>
-      </nb-card-body>
-    </nb-card> -->
-  `,
 })
 export class GmapsComponent {
-
+  public readonly position = { lat: 51.678418, lng: 7.809007 };
-  lat = 51.678418;
-  lng = 7.809007;
 }

src/app/pages/maps/maps.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-// import { AgmCoreModule } from '@agm/core';
+import { GoogleMapsModule } from '@angular/google-maps';
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { NbCardModule } from '@nebular/theme';
@@ -10,10 +10,7 @@ import { MapsRoutingModule, routedComponents } from './maps-routing.module';
 @NgModule({
   imports: [
     ThemeModule,
-    // AgmCoreModule.forRoot({
+    GoogleMapsModule,
-    //   apiKey: 'AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k',
-    //   libraries: ['places'],
-    // }),
     LeafletModule.forRoot(),
     MapsRoutingModule,
     NgxEchartsModule,

src/index.html

@@ -9,7 +9,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/png" href="favicon.png">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k&libraries=places"></script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k"></script>
 </head>
 <body>
   <ngx-app>Loading...</ngx-app>