vue2-google-mapを使って、自作のMarkerを用意する

www.npmjs.com

これです。便利。

GoogleMapAPIキーの発行とか設定の仕方とかは他記事をみてほしいのですが、今回はMarkerの使い方だけに絞ろうと思います。

<template>
    <GmapMap
      ref="map"
      :center="center"
      :zoom="zoom"
      :options="mapOptions"
      map-type-id="roadmap"
      :style="mapStyle"
    >
    </GmapMap>
</template>

<script>
export default {
  name: 'IndexPage',
  data() {
    return {
      center: {  // 緯度経度の初期値
        lat: 0,
        lng: 0
      },
      zoom: 16,
      mapOptions: {  // https://developers.google.com/maps/documentation/javascript/controls
        streetViewControl: false,  // ストリートビューを使うか・非表示
        mapTypeControl: false,  // google mapの左上のUIの表示・非表示
        fullscreenControl: false  // 右上のUIの表示・非表示
      },
      mapStyle: 'width: 100vw; height: 100vh;',
    }
  }
}
</script>

↑こんな感じのSFCを用意します。こいつにMarkerを用意します。

<template>
    <GmapMap
      ref="map"
      :center="center"
      :zoom="zoom"
      :options="mapOptions"
      map-type-id="roadmap"
      :style="mapStyle"
    >
      <GmapMarker
        :position="center"
        :clickable="false"
        :draggable="false"
        :icon="{
          url: 'http://hogehoge.fugafuga/icon.png',
          scaledSize: { width: 32, height: 32, f: 'px', b: 'px' }
        }"
      ></GmapMarker>
    </GmapMap>
</template>

Markerは、 GmapMarker で用意することができます。

codesandbox.io

この辺のコードが参考になります。

で、今回ぼくのコードでは、svgをMarkerとして利用したかったので、svgのパスを渡すように修正しました。

<template>
    <GmapMap
      ref="map"
      :center="center"
      :zoom="zoom"
      :options="mapOptions"
      map-type-id="roadmap"
      :style="mapStyle"
    >
      <GmapMarker
        :position="center"
        :clickable="false"
        :draggable="false"
        :icon="{
          url: googleMapIcon,
          scaledSize: { width: 32, height: 32, f: 'px', b: 'px' }
        }"
      ></GmapMarker>
    </GmapMap>
</template>

<script>
import googleMapIcon from '~/static/google-map-icon.svg'

export default {
  name: 'IndexPage',
  data() {
    return {
      center: {  // 緯度経度の初期値
        lat: 0,
        lng: 0
      },
      zoom: 16,
      mapOptions: {  // https://developers.google.com/maps/documentation/javascript/controls
        streetViewControl: false,  // ストリートビューを使うか・非表示
        mapTypeControl: false,  // google mapの左上のUIの表示・非表示
        fullscreenControl: false  // 右上のUIの表示・非表示
      },
      mapStyle: 'width: 100vw; height: 100vh;',
    }
  },
  computed: {
    googleMapIcon() {
      return googleMapIcon
    }
  }
}
</script>

こんな感じでできました。

また、Markerを複数表示したい場合は下記のように v-for を利用すればおｋです。

<template>
// 省略
      <GmapMarker
        :key="index"
        v-for="(m, index) in items"
        :position="gmapApi && new gmapApi.maps.LatLng(m.lat, m.lon)"
        :clickable="false"
        :draggable="false"
        :icon="{
          url: googleMapIcon,
          scaledSize: { width: 32, height: 32, f: 'px', b: 'px' }
        }"
      ></GmapMarker>

// 省略
</template>

<script>
import { gmapApi } from 'vue2-google-maps'

export default {
// 省略
  computed: {
    gmapApi: gmapApi
  }
}