如何将map与Ionic集成

我正在开发一个离子应用程序,我应该显示最近的“非政府组织”给用户。

我是这样做的:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

declare var google;
let map: any;
let infowindow: any;
let options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
 };

 @Component({
   selector: 'page-home',
   templateUrl: 'home.html'
})
export class HomePage {

@ViewChild('map') mapElement: ElementRef;
map: any;

 constructor(public navCtrl: NavController, public platform: Platform) {
  platform.ready().then(() => {
  this.initMap();
});
}

 initMap() {
  navigator.geolocation.getCurrentPosition((location) => {
  map = new google.maps.Map(this.mapElement.nativeElement, {
    center: { lat: location.coords.latitude, lng: location.coords.longitude 
   },
    zoom: 15
  });

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: { lat: location.coords.latitude, lng: 
 location.coords.longitude },
    radius: 1000,
    keyword: 'ngo',
    type: ["point_of_interest", "establishment"]


    }, (results, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        this.createMarker(results[i]);
      }
    }
  });
  }, (error) => {
  console.log(error);
}, options);
}

 createMarker(place) {
var placeLoc = place.geometry.location;
var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
  map: map,
  position: placeLoc,
  icon: image
});
console.log(place);
google.maps.event.addListener(marker, 'click', function () {
  // infowindow.setContent(place.name);
  // infowindow.open(map, this);
  infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
    'Place ID: ' + place.place_id + '<br>' +
    place.vicinity + '</div>');
  infowindow.open(map, this);
});
}}

我的问题是,我可以看到我的功能在浏览器中运行良好,但在离子实验室浏览器和我生成的apk中都不行。

在离子实验室chrome选项卡中,我看到以下警告/错误: polyfills.js文件:2由于应用于当前文档的功能策略,地理位置访问已被阻止。