Google maps 谷歌地图Javascript API

我正在尝试在我的应用程序上呈现谷歌地图，它一直在说：

Google Maps JavaScript API error: RefererNotAllowedMapError

我知道这是因为我没有网站主机，但我真的没有，因为它是Android应用程序。我没有主人。我还尝试了无限制地使用带有调试密钥库的google maps sdk。 有人能帮我吗

这是我的密码：

packages.json
"@ionic-native/google-maps": "^5.5.0",
"cordova-plugin-googlemaps": "^2.6.2",

config.xml
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="API_KEY" />

index.html
<script src="http://maps.google.com/maps/api/js?key=API_KEY"></script>

page.ts
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  LatLng,
  MarkerOptions,
  Marker,
  Environment
} from "@ionic-native/google-maps/ngx";

declare var google;

@Component({
  selector: 'app-quem-somos',
  templateUrl: './quem-somos.page.html',
  styleUrls: ['./quem-somos.page.scss'],
})
export class QuemSomosPage {
  @ViewChild('map', {static: false}) mapElement: ElementRef;
  @ViewChild('map2', {static: false}) mapElement2: ElementRef;

  map;
  map2;
  toastController;
  latLng;
  latLng2;

  constructor(toastController: ToastController, public platform: Platform, public launchNavigator: LaunchNavigator) {
      this.toastController = toastController;
   }

   ionViewDidEnter() {
    this.platform.ready().then(() => {
      this.loadMap();
    });

   }

  loadMap(){
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'API_KEY',
      'API_KEY_FOR_BROWSER_DEBUG': 'API_KEY'
    });

    this.latLng = new google.maps.LatLng(-22.918978, -47.071869);

    let mapOptions = {
      center: this.latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    this.latLng2 = new google.maps.LatLng(-22.979192, -47.127404);

    let mapOptions2 = {
      center: this.latLng2,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map2 = new google.maps.Map(this.mapElement2.nativeElement, mapOptions2);

    this.addMarker();
    this.addMarker2();
  }

page.html
<div class="abrir-mapa">
        <div class="abrir-mapa" #map id="map"></div>
      </div>

page.scss
#map {
    width: 100%;
    height: 100%;
}

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

.abrir-mapa {
    height: 25rem;
    width: 100%;
}

packages.json
“@ionic native/google地图”：“^5.5.0”，
“cordova插件谷歌地图”：“^2.6.2”，
config.xml
index.html
第页
进口{
谷歌地图，
谷歌地图，
谷歌地图服务公司，
拉丁，
标记选项，
标记，
环境
}来自“@ionic native/google maps/ngx”；
谷歌公司；
@组成部分({
选择器：'app quem somos'，
templateUrl:'./quem somos.page.html'，
样式URL:['./quem somos.page.scss']，
})
导出类Quemsomspage{
@ViewChild（'map'，{static:false}）mapElement:ElementRef；
@ViewChild（'map2'，{static:false}）mapement2:ElementRef；
地图；
map2；
烤面包机控制器；
板条；
latLng2；
构造函数（toastController:toastController，公共平台：平台，公共launchNavigator:launchNavigator）{
this.toastController=toastController；
}
ionViewDidEnter（）{
this.platform.ready（）。然后（（）=>{
这个.loadMap（）；
});
}
loadMap（）{
Environment.setEnv({
“用于浏览器发布的API密钥”：“API密钥”，
“用于浏览器调试的API密钥”：“API密钥”
});
this.latLng=new google.maps.latLng（-22.918978，-47.071869）；
让mapOptions={
中心：这个，拉丁，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
this.map=new google.maps.map（this.mapeElement.nativeElement，mapOptions）；
this.latLng2=新的google.maps.LatLng（-22.979192，-47.127404）；
设MapOptions 2={
中心：这个，latLng2，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
this.map2=新的google.maps.Map（this.mapement2.nativeElement，mapOptions2）；
这个.addMarker（）；
this.addMarker2（）；
}
page.html
page.scss
#地图{
宽度：100%；
身高：100%；
}
#map2{
宽度：100%；
身高：100%；
}
阿布里尔·马帕先生{
高度：25雷姆；
宽度：100%；
}

我能解决这个问题！ 我刚刚删除了android平台，删除了node_模块，它又开始工作了！

---

但是我想这是不应该发生的。

你能分享你的实现代码吗，我假设这是一个爱奥尼亚应用，对吗？分享你的代码。同时分享你在谷歌地图上使用的插件详细信息。你也在使用谷歌地图API密钥吗？编辑：用我的code@QuethzelD是的，它是离子型的app@NajamUSSaqib是的，我正在使用谷歌地图应用程序编程接口