googlemapのinfowindowの開き方（1つのプログラムでＰＣとスマートフォン両方に対応させたい）

Question

###前提・実現したいこと
ＰＣではgooglemapのマーカーをマウスオーバーするとinfowidowが開くように、スマートフォンではgooglemapのマーカーをタッチするとinfowidowが開くようにしたいです。それをひとつのプログラムで実現するのは可能でしょうか。

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

[dreamers]

解決済みにします

Answer 1

別のＱ＆Ａサイトでも質問をしていましたら、下記のようなご回答をいただきました。
ご参考までに掲載させていただきます。

---

User Agent でスマホかどうかを判定して、イベントを切り替えれば良いのだと思います。
こんな雰囲気かと。

/*
    User Agent でスマホかどうかを判断
*/
function is_smartphone() {
    return /(iPhone|iPad|iPod|Android)/.test(navigator.userAgent);
}

...

// マーカー
var marker = new google.maps.Marker({
    ...
});

// InfoWindow を表示するイベントを決める : mouseover or click
var infowindow_open_event = 'mouseover';
if (is_smartphone()) {
    infowindow_open_event = 'click';
}

// Marker に InfoWindow を表示する Listener を登録する
                                   // ↓ここ
google.maps.event.addListener(marker, infowindow_open_event, function() {
    // このあたりはお好きなように
    var iw = new google.maps.InfoWindow({
        ...
    });
    iw.open(map, marker);
});

Answer 2

「InfoWindowが開いているかチェックして、なければ開く」というイベントハンドラをmouseoverとclickの両方にセットすればいいと思います。

タッチパネルではmouseoverは起きませんし、マウスのある環境でmouseoverから開いた時にもclickでは開いていればそれ以上の動きはしません。

Comments

[dreamers]

ご回答ありがとうございました。