Google Map Marker を描画する vueコンポーネントの雑なサンプル

GoogleMapMarker.vue

<script lang="ts" setup>
const props = defineProps<{
  map: google.maps.Map;
  item: Item
  selected: boolean
}>();

const emits = defineEmits<{
  (e: 'toggleSelect', item: Item): void;
}>();

const markerRef = ref<google.maps.Marker>();

const updateMarkerIcon = () => {
  // マーカーを状態に応じた表示に更新
}

onMounted(async () => {
  // マーカーの生成
  const gmaps = await useGoogleMaps();

  const marker = new gmaps.Marker({
    map: props.map,
    position: new gmaps.LatLng(props.item.lat, props.item.lng),
  });

  marker.addListener('click', () => {
    emits('toggleSelect');
  });

  markerRef.value = marker;
  updateMarkerIcon();
});

onUpdated(() => {
  // マーカーの表示の更新
  updateMarkerIcon();
});

onBeforeMount(() => {
  // マーカーの削除
  markerRef.value?.setMap(null);
});

// テンプレートが無いとWarningが出るので回避するため
const Nothing = () => {
  return undefined;
};
</script>

<template>
  <Nothing />
</template>

nice-page.vue

<script lang="ts" setup>
// 緯度経度を持つデータの配列
const {data: items} = await useLazyFetch<Item[]>()

const conditions = reactive({})
const handleChangeConditions = () => {}

// 条件によって表示するアイテムが変わる
const filteredItems = computed(() => items.filter())

// itemにはいくつかの状態があり、例えば選択されたアイテムは表示が変わる
const selectedItems: Item[] = []
const getIsSelectedItem = (item: Item): boolean => {}
const handleToggleSelect = (item: Item): void => {}
</script>

<template>
  <ConditionsForm
    :conditions="conditions"
    @change-conditions="handleChangeConditions"
  />

  <GoogleMap 
    :initial-center="nicePosition"
    v-slot="{ map }"
  >
    <GoogleMapMarker
      v-for="item in filteredItems"
      :key="item.id"
      :map="map"
      :item="item"
      :selected="getIsSelectedItem(item)"
      @toggle-select="handleToggleSelect"
    />
  </GoogleMap>

  <List>
    <ListItem
      v-for="item in filteredItems"
      :key="item.id"
      :item="item"
      :selected="getIsSelectedItem(item)"
      @toggle-select="handleToggleSelect"
    />
  </List>
</template>