Help us understand the problem. What is going on with this article?

Nuxt.jsでアイコンとスタイルをカスタマイズしたGoogle mapを埋め込む

nuxt.jsを使った案件でGoogle mapをカスタマイズする必要があり、アイコンもスタイルも変更〜という記事が意外と見つからなかったので覚え書きです。
初学者向け。

方法は色々あると思いますが、今回はvue2-google-mapsを使ったやり方を紹介します。

ファイル構成

assets
 ∟ img
  ∟ pin.png
pages
 ∟ map
  ∟ index.vue
plugins
 ∟ vue2-google-maps.js
nuxt.config.js

手順

vue2-google-mapsの手順の中にあるExample project by Alexander Lichterを参考にしていますので、まずは一度目を通すことをおすすめします。

vue2-google-mapsをインストール

まず最初にnuxt.config.jsがあるディレクトリに移動し、npm i vue2-google-mapsでvue2-google-mapsをインストールします。(npm推奨とのこと)

plugins/vue2-google-maps.jsを作成

pluginsディレクトリにvue2-google-maps.jsを作成します。
Google map APIキーはGoogle Map Platformで取得しましょう。
キー作成時に登録するURLと実際にマップを表示させるURLが異なるとエラーになるので注意してください。

plugins/vue2-google-maps.js
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'Google map APIキー',
    libraries: 'places'
  }
})

nuxt.config.jsを編集

続いてnuxt.config.jsに下記の内容を加えます。

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

Google mapを表示させたいページにコードを追加する

<GmapMap></GmapMap>にマップが表示されるので、好きな場所に挿入してください。

pages/map/index.vue
<template>
  <div>
    <GmapMap
      :center="{lat:35.681214, lng:139.767050}" //中心に表示させたい座標
      :zoom="16" //地図の縮尺(数字が大きいほどズームされる)
      v-bind:options="options"
      map-type-id="terrain"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        :icon="{url: require('~/assets/img/pin.png')}" //カスタムアイコン
        @click="center=m.position"
      />
    </GmapMap>
  </div>
</template>
<script>
  export default {
    data () {
      markers: [
        { position: { lat:35.681214, lng:139.767050 } }, //ピンを表示させたい座標
        { position: { lat:12.345678, lng:123.456789 } } //ピンを複数場所に表示させたい場合はこのように繋げればOK(上段の末尾に,をつけること)
      ],

      options: {
        styles: [
          // 任意のスタイル
        ]
      }
    }
  }
</script>

カスタムアイコンを使わない場合、<GmapMarker />内の:icon="true"とすると見慣れた赤いピンが表示されます。

任意のスタイルには、Create map styleのような便利なサイトで簡単にjsonを生成できるので、それをコピペします。

コピペする際の注意点
eslintを入れている場合、そのままだとエラーが大量に検出されてしまいます。
下記のように、プロパティ名のクォートは外して、値のダブルクォートはシングルクォートに変更してください。

{
  elementType: 'geometry',
  stylers: [
    {
      color: '#f5f5f5'
    }
  ]
}

以上で、オリジナルのgoogle mapが表示されるはずです!
vueはまだまだ勉強中なため不備があるかもしれません。。ご了承ください。

mog_03
d2cdot
テクノロジーの力で『伝えたいコトを伝わるカタチに』
https://www.d2cdot.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした