Ionic 4  Google Map  | Part 2 |  Geo Location

0
10493
Ionic 4  Google Map

I am going to show how to implement Geo Location into our Ionic 4 Google Map application. We are going to need to generate a key from Google in order to use the Google Maps API.

Create new project using the following CLI command.

ionic start GoogleMap blank

Next, add the following script on tour index.html file head section

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
//Replace your API key here.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
  <base href="/" />
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
  <!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>

finally, your index.html file like this.

Next goto the homepage directory. open the home.page.scss file. and add the following scss code.

.map {
height: 100%;
}

Create a new page using the following command

ionic g p geolocation

Your component template file like this

<ion-header>
<ion-toolbar>
<ion-title>GeoLocation</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<div #mapElement class="map"></div>
</ion-content>

Your component class file like this

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
declare var google;
@Component({
selector: 'app-geolocation',
templateUrl: './geolocation.page.html',
styleUrls: ['./geolocation.page.scss'],
})
export class GeolocationPage implements OnInit, AfterViewInit {
latitude: any;
longitude: any;
@ViewChild('mapElement') mapNativeElement: ElementRef;
constructor(private geolocation: Geolocation) { }

ngOnInit() {
}

ngAfterViewInit(): void {
this.geolocation.getCurrentPosition().then((resp) => {
this.latitude = resp.coords.latitude;
this.longitude = resp.coords.longitude;
const map = new google.maps.Map(this.mapNativeElement.nativeElement, {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
const infoWindow = new google.maps.InfoWindow;
const pos = {
lat: this.latitude,
lng: this.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}).catch((error) => {
console.log('Error getting location', error);
});
}

}

Your component module file like this

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { IonicModule } from '@ionic/angular';

import { GeolocationPage } from './geolocation.page';

const routes: Routes = [
{
path: '',
component: GeolocationPage
}
];

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [GeolocationPage],
providers: [Geolocation]
})
export class GeolocationPageModule {}

Follow the steps to implement google maps into your ionic application. For more ionic tutorial visit my website regularly. Don’t forget to subscribe my YouTube channel for video tutorials. Thank you.

Ionic Google Map Part 4

Ionic Google Map Part 1

Ionic Native Camera with File Upload

Ionic Signature Pad