laravel5.5 で地図を使ったwebアプリの開発をしています。
Google maps javascript Api key の取得と設定に関しては色々なサイトを参考にきちんと確認して設定し、再取得も試してみました。
しかし開発環境(aws cloud9 IDE)では以下のようなapi-key-and-billing-errorsがでてしまいうまく地図が表示されません。またchromeブラウザの検証のElementsではキーが消えています。keyを直ガキするとマップは表示されます。
console
1You are using this API without a key. See https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors 2 3util.js:228 Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys 4 5util.js:228 Google Maps JavaScript API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key 6 7読み込んだはずのキーが消えている 読み込み方は下の方に記載の本番環境と同じで四種類試したがすべでダメ。正常に表示されず。 8<script src="https://maps.googleapis.com/maps/api/js?key=&callback=all_map" async defer></script> 9
billing healthの問題を解決したというのは予算を設定しいなかったのでオレンジ色の健康状態のものが一つありましたので予算を設定して、そのからKEYもとり直し丸一日以上経過しているので問題はないのかなと思っています。
本番環境(heroku)では表示はされているがAPI KEYがchromeブラウザの検証のElementsに露出してしまいます。
また、keyの読み込みかたですが以下のように色々試しましたが、本番環境では全てkeyが見えてしまって開発環境では全て読み込めず消えています。
html
1<script src="https://maps.googleapis.com/maps/api/js?key={{config('services.gmap-api')}}&callback=all_map" async defer></script> 2<!--<script src="https://maps.googleapis.com/maps/api/js?key={{config('app.gmap-api')}}&callback=all_map" async defer></script>--> 3<!--<script src="https://maps.googleapis.com/maps/api/js?key={{getenv('GOOGLE_MAPS_API_KEY')}}&callback=all_map" async defer></script>--> 4<!--<script src="https://maps.googleapis.com/maps/api/js?key={{env('GOOGLE_MAPS_API_KEY')}}&callback=all_map" async defer></script>-->
config/services.php, config/app.php (全く同じ記述です。)
php
1'gmap-api' => env('GOOGLE_MAPS_API_KEY'),
.env
php
1GOOGLE_MAPS_API_KEY=xxxxxxxxxxxxxxxxxx
herokuには
heroku config:set GOOGLE_MAPS_API_KEY=xxxxxxxxxxxxxxxxxx
で環境変数をセットしました。
ここで行き詰まりました、どうしたら良いでしょうか?ご教授願います。
あなたの回答
tips
プレビュー