[[vue3-google-map]]を使う。
## インストール
```console
npm install vue3-google-map
npm i @googlemaps/js-api-loader
```
あとは普通に書けばOK。
```html
<script setup lang="ts">
import { computed, ref } from "vue";
// noinspection ES6UnusedImports
import { Coordinate } from "../domain/vo/Coordinate";
import { GoogleMap, Marker } from "vue3-google-map";
const API_KEY = "ひみつ";
const props = defineProps<{
zoom: number;
center: Coordinate;
coords: Coordinate[];
}>();
const toGoogle = (c: Coordinate) => ({ lat: c.latDegree, lng: c.lonDegree });
const zoom = ref(props.zoom);
const center = computed(() => toGoogle(props.center));
const iconOptions = computed(() =>
props.coords.map((x) => ({
position: toGoogle(x),
label: "L",
title: "hoge",
}))
);
</script>
<template>
<GoogleMap
:api-key="API_KEY"
style="height: calc(100vh - 500px); width: 90vw"
:center="center"
:zoom="zoom"
>
<Marker
v-for="option in iconOptions"
:key="JSON.stringify(option.label)"
:options="option"
>
</Marker>
</GoogleMap>
</template>
```
*`<maker>`と小文字で書くとマーカーが表示されないので注意. 理由は不明...*