サイト制作に欠かせない、GoogleMapの入れ方

最近ウェブサイトを制作する上で重視しているのが、セールスライティングやコピーライティングです。

今回は、それとは少しずれるのですが、その中でもオフラインで事業をやっている方（美容院、飲食店など）には、MEO（Map Engine Optimization）と呼ばれるものを重視しなければなりません。要するに、GoogleMapを使って集客をするということです。MEOについてはそこまで詳しくないし、お店を経営しているわけではないので、今回はVue.jsでGoogleMapの入れ方を解説していこうと思います！！！

１　モジュールのインストール

下記のコマンドを入力し、モジュールをダウンロードしてください。

npm install vue2-google-maps
yarn

２　インポート

次に、ソースディレクトリにあるmain.jsにて以下のコードを追加します。

src/main.js

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

Vue.use(VueGoogleMaps, {
  load: {
    key: 'API_KEY',
    libraries: "places",
    region: "JP",
    language: "ja",
  },
});

３　埋め込み

そしたら、後はマップを表示させたいところにコードを追加するだけ！

今回は、componentsディレクトリにあるFooter.vueに埋め込みます。

components/Footer.vue

<template>
    <footer>
      <div class="container">
        <div class="footB">
            <GmapMap
            :center="{lat: 35.59053146952716, lng:139.32190643259847}"
            //mapの中心位置
            :zoom="15"
            map-type-id="terrain"
            style="width: 80%; height: 250px"
            //横幅、高さの指定
            >
            <GmapMarker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            @click="center=m.position"
            />
            </GmapMap>
        </div>
      </div>
    </footer>
</template>

<script>
export default{
    data() {
        return{
            markers: [
                {
                    position: {
                        lat: 35.59053146952716,
                        lng: 139.32190643259847
                        //Markerの位置（緯度、経度）
                    },
                    infoText: 'Marker 1'
                },
            ],
        }
    }
}
</script>

基本的にはこれで十分マップとしての機能を実現できます！

皆さんの学習の参考にして頂ければなと思います！！！

以上、「GoogleMapをVue.jsに埋め込む方法」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading