Google Maps APIを利用したサイトでマウスオーバーでポップアップが表示される仕様をタッチデバイスに対応させたい

Question

Google Maps APIを利用したウェブサイトを初心者ながら個人で運営しています。
地図上のマーカーにマウスオーバーするとポップアップが表示されるように以下のようにしています。

var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker[i], "mouseover", function() {
    infoWindow.setContent(data[i].title);
    infoWindow.open(map,marker[i]);
}

しかしながら、これではタッチデバイスの場合はポップアップが表示されないので、タッチデバイスの場合はタップでポップアップが表示されるようにしたいのですが、どのようにすればよいでしょうか？

試しに、上記コードの"mouseover"を"touchstart"に変更してAndroidのスマートフォンでテストしてみましたが、タップしてもポップアップは表示されませんでした。

なお、私なりに色々と調べて、Hammer.jsというライブラリの存在に行きつきましたが、ライブラリを使ったことがないため、現状の私の知識では少々ハードルが高く感じました。

お手数をおかけし大変恐縮でございますが、アドバイスを頂けると大変助かります。

Answer 1

タッチデバイスの場合はタップでポップアップが表示されるようにしたい

click ではダメですか？

なお、APIで使えるイベントの種類は以下を参照するのがいいかと思います。

Events | Marker  |  Maps JavaScript API  |  Google Developers

Comments

[michir]

ありがとうございます！

タッチデバイスはclick、PCはmouseoverでポップアップが表示されるようにしたいので、たびたび恐縮ですが、アドバイスいただけないでしょうか？

私なりに調べて以下のように記述してみましたが、地図が表示されなくなってしまいました！(>_<)

if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
var infoWindow = new google.maps.InfoWindow();{
google.maps.event.addListener(marker[i], "click", function() {
infoWindow.setContent(data[i].title);
infoWindow.open(map,marker[i]);
});
}
}else {
var infoWindow = new google.maps.InfoWindow();{
google.maps.event.addListener(marker[i], "mouseover", function() {
infoWindow.setContent(data[i].title);
infoWindow.open(map,marker[i]);
});
}
}

[Lhankor_Mhy]

なんとなくですが、地図が表示されなくなった原因はご提示の部分にはないような気がします。

---

「touch device detection javascript」でググったところ、以下のような記事がありました。
https://www.geeksforgeeks.org/how-to-detect-touch-screen-device-using-javascript/