🎈 この記事はWP専用です
https://wp.me/pc9NHC-q8
前置き
Maps JavaScript API
こちらのAPIを使用して
GoogleMapを表示させます✨🗺
APIって便利そうだけど
難しそうだな…😔
って思っている方は少なくないはず。
でも実は！！
コード自体はクイックスタートのコードがあるので
コピペだけで簡単に表示できてしまうんです❤️
どちらかというと
APIを使えるようにする
準備段階の方が時間がかかります😂笑
でも、やり方さえ分かれば
他のAPIを使う時のハードルも
かなり低くなってきますよ♪
それではやっていきましょう✨✊
Google Cloud Platform でAPIの準備
大まかな流れ
- Google Cloud Platform でプロジェクトを作成
- そのプロジェクトで使いたいAPIを有効化する
- 認証情報を作成、APIキーを発行する
- APIキーを使って地図を表示させる
公式ガイド
https://cloud.google.com/resource-manager/docs/creating-managing-projects
具体的な設定などは後述しているので
まずは流れを把握しましょう🌟
APIキーはAPIを使うための鍵、
パスワードのようなものです✨🗝
Maps JavaScript APIの使用条件と設定方法
使用条件
こちらのAPIは無料で使えますが、
クレジットカード情報の登録が必要です💳
有料にアップグレードしない限りは請求されません。
無料分がなくなっても
地図が表示されなくなるだけです👀
また支払い方法の設定だけでなく、
支払いをするアカウントの設定が必要です👨👩👧👦
料金についてはこちら
https://cloud.google.com/maps-platform/pricing/sheet?hl=ja
設定方法
こちらのサイトが分かりやすいです💕
https://lopan.jp/google-maps-use-api/
コードを書いて実際に表示させる
vue2-google-mapsのインストール
🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-q8