I am going to show how to implement Geo Location into our Ionic 4 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 {}

Thank you.