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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:
  • 終了:2016/09/16 11:31:44

ベストアンサー

id:a-kuma3 No.1

回答回数4962ベストアンサー獲得回数2149

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);
    });
他3件のコメントを見る
id:wai8605

ご回答ありがとうございます。
しばらく精進してみます。

2016/09/13 21:35:04
id:wai8605

当初のプログラムで動くようになりました。
ブラウザの古いキャッシュが残っていたのが原因と思われます。
a-kumaさん、どうもありがとうございました。

2016/09/16 11:31:18

その他の回答0件)

id:a-kuma3 No.1

回答回数4962ベストアンサー獲得回数2149ここでベストアンサー

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);
    });
他3件のコメントを見る
id:wai8605

ご回答ありがとうございます。
しばらく精進してみます。

2016/09/13 21:35:04
id:wai8605

当初のプログラムで動くようになりました。
ブラウザの古いキャッシュが残っていたのが原因と思われます。
a-kumaさん、どうもありがとうございました。

2016/09/16 11:31:18
id:wai8605

function is_smartphone() {

return /(iPhone|iPad|iPod|Android)/.test(navigator.userAgent);

}



// InfoWindow を表示するイベントを決める : mouseover or click

var infowindow_open_event = 'mouseover';

if (is_smartphone()) {

infowindow_open_event = 'click';

}


// mouseoverイベントを取得するListenerを追加

google.maps.event.addListener(marker, infowindow_open_event, function(){

infoWindow.setContent(html); //情報ウィンドウの内容

infoWindow.open(map,marker); //情報ウィンドウを表示

map.panTo(point); //マーカーを地図の中心位置に移動

});

こんなカンジでやりましたが、PCは反応しますがスマートフォンではだめでした。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません