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 :
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.
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);
}
}