My first map-app errors

Ionic Framework ionic-v3
6

I tried following solution but it fails for me

image
image1366×768 119 KB

map.ts

import {Component, NgZone} from "@angular/core";
import {NavController, Platform} from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, GoogleMapsMarkerOptions} from 'ionic-native';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  templateUrl: 'map.html'
})
export class MapPage {
  private map: GoogleMap;

  constructor(private _navController: NavController,
    private platform: Platform,
    private _zone: NgZone) {
    this.platform.ready().then(() => this.onPlatformReady());
  }


  private onPlatformReady(): void {

  }

  ngAfterViewInit() {
    GoogleMap.isAvailable().then(() => {

      this.map = new GoogleMap('map_canvas');

      this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        alert("GoogleMap.onMapReady(): " + JSON.stringify(data));

        this._zone.run(() => {
          let myPosition = new GoogleMapsLatLng(38.9072, -77.0369);
          console.log("My position is", myPosition);
          this.map.animateCamera({ target: myPosition, zoom: 10 });
        });

      });
    });
  }

  private onMapReady(): void {
    alert('Map ready');
  }
}

map.html

<div #map id=“map”>

map.scss
page-map {
.map {
.scroll {
height: 100%;
}

  #map {
      width: 100%;
      height: 100%;
  }
}
}