(feature/allow-user-select-multiple-addresses): Create new google map…

…s view with current user location

shop/mobile-ionic/src/app/pages/pages.module.ts

@@ -33,7 +33,7 @@ const routes: Routes = [
 		canLoad: [OrdersHistoryModuleGuard]
 	},
 	{
-		path: ' ',
+		path: 'invite',
 		loadChildren: './+invite/invite.module#InvitePageModule',
 		canLoad: [InviteModuleGuard]
 	},

shop/mobile-ionic/src/app/pages/user-locations/user-locations.module.ts

@@ -2,25 +2,25 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
-
 import { IonicModule } from '@ionic/angular';
-
 import { UserLocationsPage } from './user-locations.page';
+import { Geolocation } from '@ionic-native/geolocation/ngx';
 
 const routes: Routes = [
-  {
-    path: '',
-    component: UserLocationsPage
-  }
+	{
+		path: '',
+		component: UserLocationsPage
+	}
 ];
 
 @NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    RouterModule.forChild(routes)
-  ],
-  declarations: [UserLocationsPage]
+	imports: [
+		CommonModule,
+		FormsModule,
+		IonicModule,
+		RouterModule.forChild(routes)
+	],
+	declarations: [UserLocationsPage],
+	providers: [Geolocation]
 })
-export class UserLocationsPageModule {}
+export class UserLocationsPageModule { }

shop/mobile-ionic/src/app/pages/user-locations/user-locations.page.css

@@ -5,3 +5,7 @@ ion-item-group#address-info {
 ion-button#save {
 	margin-bottom: 10px;
 }
+
+.map {
+	height: 60%;
+}

shop/mobile-ionic/src/app/pages/user-locations/user-locations.page.html

@@ -8,31 +8,17 @@
 </ion-header>
 
 <ion-content>
+	<div #container id="map-container" class="map"></div>
 	<ion-card>
 		<ion-card-header>
-			<ion-card-title>Add new address</ion-card-title>
+			<!-- <ion-card-title>Add new address</ion-card-title> -->
 		</ion-card-header>
 		<ion-card-content>
 			<ion-item-group id="address-info">
 				<ion-row>
 					<ion-col size="12">
 						<ion-item>
-							<ion-input placeholder="City"></ion-input>
-						</ion-item>
-					</ion-col>
-					<ion-col size="12">
-						<ion-item>
-							<ion-input placeholder="Street"></ion-input>
-						</ion-item>
-					</ion-col>
-					<ion-col size="6">
-						<ion-item>
-							<ion-input placeholder="House"></ion-input>
-						</ion-item>
-					</ion-col>
-					<ion-col size="6">
-						<ion-item>
-							<ion-input placeholder="Apartment"></ion-input>
+							<ion-input placeholder="Enter a new address"></ion-input>
 						</ion-item>
 					</ion-col>
 				</ion-row>

shop/mobile-ionic/src/app/pages/user-locations/user-locations.page.ts

@@ -1,15 +1,40 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { Geoposition } from '@ionic-native/geolocation';
+declare var google: any;
 
 @Component({
-  selector: 'e-cu-user-locations',
-  templateUrl: './user-locations.page.html',
-  styleUrls: ['./user-locations.page.css'],
+	selector: 'e-cu-user-locations',
+	templateUrl: './user-locations.page.html',
+	styleUrls: ['./user-locations.page.css'],
 })
-export class UserLocationsPage implements OnInit {
+export class UserLocationsPage implements OnInit, AfterViewInit {
+	@ViewChild('container', { static: true }) container: ElementRef;
+	public latitude: number;
+	public longitude: number;
+	public map: google.maps.Map;
 
-  constructor() { }
+	constructor(private geolocation: Geolocation) { }
 
-  ngOnInit() {
-  }
+	ngOnInit() {
+		this.geolocation.getCurrentPosition().then((_res: Geoposition) => {
+			this.latitude = _res.coords.latitude;
+			this.longitude = _res.coords.longitude;
+			this.loadMap();
+		});
+	}
 
+
+	loadMap() {
+		this.map = new google.maps.Map(this.container.nativeElement, this.configureMapSettings());
+	}
+
+	configureMapSettings() {
+		return {
+			zoom: 17,
+			center: { lat: this.latitude, lng: this.longitude },
+			mapTypeControl: false,
+			streetViewControl: false
+		};
+	}
 }