Ionic3离子原生谷歌地图不显示地图但只显示谷歌徽标（显示灰色空白地图） [英] Ionic3 ionic native google maps doesn't show map but only google logo (display grey blank map )

问题描述

更新

感谢

原始问题：

离子原生谷歌地图无法正确显示地图。
我按照离子原生谷歌地图指南
我使用以下方法安装了最新的离子原生谷歌地图：

  npm install @ ionic-native / google-maps 
  

按

添加API密钥

 离子cordova插件添加cordova-plugin-googlemaps \ 
  - 变量API_KEY_FOR_ANDROID =...\ 
  - 变量API_KEY_FOR_IOS =...
  

为Android和IOS启用了地图SDK。

我测试了离子cordova运行ios -l -c --target =iPhone-7

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

我在网上搜索它说不正确的API KEY会导致这个问题，但我试过了Web应用程序上的相同键，可以显示map cor直接。

有人可以帮忙吗？谢谢！

解决方案

灰色地图总是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 guide I 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离子原生谷歌地图不显示地图但只显示谷歌徽标（显示灰色空白地图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！