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

nuxt.js & vue2-google-maps

More than 1 year has passed since last update.

概要

sample Project作成

make nuxt project

> npx create-nuxt-app sample_googlemaps
? Project name sample_googlemaps
? Project description My luminous Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework vuetify
? Choose rendering mode Universal
? Use axios module yes
? Use eslint no
? Author name testuser
? Choose a package manager npm

install vue2-google-maps

>  npm i vue2-google-maps --save

Nuxt.js configの修正

Plugin読み込み設定

nuxt.config.js
  plugins: [
    '@/plugins/vuetify',
    {src:"~plugins/vue2-google-maps.js"} // 追加
  ],

build.extend()に下記を追記

nuxt.config.js
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
       --  --

      //add for vue2-google-maps
      if (!ctx.isClient) {
        // This instructs Webpack to include `vue2-google-maps`'s Vue files
        // for server-side rendering
        config.externals.splice(0, 0, function (context, request, callback) {
          if (/^vue2-google-maps($|\/)/.test(request)) {
            callback(null, false)
          } else {
            callback()
          }
        })
      }

venderへの追加

nuxt.config.js
    vendor:["vue2-google-maps"]
  },
}

pluginの追加

pulugin フォルダにvue2-google-maps.jsを作成
image.png

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

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

画面(Vue)作成

最小限のLayout

layouts/default.vue
<template>
  <v-app dark>  
      <nuxt />
  </v-app>
</template>

GoogleMapを表示する画面

page/index.vue
<template>
<v-layout row justify-center align-center>

<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>

</v-layout>
</template>

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

サンプル実行結果

npm run dev

image.png

現在地の取得

navigator.geolocation.getCurrentPositionを使う
参考:https://syncer.jp/how-to-use-geolocation-api

current.vue
<template>
<div>
    <v-btn @click="onClickCurrent" >getCurrentPosition</v-btn>
    <p>{{currentLoc.coords}}</p>

    <GmapMap class="map-panel" map-type-id="terrain" 
        style="width: 100%; height: 300px"
        :draggable="true"
        :center="maplocation"
        :zoom="15"
        ref="mmm">
        <GmapMarker 
        :position = "maplocation" 
        />

    </GmapMap>
</div>
</template>

<script>
export default {
    data(){
        return {
            currentLoc:{},
            maplocation:{lng: 0, lat: 0}
        }
    },
    methods:{
        async onClickCurrent(){
            console.log('--onClickCurrent')
            try{

                let data =await getPosition();
                console.log('--success',data)
                console.log('typeof', typeof(data))

                let data2={};
                data2.lat = data.coords.latitude ;
                data2.lng = data.coords.longitude ;
                data2.alt = data.coords.altitude ;
                data2.accLatlng = data.coords.accuracy ;
                data2.accAlt = data.coords.altitudeAccuracy ;
                data2.heading = data.coords.heading ;           //0=北,90=東,180=南,270=西
                data2.speed = data.coords.speed ;

                // Object.assign(data2,data.coords); // not work
                // this.$set(this.currentLoc,"data2",data.coords);//not work
                console.log('data2',data2)
                this.$set(this.currentLoc,"coords",data2);

                //set Googlemap
                this.maplocation.lat = data2.lat;
                this.maplocation.lng = data2.lng;
                this.$refs.mmm.panTo(this.maplocation );

            }catch(e){
                console.log('--error',e);
            }
        }
    },
}
var getPosition = function (options) {
  return new Promise(function (resolve, reject) {
    navigator.geolocation.getCurrentPosition(resolve, reject, options);
  });
}
</script>

実行結果省略

(追記)Nuxt upgrade 1.4 -> 2.2 対応

参考
- https://codesandbox.io/s/31j9l75xjm

upgrade

>yarn upgrade-interactive --latest

nuxtをチェックしてアップグレードを行う

add core-js package

>yarn add core-js

fix code (nuxtconfg.js)

nuxt.config.js
  plugins: [{ src: "~/plugins/vue2-google-maps", ssr: true }],
  build: {
    transpile: [/^vue2-google-maps($|\/)/]
  }

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
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