I am going to show how to implement Google maps 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%;
}

Then, open your home.page.html file. Replace the HTML content using the following code

<ion-header>
<ion-toolbar>
<ion-title>
Google Map
</ion-title>
</ion-toolbar>
</ion-header>

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

don’t forget to create a div for map. Here we accessing this div using the template reference variable and apply the class.

<div #mapElement class="map"></div>

Open your home.page.ts file.

Create a global variable for google using the following code

declare var google;

Next, create the following class level variables

map;
@ViewChild('mapElement') mapElement;

implements the following life cycle on home page

export class HomePage implements OnInit, AfterContentInit {}

write the following code on ngAfterContentInit method

ngAfterContentInit(): void {
this.map = new google.maps.Map(
this.mapElement.nativeElement,
{
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}

home.page.ts

import { AfterContentInit, Component, OnInit, ViewChild} from '@angular/core';
declare var google;

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, AfterContentInit {
map;
@ViewChild('mapElement') mapElement;
constructor() {
}

ngOnInit(): void {
}

ngAfterContentInit(): void {
this.map = new google.maps.Map(
this.mapElement.nativeElement,
{
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
}

run your project using CLI command.

Finally, you will get the output like this

Output from real device.