Ionic3 离子本机谷歌地图不显示地图而只显示谷歌标志(显示灰色空白地图)

问题描述

更新

感谢

原始问题:

离子本机谷歌地图无法正确显示地图.我遵循了 Ionic 原生谷歌地图指南

npm install @ionic-native/google-maps

添加的 API 密钥

ionic cordova plugin add cordova-plugin-googlemaps --变量 API_KEY_FOR_ANDROID="..." --变量 API_KEY_FOR_IOS="..."

为 Android 和 IOS 启用 Maps SDK.

我用 ionic cordova run ios -l -c --target="iPhone-7"

进行了测试

花了几个小时删除所有包和平台并重新添加它们，没有任何效果

我在网上搜索它说不正确的 API KEY 导致了这个问题，但我在可以正确显示地图的网络应用程序上尝试了相同的密钥.

有人可以帮忙吗?谢谢！

解决方案

灰图始终是 api 的关键问题.https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.3.0/api_key/README.md

Update

Thanks for the answer of wf9a5m75. I had a concept misunderststand on the API Keys. The Android and IOS API Key are generated from Google Cloud Platform Console(https://cloud.google.com/maps-platform/). I was using https://console.developers.google.com/ which is for Google Maps Javascript and that's why when I test the API Key on web application it works but not for mobiles.

For anyone who follows the Ionic native google maps guide, use https://cloud.google.com/maps-platform to generate your key

Original Question:

Ionic native google maps don't show map properly.I followed Ionic native google maps guideI have installed latest ionic native google maps using:

npm install @ionic-native/google-maps

Added API key by

ionic cordova plugin add cordova-plugin-googlemaps
  --variable API_KEY_FOR_ANDROID="..."
  --variable API_KEY_FOR_IOS="..."

Enabled Maps SDK for both Android and IOS.

I tested with ionic cordova run ios -l -c --target="iPhone-7"

Have spend a couple of hours removing all packages and platforms and re-add them, nothing works

I searched online it says the incorrect API KEY causes this issue but I tried the same key on a web application which can show map correctly.

Can anyone help? Thanks!

解决方案

Gray map is always api key problem.https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.3.0/api_key/README.md

这篇关于Ionic3 离子本机谷歌地图不显示地图而只显示谷歌标志(显示灰色空白地图)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！