はじめに
何かAPIを使ってみたかったので、Google map apiを使ってvue.jsで地図を描画してみました。
環境
バージョンなど
OS
macOS Big Sur 11.3
% vue -V
@vue/cli 5.0.8
$ node -v
v18.0.0
$ npm -v
8.6.0
注意
最新の状態を確認して下さい。
参考さまはこちら
最終更新日
2023年7月12日
状況
プロジェクトは作成状態。
% tree
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ ├── HelloWorld.vue
│ │ └── Test.vue
│ ├── index.css
│ ├── main.js
│ ├── page
│ │ └── index.vue
│ └── router
│ └── index.js
└── vue.config.js
↓
これをとってくる。
↓
% npm install vue3-google-map
added 1 package, and audited 1041 packages in 7s
109 packages are looking for funding
run `npm fund` for details
5 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
↓
で google-mapを有効にする。
そして、どうにかAPIのキーを作る。
（作り方はたくさんの方が書いてるのでググってみてください・・・）
↓
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App)
.use(router)
.mount('#app')
↓
Test.vue
<template>
<GoogleMap api-key="ここにAPIキーを貼り付ける" style="width: 100%; height: 500px" :center="center" :zoom="15">
<Marker :options="{ position: center }" />
</GoogleMap>
</template>
<script>
import { defineComponent } from "vue";
import { GoogleMap, Marker } from "vue3-google-map";
export default defineComponent({
components: { GoogleMap, Marker },
setup() {
const center = { lat: 40.689247, lng: -74.044502 };
return { center };
},
});
</script>
↓
起動し直す。
% npm run serve
> my-project@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
終わり
じゃーん
