google maps api code complete and working

Author: AndrewJBateman

README.md

@@ -19,9 +19,9 @@ Code taken from course.
 * App to view and book places to stay. All places listed on the 'discover.page' and clicking on an item navigates to a place detail page using the place id in the browser.
 * Places are displayed under 2 list option: 'ALL PLACES' and 'BOOKABLE PLACES'. The first place is displayed using an ion-card, the remaining places are displayed using a list with a thumbnail image. There is code to prevent the user from being able to book their own places, using a userId matching function.
 * Places can be booked, listed and cancelled.
-* New places can be added.
+* New places can be added. The location of the new place is chosen using google maps and is stored in the Places array to be displayed in the template using data-binding.
 * Burger side panel added with links to the discover places listings, your bookings and a logout button.
-* Bottom menu with 2 links to 'Discover' (default page upon loading) and 'Offers' that lists all the places available. At the moment these lists are the same.
+* Bottom menu with 2 links to 'Discover' (default page upon loading) and 'Offers' that lists all the places available.
 
 ## Screenshots
 
@@ -35,6 +35,7 @@ Code taken from course.
 * [Ionic/angular v 4.7.1](https://ionicframework.com/)
 * [RxJS](https://angular.io/guide/rx-library)
 * [Google Firebase](https://firebase.google.com)
+* [Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/tutorial)
 
 ## Setup
 
@@ -86,7 +87,7 @@ private getGoogleMaps(): Promise<any> {
 * [Firebase backend database](https://firebase.google.com) used to store place and booking data.
 * Bookings can be cancelled from booking.page.
 * Place details can be edited (as long as user id matches) using a neat button that slides from the right.
-* [Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/tutorial) map-modal added to new-offer page. Clicking on 'SELECT LOCATION' will open Google Maps at a fixed location.
+* [Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/tutorial) map-modal added to new-offer page. Clicking on 'SELECT LOCATION' will open Google Maps at a fixed location. Address of place extracted from Google Maps data and stored in Places database.
 
 ## Status & To-do list
 

src/app/places/discover/place-detail/place-detail.module.ts

@@ -1,3 +1,4 @@
+
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -7,6 +8,7 @@ import { IonicModule } from '@ionic/angular';
 
 import { PlaceDetailPage } from './place-detail.page';
 import { CreateBookingComponent } from './../../../bookings/create-booking/create-booking.component';
+import { SharedModule } from '../../../shared/shared.module';
 
 const routes: Routes = [
 	{
@@ -20,7 +22,8 @@ const routes: Routes = [
 		CommonModule,
 		FormsModule,
 		IonicModule,
-		RouterModule.forChild(routes)
+		RouterModule.forChild(routes),
+		SharedModule
 	],
 	declarations: [PlaceDetailPage, CreateBookingComponent],
 	entryComponents: [CreateBookingComponent]

src/app/places/discover/place-detail/place-detail.page.html

@@ -25,6 +25,18 @@
       </ion-col>
     </ion-row>
 
+    <ion-row>
+      <ion-col size-sm="6" offset-sm="3" padding text-center>
+        <p>{{ place.location.address }}</p>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+        <ion-col size-sm="6" offset-sm="3" no-padding>
+          <ion-img role="button" (click)="onShowFullMap()" class="location-image" [src]="place.location.staticMapImageUrl"></ion-img>
+        </ion-col>
+      </ion-row>
+
     <ion-row *ngIf="isBookable">
       <ion-col size-sm="6" offset-sm="3" text-center>
         <ion-button color="primary" margin (click)="onBookPlace()">Book</ion-button>

src/app/places/discover/place-detail/place-detail.page.scss

@@ -0,0 +1,10 @@
+.location-image {
+	width: 100%;
+	height: 100%;
+	max-height: 30vh;
+	object-fit: cover;
+}
+
+p {
+	margin: 0;
+}

src/app/places/discover/place-detail/place-detail.page.ts

@@ -5,10 +5,10 @@ import { Subscription } from 'rxjs';
 
 import { PlacesService } from '../../places.service';
 import { Place } from '../../place.model';
-import { CreateBookingComponent } from './../../../bookings/create-booking/create-booking.component';
+import { CreateBookingComponent } from '../../../bookings/create-booking/create-booking.component';
 import { AuthService } from '../../../auth/auth.service';
 import { BookingService } from '../../../bookings/booking.service';
-import { Booking } from './../../../bookings/booking.model';
+import { MapModalComponent } from '../../../shared/map-modal/map-modal.component';
 
 @Component({
 	selector: 'app-place-detail',
@@ -128,6 +128,25 @@ export class PlaceDetailPage implements OnInit, OnDestroy {
 		});
 	}
 
+	onShowFullMap() {
+		this.modalCtrl
+			.create({
+				component: MapModalComponent,
+				componentProps: {
+					center: {
+						lat: this.place.location.lat,
+						lng: this.place.location.lng
+					},
+					selectable: false,
+					closeButtonText: 'Close',
+					title: this.place.location.address
+				}
+			})
+			.then(modalEl => {
+				modalEl.present();
+			});
+	}
+
 	ngOnDestroy() {
 		if (this.placeSub) {
 			this.placeSub.unsubscribe();

src/app/places/location.model.ts

@@ -0,0 +1,9 @@
+export interface Coordinates {
+	lat: number;
+	lng: number;
+}
+
+export interface PlaceLocation extends Coordinates {
+	address: string;
+	staticMapImageUrl: string;
+}

src/app/places/offers/new-offer/new-offer.page.html

@@ -75,7 +75,7 @@
 
       <ion-row>
         <ion-col size-sm="3" offset-sm="3">
-          <app-location-picker></app-location-picker>
+          <app-location-picker (locationPick)="onLocationPicked($event)"></app-location-picker>
         </ion-col>
       </ion-row>
 

src/app/places/offers/new-offer/new-offer.page.ts

@@ -1,8 +1,10 @@
+
 import { LoadingController } from '@ionic/angular';
 import { Router } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 
+import { PlaceLocation } from './../../location.model';
 import { PlacesService } from '../../places.service';
 
 @Component({
@@ -36,10 +38,15 @@ export class NewOfferPage implements OnInit {
 			dateTo: new FormControl(null, {
 				updateOn: 'blur',
 				validators: [Validators.required]
-			})
+			}),
+			location: new FormControl(null, { validators: [Validators.required]})
 		});
 	}
 
+	onLocationPicked(location: PlaceLocation) {
+		this.form.patchValue({location});
+	}
+
 	onCreateOffer() {
 		if (!this.form.valid) {
 			return;
@@ -56,7 +63,8 @@ export class NewOfferPage implements OnInit {
 						this.form.value.description,
 						+this.form.value.price,
 						new Date(this.form.value.dateFrom),
-						new Date(this.form.value.dateTo)
+						new Date(this.form.value.dateTo),
+						this.form.value.location
 					)
 					.subscribe(() => {
 						loadingEl.dismiss();

src/app/places/place.model.ts

@@ -1,3 +1,5 @@
+import { PlaceLocation } from './location.model';
+
 export class Place {
 	constructor(
 		public id: string,
@@ -7,6 +9,7 @@ export class Place {
 		public price: number,
 		public availableFrom: Date,
 		public availableTo: Date,
-		public userId: string
+		public userId: string,
+		public location: PlaceLocation
 	) {}
 }

src/app/places/places.service.ts

@@ -2,9 +2,10 @@ import { Injectable } from '@angular/core';
 import { Place } from './place.model';
 import { BehaviorSubject, of } from 'rxjs';
 import { take, map, tap, switchMap } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
 
 import { AuthService } from '../auth/auth.service';
-import { HttpClient } from '@angular/common/http';
+import { PlaceLocation } from './location.model';
 
 interface PlaceData {
 	availableFrom: string;
@@ -14,6 +15,7 @@ interface PlaceData {
 	price: number;
 	title: string;
 	userId: string;
+	location: PlaceLocation;
 }
 
 // new Place(
@@ -81,7 +83,8 @@ export class PlacesService {
 									resData[key].price,
 									new Date(resData[key].availableFrom),
 									new Date(resData[key].availableTo),
-									resData[key].userId
+									resData[key].userId,
+									resData[key].location
 								)
 							);
 						}
@@ -109,7 +112,8 @@ export class PlacesService {
 					placeData.price,
 					new Date(placeData.availableFrom),
 					new Date(placeData.availableTo),
-					placeData.userId
+					placeData.userId,
+					placeData.location
 				);
 			})
 		);
@@ -120,7 +124,8 @@ export class PlacesService {
 		description: string,
 		price: number,
 		dateFrom: Date,
-		dateTo: Date
+		dateTo: Date,
+		location: PlaceLocation
 	) {
 		let generatedId: string;
 		const newPlace = new Place
@@ -132,7 +137,8 @@ export class PlacesService {
 				price,
 				dateFrom,
 				dateTo,
-				this.authService.userId
+				this.authService.userId,
+				location
 			);
 
 		// post newPlace data to Firebase but replace id with null
@@ -191,7 +197,8 @@ export class PlacesService {
 					oldPlace.price,
 					oldPlace.availableFrom,
 					oldPlace.availableTo,
-					oldPlace.userId
+					oldPlace.userId,
+					oldPlace.location
 				);
 				return this.http.put(
 					`https://ionic-angular-project-a9d42.firebaseio.com/offered-places/${placeId}.json`,