【Nuxt.js】API：GoogleMap

前置き

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のインストール

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

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

terminal

$ npm install vue2-google-maps

コード

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

) pages

<template>
  <div class="page">
    <GmapMap
      :center="{lat:10, lng:10}"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
      />
    </GmapMap>
  </div>
</template>

<script>
export default {
   data () {
     return {
       // latが緯度、lngが経度
       markers: [{ position: { lat: 10, lng: 10 } }],
     }
   },
}
</script>

<GmapMap

:center="{lat:10, lng:10}"

:zoom="7"

map-type-id="terrain"

style="width: 500px; height: 300px"

<GmapMarker

:key="index"

v-for="(m, index) in markers"

:position="m.position"

:clickable="true"

:draggable="true"

@click="center=m.position"

</GmapMap>

</div>

</template>

export default {

data () {

return {

// latが緯度、lngが経度

markers: [{ position: { lat: 10, lng: 10 } }],

}

</script>

) file

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'ここにAPIKeyを貼り付ける',
    libraries: 'places'
  }
})

import Vue from 'vue'

import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {

load: {

key: 'ここにAPIKeyを貼り付ける',

libraries: 'places'

}

})

) file

export default {
  plugins: [
    '~/plugins/vue2-google-maps.js',
  ],
  build: {
    transpile: [/^vue2-google-maps($|\/)/]
  }
}

export default {

plugins: [

'~/plugins/vue2-google-maps.js',

build: {

transpile: [/^vue2-google-maps($|\/)/]

}

緯度と経度

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

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

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

<GmapMap
      :center="{lat:35.6814366, lng:139.767157}"
>
</GmapMap>

<GmapMap

:center="{lat:35.6814366, lng:139.767157}"

</GmapMap>

正しく表示されない場合

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

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

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

まとめ

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

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

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