Googlemap in IONIC Mobile App

Hi Team,

I try add the google map in Ionic App but it is not even showing as well as not showing any error too. I tried with Android app as well still no luck.


Can you tell us how you tried to add the map, and share your code?

Hi Team,

Here is a my sample links. I used Google map javascript api but map still not displaying.



Ok. The basic problem is you are mixing Ionic 3 with Ionic 4.

In your.scss file, you just need to say

#map {
  width: 100%;
  height: 100%;

In the html file, your Add Marker button is incorrect

      Ionic Blank
    <ion-buttons slot="secondary">
          <ion-icon name="add"></ion-icon>Add Marker

In your .ts file you reference an Ionic event that does not exist in Ionic 4, and hence never called:

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation';

declare var google;

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage implements OnInit {

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor()   {}

  ngOnInit() {

  loadMap() {
    const latLng = new google.maps.LatLng(-34.9290, 138.6010);

    const mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }; = new google.maps.Map(this.mapElement.nativeElement, mapOptions);