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

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

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4325ベストアンサー獲得回数17732016/09/11 14:25:31

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

a-kuma3回答回数4325ベストアンサー獲得回数17732016/09/11 14:25:31ここでベストアンサー

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は反応しますがスマートフォンではだめでした。

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません