【Rails】Google map APIの機能追加

プログラミング

Google APIの設定はこちらのGoogle Cloud Platformで行う。

Google Cloud プラットフォーム
Google Cloud Platform では、Google と同じインフラストラクチャでアプリケーション、ウェブサイト、サービスを構築、導入、拡大することができます。

参考にした記事

地図の表示と、地名検索ができるようにするだけならこちら

Rails5でGoogleMapを表示してみるまで - Qiita
はじめに Infratopという会社でプログラミングスクールでメンターをしていますした。 最近、GoogleMapで地図出したいんだけど上手く出ないという質問がありまして、 この際、まとめ記事を書いてしまおうと思った次第です。 ...

APIライブラリを有効にする方法はこちら

Google Maps の APIキー を取得する
Googleマップを表示させるには APIキー が必要です。APIキーを取得する場合は 「Google Cloud Platform」で プロジェクトを作成し、プロジェクト内でAPIキーを作成・請求先アカウントを紐づけるという作業が必要です。ここでは新しくプロジェクトを作成し、APIキー取得と請求先アカウントの設定方法...

ここまでで、地図の表示はできる!でもこれでは未だ不十分です!

残りやること

・登録した住所をGoogle Mapで表示させる

Google APIキーを.envに記載

参考にした記事がこちら

Rails 登録した住所をGoogle Mapで表示させる - Qiita
実現したい事 Railsで登録した住所を元にgoogle map上に位置を表示するまでの実装方法をまとめました。 以下のデモのように入力フォームに登録した住所を用いて詳細ページでGoogle Map上にその位置を表示させます。 ...

忘れてはいけないのが、GithubへのGoogle APIキーのcommit

キーを公開しないよう気をつけてください!

現在位置情報の取得はこちらを参考

Google Maps API の使い方 利用方法 / Web Design Leaves
Google Maps API の基本的な使い方から簡単な応用まで。APIキーの取得から地図、マーカー、情報ウィンドウの表示やイベントの設定方法、ジオコーディング、Directions API、Places Service プレイス、Maps Embed API、Static Maps APIについての解説など。

AWSデプロイしている場合の書き方

【Rails】住所を入力すると自動で地図表示される方法(Google Maps API) - Qiita
はじめに ポートフォリオ制作で、Google Maps APIを用いて住所フォームを送信した際に住所名と地図を自動で地図表示される設定を行ったので、アウトプットも兼ねて手順を紹介していきます。 手順 1.Google Ma...

なぜかできない!

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のデータが緯度、経度に入らない!

コメント

タイトルとURLをコピーしました