diff --git a/package-lock.json b/package-lock.json
index 74edde97..6534f6d5 100644
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.30.4.tgz",
-      "integrity": "sha512-S5Bzg+vlguaIhJa20V+QmetQqoAHAtpy+tAsv7ayps3Vsu0sU1QAEqHrV3KdBb7qy/tq9m4qDs1wQws0gm5Vpg==",
+      "version": "3.39.3",
+      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.39.3.tgz",
+      "integrity": "sha512-L8O9HAVFZj0TuiS8h5ORthiMsrrhjxTC8XUusp5k47oXCst4VTm+qWKvrAvmYMybZVokbp4Udco1mNwJrTNZPQ==",
       "dev": true
     },
     "@types/jasmine": {
diff --git a/package.json b/package.json
index 776ab8a3..bb87c8b7 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/pages/maps/gmaps/gmaps.component.html b/src/app/pages/maps/gmaps/gmaps.component.html
new file mode 100644
index 00000000..5b285dab
--- /dev/null
+++ b/src/app/pages/maps/gmaps/gmaps.component.html
@@ -0,0 +1,8 @@
+<nb-card>
+  <nb-card-header>Google Maps</nb-card-header>
+  <nb-card-body>
+    <google-map [center]="position" [zoom]="8" width="100%" height="36.5625rem">
+      <map-marker [position]="position"></map-marker>
+    </google-map>
+  </nb-card-body>
+</nb-card>
\ No newline at end of file
diff --git a/src/app/pages/maps/gmaps/gmaps.component.ts b/src/app/pages/maps/gmaps/gmaps.component.ts
index 17f8f373..c60a3650 100644
--- a/src/app/pages/maps/gmaps/gmaps.component.ts
+++ b/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: `
-    <!-- <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> -->
-  `,
+  templateUrl: './gmaps.component.html'
 })
 export class GmapsComponent {
-
-  lat = 51.678418;
-  lng = 7.809007;
+  public readonly position = { lat: 51.678418, lng: 7.809007 };
 }
diff --git a/src/app/pages/maps/maps.module.ts b/src/app/pages/maps/maps.module.ts
index c33446e0..de12b689 100644
--- a/src/app/pages/maps/maps.module.ts
+++ b/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({
-    //   apiKey: 'AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k',
-    //   libraries: ['places'],
-    // }),
+    GoogleMapsModule,
     LeafletModule.forRoot(),
     MapsRoutingModule,
     NgxEchartsModule,
diff --git a/src/index.html b/src/index.html
index 25af9b91..5ed7c8fa 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,6 +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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k"></script>
 </head>
 <body>
   <ngx-app>Loading...</ngx-app>