Googlemap in IONIC Mobile App

Ionic Framework ionic-v3
1

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.

Thanks,
Sakthi

2

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

3

Hi Team,

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

MapSample

Thanks,
Sakthi

4

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

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

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;

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

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

  constructor()   {}

  ngOnInit() {
    this.loadMap();
  }

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

    const mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }

}