Hello All, In the last topic of Ionic 4, We had discussed How to use SAAS mixin in Ionic 4 applications. Now, In this topic, We will discuss How to add a google map in the Ionic 4 application. What are the basic steps required to add Google Maps in the Ionic application? If you want to see How to implement Google maps in the Ionic 3 application then I have already made a tutorial for this here.
Table of Contents
Steps required to add Google Maps In the Ionic application
Step 1: Create a new project using Ionic CLI.
Step 2: Create a new page using CLI
ionic g page display-maps
Write the above command to generate a new page in the Ionic 4 application.
Step 3: Install the dependency of google maps
npm install @types/googlemaps --save-dev
We have to add the above dependency using
Step 4: Add script file in index.html
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
After adding the dependencies add the google maps API script in index.html. This is the most important step otherwise you will face errors.
Step 5:Write the HTML file to display Google Maps
<ion-header>
<ion-toolbar>
<ion-title>Display maps in Ionic 4 application</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-header>Google Maps</ion-card-header>
<div id="myMapElement" class="viewMap"></div>
<ion-card-content>
</ion-card-content>
</ion-card>
</ion-content>
Here, We include the div inside Ion-card to get a better display of the map.
Step 6: Add required CSS
In the above HTML, We have added only one CSS for viewMap. The code for viewMap is as follows
.viewMap{
height: 350px;
}
Step 7: Write typescript code as follows
- Import the google maps module as follows
import { } from 'googlemaps';
- Now, write below code in your display-maps.page.ts file
import { Component, OnInit, ViewChild } from '@angular/core';
import { } from 'googlemaps';
@Component({
selector: 'app-display-maps',
templateUrl: './display-maps.page.html',
styleUrls: ['./display-maps.page.scss'],
})
export class DisplayMapsPage implements OnInit {
myMap: any;
constructor() { }
ngOnInit() {
this.displayMaps();
}
displayMaps() {
console.log("displayMaps");
this.myMap = new google.maps.Map(document.getElementById('myMapElement'),{
zoom: 10,
center: { lat: 19.035145, lng: 72.715102 }
});
}
}
Step 8 : Create new file under src folder
Now, we have to create a new file under the src folder. Rename this file as index.d.ts
Write below code in this file
declare module 'googlemaps';
Step 9: Output
Now, We can able to see google maps in our Ionic 4 application

This is how we can able to implement Google Maps in the Ionic 4 application.