How to add a google map in Ionic 4

Share the post

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.

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=""></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-title>Display maps in Ionic 4 application</ion-title>

    <ion-card-header>Google Maps</ion-card-header>
    <div id="myMapElement" class="viewMap"></div>



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

    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 file
import { Component, OnInit, ViewChild } from '@angular/core';
import { } from 'googlemaps';

  selector: 'app-display-maps',
  templateUrl: './',
  styleUrls: ['./'],
export class DisplayMapsPage implements OnInit {

  myMap: any;

  constructor() { }

  ngOnInit() {

  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.

Leave a Comment