Google maps API で addListner is not a function が発生する

環境

vue.js 3.2.13
@googlemaps/js-api-loader 1.15.1

実現したいこと

表示したGoogleマップに、イベント処理を追加したいです。

発生している問題・エラーメッセージ

マップ表示は実現できているのですが、イベント処理させるためのコードを追加するとエラーが発生します。(ソース23行目から25行目)
TypeError: mapobj.value.addListner is not a function

該当のソースコード

javascript

1<script setup>2import { ref, onMounted } from 'vue'3import { Loader } from "@googlemaps/js-api-loader"4 5let mapobj = ref(null)6const mapref = ref()7 8const loader = new Loader({9 apiKey: "自分のKey",10 version: "weekly",11 libraries: ["places"],12})13 14function initMap() {15 loader.load()16 .then((google) => {17 const mapOptions = {18 center: { lat: 35.30752, lng: 139.5785728},19 zoom: 1020 }21 mapobj.value = new google.maps.Map(mapref.value, mapOptions)22 //問題箇所ここから23 mapobj.value.addListner("dragend", () => {24 console.log("dragend event occured.")25 })26 //ここまで27 })28 .catch((e) => {console.log(e)})29}30 31onMounted(() => {32 initMap()33})34 35</script>36 37<template>38 <div class="contents">39 <div ref="mapref" id="mapid" class="mapclass"></div>40 </div>41</template>42 43<style scoped>44.contents {45 display: block;46 margin: 1rem;47}48.mapclass {49 width: 100%;50 height: 20rem;51}52</style>

試したこと

  • addListenerを別Functionに切り離し、画面上にボタンを追加してClickイベントでaddListenerを実行するようにしてみましたが、同じメッセージが表示されました。
  • mapobjを非リアクティブなオブジェクトに変えてみましたが、同じメッセージが表示されました。
  • マップ上にマーカーを表示させ、そのマーカーに対してaddListenerするコードも試してみましたが、こちらも同様にaddListner is not a functionが発生してしまいました。

コメントを投稿

0 コメント