API

【Nuxt.js】API:GoogleMap

前置き

Maps JavaScript API
こちらのAPIを使用して
GoogleMapを表示させます✨🗺

APIって便利そうだけど
難しそうだな…😔

って思っている方は少なくないはず。

でも実は!!

コード自体はクイックスタートのコードがあるので
コピペだけで簡単に表示できてしまうんです❤️

どちらかというと
APIを使えるようにする
準備段階の方が時間がかかります😂笑
でも、やり方さえ分かれば
他のAPIを使う時のハードルも
かなり低くなってきますよ♪

それではやっていきましょう✨✊


Google Cloud Platform でAPIの準備

大まかな流れ

  1. Google Cloud Platform でプロジェクトを作成
  2. そのプロジェクトで使いたいAPIを有効化する
  3. 認証情報を作成、APIキーを発行する
  4. 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のインストール

vue2-google-mapsを使用してみます!
使える物は使っちゃいましょう🌟
https://www.npmjs.com/package/vue2-google-maps

Nuxtを使用している場合の
クイックスタート用コードが書かれているため
非常に簡単に導入することができます🍒🤗

terminal

$ npm install vue2-google-maps


コード

クイックスタートのコードをコピペ!
dataにmarkersを書かなくても
地図自体は表示されます🙆‍♀️

) pages

) file

) file


緯度と経度

緯度と経緯を指定して
表示させる位置を変えてみましょう。

こちらが参考になります💕
https://www.javadrive.jp/google-maps-javascript/gmap2/index4.html

試しに中身のlatとlngを
こちらにしてみてください🗼
これで東京が中身になるはずです🌟


正しく表示されない場合

こんな感じで地図が正しく表示されない場合があります。
consoleを開いてエラーメッセージを確認し、
こちらと照らし合わせてみてください。
Error Messages

主にAPIキーが正しくない、
支払い登録や支払いアカウント設定ができていない
の可能性が考えられます。

APIキーが正しいかは
Chromeの拡張機能で確認しましょう。
緑なら正しいです。


まとめ

いかがでしたか?
全体の流れを把握すれば
「意外とスムーズにいけるかも🎈🤔」
そんなイメージが湧いたのではないでしょうか?💡

エラーがあった場合でも、
公式にエラーメッセージと対応方法が書かれているので、
やりやすいかと思います🤗

ご意見ご感想あれば
コメントいただけると嬉しいです♪

-API
-,

© 2020 aLiz Nuxt