人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: wai8605
●カテゴリ:コンピュータ
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

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);
 });

wai8605さんのコメント
ご回答、ありがとうございました。 助かります。

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

a-kuma3さんのコメント
切り替えの部分が原因なのか、そもそもスマホで反応するのか、というところを切り分けてみるのが良いと思います。 「スマホ」といっても、ブラウザは何種類かありますし。

wai8605さんのコメント
ご回答ありがとうございます。 しばらく精進してみます。

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

質問者から

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


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ