Ionic 4   Google Map  Integration | Part 1  | Simple Map

0
16397

I am going to show how to implement Google maps into our Ionic 4 application. You must generate a key from Google in order to use the Google Maps API. After go through with this tutorials, you will be a expert on Ionic 4   Google Map  Integration

You will create new project using the following CLI command.

ionic start GoogleMap blank

Ionic 4   Google Map 

We need to 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>

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.

We need to create a global variable for google using the following code

declare var google;

You should create the following class level variables

map;
@ViewChild('mapElement') mapElement;

You should implements the AfterContentInit method.

export class HomePage implements OnInit, AfterContentInit {}

We will create the map on ngAfterContentInit section. Your ngAfterContentInit code should like the following.

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.

The final output should be like the following.

Ionic 4   Google Map 
Output from real device.

Read more about Ionic 4   Google Map  Integration

Ionic 5 Native Camera integration