Vue.jsでGoogleMapを表示させる方法

この記事について

vue2-google-mapsというライブラリを使って、Vue.js(vue-cli)にGoogleMapを表示させる方法を書いていきます。

準備

まず、Google Cloud PlatformからAPI keyを取得します。
プロジェクトの作成→Maps JavaScript APIの有効→認証情報を作成で取得

npmでvue2-google-mapsをインストールする。

$ npm install vue2-google-maps

main.jsに以下を追加します。

main.js

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

Vue.use(VueGoogleMaps, {
  load: {
    key: YOUR API KEY,
    libraries: 'places',
    region: 'JP',
    language: 'ja'
  }
})

GoogleMapを表示する

Sample.vue

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

<script>
export default {
  data() {
    return {
      markers: [{ position: { lat:35.4122, lng:139.4130 } }]
    };
  },
};
</script>

これで東京を中心に地図を表示し、マーカーも中心に設置しています。
optionではストリートビューの表示を消しています。
map-type-idのterrainは地形情報を使った地図を表しています。

マーカーはdataのmarkersの情報を元に設置させています。

おわりに

今回は簡単にMapを表示しただけなので、情報ウィンドウの表示など詳しくはまた別で書こうと思います。