Ionic with google map

Ionic Framework
1

Hello,

I would like to have a map appear on a specific page.

I have already included the entire library on the page in question (poster.page.ts).

import { Component, OnInit } from '@angular/core';
import { HTTP } from '@ionic-native/http/ngx';
import { ActivatedRoute } from '@angular/router';
import { ActionSheetController, Platform, AlertController } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsMapTypeId,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker,
  Environment
} from '@ionic-native/google-maps';



@Component({
  selector: 'app-affiche',
  templateUrl: './affiche.page.html',
  styleUrls: ['./affiche.page.scss'],
})
export class AffichePage implements OnInit {
  sub: any;

  constructor(
    private route:ActivatedRoute,
    private http:HTTP,
    public alertController:AlertController,
    public actionCtrl:ActionSheetController,
    private httpclass:HttpClient,
    private platform:Platform

  ) {
    if (this.platform.is('cordova')) {
      this.loadMap();
    }
  }

  public id: any;
  public post: any;
  map: GoogleMap;

  // Déclaration des principales informations propre à Google Map pour afficher les informations sous forme de carte
  
  loadMap() {
    Environment.setEnv({
      API_KEY_FOR_BROWSER_RELEASE: 'XXX',
      API_KEY_FOR_BROWSER_DEBUG: 'XXX'
    });
    this.map = GoogleMaps.create('map_canvas', {
      camera: {
        target: {
          lat: 43.610769,
          lng: 3.876716
        },
        zoom: 12,
        tilt: 30
      }
    });
    this.map.setMapTypeId(GoogleMapsMapTypeId.SATELLITE);
  }

Then here is the full code of the page, and unfortunately my page remains blank.

<ion-card>
        <ion-card-content>
          <div id="map_canvas"></div>
        </ion-card-content>
      </ion-card>

Thank’s !

2

Could it be that you have to set a height for the map div? ie

#map_canvas {
    height: 100%;
}
3

Nothing changes

Capture d’écran 2020-08-31 à 16.31.15

I still have my empty card :pensive:

4

I specify that the problem is present when I run under iOs, and under a browser

5

So, I managed to display the map with my point unfortunately it is bugged.

I don’t have the map in the background. But in my browser no problem, do you have any idea?
Capture d’écran 2020-08-31 à 18.02.50

6

I solved the problem by adding a specific key for iOs, and adding my package name from the Google console