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 :

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 for native and 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;
  selector: 'home-page',
  templateUrl: 'home.html'
export class HomePage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  constructor(public navCtrl: NavController) {
    let latLng = new google.maps.LatLng(-34.9290, 138.6010);
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    } = 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?

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)