feat(maps): add google map with access search location dropdown

Author: dimaatkaev

package-lock.json

@@ -75,6 +75,7 @@
     "@angular/compiler-cli": "~5.1.0",
     "@angular/language-service": "~5.1.0",
     "@compodoc/compodoc": "1.0.1",
+    "@types/googlemaps": "3.30.4",
     "@types/d3-color": "1.0.5",
     "@types/jasmine": "2.5.54",
     "@types/jasminewd2": "2.0.3",

package.json

@@ -5,6 +5,9 @@ import { MapsComponent } from './maps.component';
 import { GmapsComponent } from './gmaps/gmaps.component';
 import { LeafletComponent } from './leaflet/leaflet.component';
 import { BubbleMapComponent } from './bubble/bubble-map.component';
+import { SearchMapComponent } from './search-map/search-map.component';
+import { MapComponent } from './search-map/map/map.component';
+import { SearchComponent } from './search-map/search/search.component';
 
 const routes: Routes = [{
   path: '',
@@ -18,6 +21,9 @@ const routes: Routes = [{
   }, {
     path: 'bubble',
     component: BubbleMapComponent,
+  }, {
+    path: 'searchmap',
+    component: SearchMapComponent,
   }],
 }];
 
@@ -32,4 +38,7 @@ export const routedComponents = [
   GmapsComponent,
   LeafletComponent,
   BubbleMapComponent,
+  SearchMapComponent,
+  MapComponent,
+  SearchComponent,
 ];

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

@@ -9,7 +9,10 @@ import { MapsRoutingModule, routedComponents } from './maps-routing.module';
 @NgModule({
   imports: [
     ThemeModule,
-    AgmCoreModule.forRoot(),
+    AgmCoreModule.forRoot({
+      apiKey: 'AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k',
+      libraries: ['places'],
+    }),
     LeafletModule.forRoot(),
     MapsRoutingModule,
     NgxEchartsModule,

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

@@ -0,0 +1,4 @@
+export class Location {
+  constructor(public latitude: number = 54, public longitude: number = 33) {
+  }
+}

src/app/pages/maps/search-map/entity/Location.ts

@@ -0,0 +1,7 @@
+<agm-map [latitude]="latitude"
+         [longitude]="longitude"
+         [scrollwheel]="false"
+         [zoom]="zoom">
+  <agm-marker [latitude]="latitude"
+              [longitude]="longitude"></agm-marker>
+</agm-map>

src/app/pages/maps/search-map/map/map.component.html

@@ -0,0 +1,13 @@
+@import '../../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  nb-card-body {
+    padding: 0;
+  }
+
+  /deep/ agm-map {
+    width: 100%;
+    height: nb-theme(card-height-large);
+  }
+}

src/app/pages/maps/search-map/map/map.component.scss

@@ -0,0 +1,31 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Location } from '../entity/Location';
+
+@Component({
+  selector: 'ngx-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss'],
+})
+export class MapComponent implements OnInit {
+  latitude: number;
+  longitude: number;
+  zoom: number;
+
+  @Input()
+  public set searchedLocation(searchedLocation: Location) {
+    this.latitude = searchedLocation.latitude;
+    this.longitude = searchedLocation.longitude;
+    this.zoom = 12;
+  }
+
+  ngOnInit(): void {
+    // set up current location
+    if ('geolocation' in navigator) {
+      navigator.geolocation.getCurrentPosition((position) => {
+        this.searchedLocation = new Location(
+          position.coords.latitude, position.coords.longitude,
+        );
+      });
+    }
+  }
+}

src/app/pages/maps/search-map/map/map.component.ts

@@ -0,0 +1,7 @@
+<nb-card>
+  <nb-card-header>Google Maps with search</nb-card-header>
+  <nb-card-body>
+    <ngx-search (positionChanged)="updateLocation($event)"></ngx-search>
+    <ngx-map [searchedLocation]="searchedLocation"></ngx-map>
+  </nb-card-body>
+</nb-card>

src/app/pages/maps/search-map/search-map.component.html

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { Location } from './entity/Location';
+
+@Component({
+  selector: 'ngx-search-map',
+  templateUrl: './search-map.component.html',
+})
+export class SearchMapComponent {
+
+  searchedLocation: Location = new Location();
+
+  updateLocation(event: Location) {
+    this.searchedLocation = new Location(event.latitude, event.longitude);
+  }
+}

src/app/pages/maps/search-map/search-map.component.ts

@@ -0,0 +1,4 @@
+<div class="form-group">
+  <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text"
+         class="form-control search-location" #search>
+</div>

src/app/pages/maps/search-map/search/search.component.html

@@ -0,0 +1,44 @@
+import { Component, ElementRef, EventEmitter, NgZone, OnInit, Output, ViewChild } from '@angular/core';
+import { MapsAPILoader } from '@agm/core';
+import { Location } from '../entity/Location';
+import {} from 'googlemaps';
+
+@Component({
+  selector: 'ngx-search',
+  templateUrl: './search.component.html',
+})
+export class SearchComponent implements OnInit {
+
+  @Output() positionChanged = new EventEmitter<Location>();
+
+  @ViewChild('search')
+  public searchElementRef: ElementRef;
+
+  constructor(private mapsAPILoader: MapsAPILoader,
+              private ngZone: NgZone) {
+  }
+
+  ngOnInit() {
+    // load Places Autocomplete
+    this.mapsAPILoader.load().then(() => {
+      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
+        types: ['address'],
+      });
+      autocomplete.addListener('place_changed', () => {
+        this.ngZone.run(() => {
+          // get the place result
+          const place: google.maps.places.PlaceResult = autocomplete.getPlace();
+
+          // verify result
+          if (place.geometry === undefined || place.geometry === null) {
+            return;
+          }
+
+          this.positionChanged.emit(
+            new Location(place.geometry.location.lat(),
+              place.geometry.location.lng()));
+        });
+      });
+    });
+  }
+}

src/app/pages/maps/search-map/search/search.component.ts

@@ -89,6 +89,10 @@ export const MENU_ITEMS: NbMenuItem[] = [
         title: 'Bubble Maps',
         link: '/pages/maps/bubble',
       },
+      {
+        title: 'Search Maps',
+        link: '/pages/maps/searchmap',
+      },
     ],
   },
   {