Empty ion-content with google-map - Ionic2

Question

I'm developing a page in ionic2 in order to handle google map. But my ion-content display nothing. My html page contains the following code:

<ion-header>
    <ion-navbar>
        <ion-title>{{text.title}}</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
  <div #map id="map"></div>  
</ion-content>

While my ts file contains:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { Recosh } from '../../providers/recosh';

declare var google;

@Component({
    selector: 'page-search',
    templateUrl: 'search.html'
})
export class SearchPage {

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

  constructor(public navCtrl: NavController, public recoshService: Recosh, public alertCtrl: AlertController) {
        this.text = {
            title   :   this.recoshService.getMessage(1),
        }
  }

  ionViewLoaded(){
    this.loadMap();
  }

  loadMap(){
    console.log("loading maps...");
    let latLng = new google.maps.LatLng(-34.9290, 138.6010);

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

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

  }
}

and the src/index.html has the following row as well:

<script src="https://maps.google.com/maps/api/js?key=*************"></script>

When I start my ionic2 project ( ionic serve ), while loading the page the map is not shown.

The created key on google APIs has no restriction, and it was done with my active API Google Maps JavaScript API.

I thought it was a problem with APIs so I added all the following:

 Google Maps Android API
 Google Maps Directions API
 Google Maps Geocoding API
 Google Maps Geolocation API
 Google Maps JavaScript API
 Google Maps SDK for iOS
 Google Places API for Android
 Google Places API for iOS
 Google Places API Web Service

But my page still does not show any map.

The strange thing is that my console.log in the loadMap() function it is not shown in the console of my web browser (chrome); so it seems that loadMap is not called at all...

There are actually some warnings in my app but they appear before entering in the page:

Sorry but I don't see a console.log inside your ionViewLoaded and loadMap functions. In this way is impossible to detemine by chrome console if function is running or not. — giaffa86
it was just an example, however I updated the question in order to include it. — pittuzzo
Fine, maybe your component is never been called. Your html page is called search.html? Where did you put page-search selector? — giaffa86
the page itself it is loading because I can see it and the title, just the map is not shown. If I write something inside the <div> it is also shown. The app.modules.ts is correctly set. — pittuzzo

shanthan shanthan · Accepted Answer · 2020-04-09T06:31:10

Just put the map component outside of ion-content

<ion-header>
<ion-navbar>
    <ion-title>{{text.title}}</ion-title>
</ion-navbar>
</ion-header>

<ion-content></ion-content>

<div #map id="map"></div>

Empty ion-content with google-map - Ionic2

1 Answers