fix(maps): fixed maps grid position

Author: shoudaos

src/app/pages/maps/google/maps-google.component.ts

@@ -5,12 +5,8 @@ import { Component } from '@angular/core';
   templateUrl: './maps-google.template.html',
   styles: [`
     .content-map {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 100%;
+      width: 100%;
+      height: 60vh;
     }
   `]
 })

src/app/pages/maps/google/maps-google.template.html

@@ -1,5 +1,22 @@
-<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" class="content-map">
-  <agm-marker [latitude]="lat" [longitude]="lng" [markerDraggable]="true">
-  </agm-marker>
-</agm-map>
+<ol class="breadcrumb">
+  <li class="breadcrumb-item">YOU ARE HERE</li>
+  <li class="breadcrumb-item active">Google Maps</li>
+</ol>
 <h1 class="page-title">Google <span class="fw-semi-bold">Maps</span></h1>
+<div class="row">
+  <div class="col-lg-10">
+    <widget
+      class="mb-xlg"
+      [title]="'<h5>Vue Google Maps <small class=text-muted>Default and customized</small></h5>'"
+      [close]="true"
+      [collapse]="true"
+      [customHeader]="true"
+    >
+      <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" class="content-map">
+        <agm-marker [latitude]="lat" [longitude]="lng" [markerDraggable]="true">
+        </agm-marker>
+      </agm-map>
+    </widget>
+  </div>
+</div>
+

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

@@ -11,6 +11,7 @@ import { AgmCoreModule } from '@agm/core';
 
 import { MapsGoogleComponent } from './google/maps-google.component';
 import { MapsVectorComponent } from './vector/maps-vector.component';
+import {NewWidgetModule} from "../../layout/new-widget/widget.module";
 
 export const routes = [
   {path: '', redirectTo: 'google', pathMatch: 'full'},
@@ -32,8 +33,9 @@ export const routes = [
     ButtonsModule.forRoot(),
     BsDropdownModule.forRoot(),
     AgmCoreModule.forRoot({
-      apiKey: 'AIzaSyDe_oVpi9eRSN99G4o6TwVjJbFBNr58NxE'
-    })
+      apiKey: 'AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg'
+    }),
+    NewWidgetModule
   ]
 })
 export class MapsModule {

src/app/pages/maps/vector/maps-vector.template.html

@@ -1,9 +1,17 @@
-<div class="content-map vector-map">
-</div>
 <header class="page-title">
   <h1 class="m-0 mb-sm">Vector <span class="fw-semi-bold">Maps</span></h1>
-  <p class="page-title fs-sm m-0">
-    <span class="fw-semi-bold">1 656 843</span>
-    <span class="ml-xs circle bg-gray"><i class="text-gray-lighter fa fa-circle"></i></span>
-  </p>
 </header>
+<div class="row">
+  <div class="col-lg-10">
+    <widget
+      class="mb-xlg"
+      [title]="'<h5>Vue Vector Maps <small class=text-muted>Default and customized</small></h5>'"
+      [close]="true"
+      [collapse]="true"
+      [customHeader]="true"
+    >
+      <div class="content-map vector-map">
+      </div>
+    </widget>
+  </div>
+</div>

src/app/pages/maps/vector/vector-map.style.scss

@@ -1,8 +1,4 @@
 .content-map {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
+  width: 100%;
+  height: 400px;
 }