Google APIの設定はこちらのGoogle Cloud Platformで行う。
Google Cloud Platform
Google Cloud Platform lets you build, deploy, and scale applications, websites, and services on the same infrastructure as Google.
console.developers.google.com
参考にした記事
地図の表示と、地名検索ができるようにするだけならこちら
Rails5でGoogleMapを表示してみるまで - Qiita
はじめにInfratopという会社でプログラミングスクールでメンターをしていますした。最近、GoogleMapで地図出したいんだけど上手く出ないという質問がありまして、この際、まとめ記事を書い…
qiita.com
APIライブラリを有効にする方法はこちら
Google Maps の APIキー を取得する
Googleマップを表示させるには APIキー が必要です。APIキーを取得する場合は 「Google Cloud Platform」で プロジェクトを作成し、プロジェクト内でAPIキーを作成・請求先アカウントを紐づけるという作業が必要です。ここでは新しくプロジェクトを作成し、APIキー取得と請求先アカウントの設定方法...
nendeb.com
ここまでで、地図の表示はできる！でもこれでは未だ不十分です！
残りやること
・登録した住所をGoogle Mapで表示させる
・Google APIキーを.envに記載
参考にした記事がこちら
Rails 登録した住所をGoogle Mapで表示させる - Qiita
#実現したい事Railsで登録した住所を元にgoogle map上に位置を表示するまでの実装方法をまとめました。以下のデモのように入力フォームに登録した住所を用いて詳細ページでGoogle Ma…
qiita.com
忘れてはいけないのが、GithubへのGoogle APIキーのcommit
キーを公開しないよう気をつけてください！
現在位置情報の取得はこちらを参考
Google Maps API の使い方 利用方法
Google Maps API の基本的な使い方から簡単な応用まで。APIキーの取得から地図、マーカー、情報ウィンドウの表示やイベントの設定方法、ジオコーディング、Directions API、Places Service プレイス、Maps Embed API、Static Maps APIについての解説など。
www.webdesignleaves.com
AWSデプロイしている場合の書き方
【Rails】住所を入力すると自動で地図表示される方法(Google Maps API) - Qiita
#はじめにポートフォリオ制作で、Google Maps APIを用いて住所フォームを送信した際に住所名と地図を自動で地図表示される設定を行ったので、アウトプットも兼ねて手順を紹介していきます。#…
qiita.com
なぜかできない！
jsのconsoleエラー文はこちら
Uncaught (in promise)
Ge {message: "initMap is not a function",
name: "InvalidValueError",
stack: "Error\n at new Ge (https://maps.googleapis.com/m…&callback=initMap:164:531"}分からない！！！
rails cで緯度、経度を確認すると、どちらもnilになっている！
ここにマニュアルで値を入れてみると、、地図が表示された！！！
緯度、経度が入っていないことが原因だった！！
seedデータの投入ができなくなった。
エラー文
Google API error: request denied (API keys with referer restrictions cannot be used with this API.).
次なる問題
addressのデータが緯度、経度に入らない！
コメント