Google maps do not show up in Ionic2 app - google-maps

Question

The problem is that I don't see any map and the error appears when subscribe runs. Does anyone know how to help me?
I tryied some ways btu they don't work
google-maps-into-ionic-2 or google maps from ionic native
Html:
<button (click)="getMapresults()"></button>
<ion-content>
<div id="mapid"></div>
</ion-content>
Trypescript:
import {Component, ViewChild, OnInit, NgZone} from '#angular/core';
import {NavController, Platform} from 'ionic-angular';
import {
Geolocation, GoogleMap, GoogleMapsEvent, GoogleMapsMarker, GoogleMapsMarkerOptions,
CameraPosition, GoogleMapsLatLng
} from "ionic-native";
import {Observable} from "rxjs/Rx";
private gMap: GoogleMap;
location: {lat: number, lng: number};
constructor(public navCtrl: NavController,
public platform:Platform
) {}
getMapresults() {
this.platform.ready().then(()=>{
console.log('Platform ready!');
this.gMap = new GoogleMap('mapid');
this.gMap.on(GoogleMapsEvent.MAP_READY)
.subscribe(()=>{
console.log('Map!');
});
}
Error:
Uncaught (in promise): [object Object]
package.json:
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "^2.1.1",
"#angular/compiler": "^2.1.1",
"#angular/compiler-cli": "2.1.1",
"#angular/core": "^2.1.1",
"#angular/forms": "2.1.1",
"#angular/http": "2.1.1",
"#angular/platform-browser": "^2.1.1",
"#angular/platform-browser-dynamic": "^2.1.1",
"#angular/platform-server": "^2.1.1",
"#ionic/storage": "1.1.6",
"angular2-google-maps": "^0.16.0",
"ionic-angular": "2.0.0-rc.3",
"ionic-native": "2.2.3",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.45",
"typescript": "2.0.6"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "firstMobApp: An Ionic project"
}

Answer 1

There are few problems in your code. You need to send some parameters to Google map API in order to load google maps.
import { Component } from '#angular/core';
import { NavController, Platform } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';
#Component({
selector: 'home-page',
templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap;
constructor(public navCtrl: NavController, public platform: Platform) {
platform.ready().then(() => {
this.loadMap();
});
}
loadMap(){
let location = new GoogleMapsLatLng(-34.9290,138.6010);
this.map = new GoogleMap('map', {
'backgroundColor': 'white',
'controls': {
'compass': true,
'myLocationButton': true,
'indoorPicker': true,
'zoom': true
},
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true,
'zoom': true
},
'camera': {
'latLng': location,
'tilt': 30,
'zoom': 15,
'bearing': 50
}
});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
console.log('Map is ready!');
});
}
}