Google map in a tab not showing

Hi everybody,

I am just discovering ionic, and I am trying to integrate Google map in a tab (tab D in the project below). I’ve followed several tutorials but every time my tab remain blank. I know there are plenty of post to fix this problem but I didn’t manage to fix it on my project.

Here are my questions : Is the map supposed to be shown when using the “ionic serve --lab” command ? if so, can anyone have a look to my code to figure out what’s wrong. If not how am I supposed to test my project ? (I tried with the xCode simulator, same issue).

I am working under mac OSX. Here is the source code :

https://github.com/thomarago/ionic/blob/master/ujuv.zip

Thank you

Are you using the web version or the native sdk?

The native sdk must be run in a simulator or on the device. You should see an error in the console log when you run ionic serve or ionic serve --lab that indicates that “cordova” can’t be found.

Web is a completely different issue, try reviewing https://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/ for native and https://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/ for web

OK thank you ! It looks like I was confusing sdks. I am following your tutorial for web, but I am getting a weird error on the console, it says “can’t find variable google”. I just followed the tutorial from a new blank project as asked. Here is my code :

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
 
declare var google;
 
@Component({
  selector: 'home-page',
  templateUrl: 'home.html'
})
export class HomePage {
 
  @ViewChild('map') mapElement: ElementRef;
  map: any;
 
  constructor(public navCtrl: NavController) {
 
  }
 
  ionViewDidLoad(){
    this.loadMap();
  }
 
  loadMap(){
 
    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);
 
  }
}

Your zip file’s code is Ionic v1, but the sample you just posted is for v2/3.

For the v2 sample, you need to install the typings file.

yes, it’s not related anymore. What do you mean by install the typings file ? Sorry about this question, as I said I am beginning in app development.

Chris, do you have any suggestions for this issue?

https://www.npmjs.com/package/@types/googlemaps

npm install @types/google-maps --save-dev --save-exact

You are entering your API keys correct?

This is a known Problem. I have a working Solution for that. I add this to my project here soon:

(I added the tabs to this Project)