GoogleMapのMarkerにclickイベントを設定したら、2回呼ばれるので調整

GoogleMapにカスタムのMarkerを設置して、
そのMarkerにクリックイベントを設定したら、どうやら2回クリックイベントが呼ばれている

書いたコード

const marker = new google.maps.Marker({
    position: {lat: 35.6894 , lng: 139.6917 },
    icon: `${basePath}img/marker.png`,
    map: map,
});

marker.addListener('click', () => {
    console.log('MarkerClick');
});

こうかくと、何故かコンソールには
MarkerClick が2回表示される

なぜ2回呼ばれているのか

marker.addListener('click', ({ domEvent }) => {
    console.log('MarkerClick', domEvent);
});

こうすると、コンソール表示は
domEventが、TouchEvent と MouseEvent が表示されていました
これが原因のようです

もしかして…

動作確認環境よって違う？
TouchEvent と MouseEvent が表示されていたのは、chromeの開発ツールでモバイル表示
chromeの開発ツールPC表示の場合だと PointerEvent のみでした

• iPhone8 iOS15.3.1 safariだとTouchEventのみ
• iPhoneX iOS16.5 safariだとTouchEvent と MouseEvent
• Android9 chromeだとTouchEvent と MouseEvent

と端末によっても、ちょっと挙動が違いました・・・
やっかいですね・・・

ちなみに

イベントタイプは以下のようでした

domEvent	type
TouchEvent	touchend
MouseEvent	click
PointerEvent	click

書き換えたコード

ヒントになった公式ドキュメントのページ
https://developers.google.com/maps/documentation/javascript/advanced-markers/overview?hl=ja#make_markers_respond_to_click_and_keyboard_events

なるほど、高度なマーカーのクリックイベント操作ですわ

marker.addListener('click', ({ domEvent }) => {
    if (
        isDesktop && domEvent.type == 'click' ||
        !isDesktop && domEvent.type == 'touchend'
    ) {
        console.log('MarkerClick');
    }
});

これで1回しか呼ばれなくなりました
isDesktop でデスクトップなのかタッチデバイスか判定しています

まとめ

特に2回呼ばれていても変な挙動をするようなことは書いていなかったけど
のちのちバグに繋がりそうなので、1回にするべる奮闘したけれど、
今まで得にバグってないので、やらなくても良かったかも？