情報ウィンドウ内でセレクトボックスを利用するとiPhone/iPadで画面がズレます
353 views
Skip to first unread message
mzsm_j
Sep 30, 2010, 4:24:17 AM9/30/10
to Google-Maps-API-Japan
はじめまして。mzsm_jと申します。
現在、Maps API V3を利用したスマートフォン向けサイトを作成しています。
大まかな仕組みは、外部から取得した位置情報を含むデータを元にマップ上にマーカーを配置し、マーカーをタップすると情報ウィンドウを表示する、という
ものです。
このとき情報ウィンドウ内にセレクトボックスを表示してユーザーに選択させようとしているのですが、iPhoneまたはiPadで情報ウィンドウ内のセ
レクトボックスをタップすると、マップ全体がズレてしまいました(実機、シミュレータともに発生しました)。
ただ単に地図が勝手にパンするという意味ではなく、マップ種別やGoogleロゴ、著作権表示といったコントロール類も含めてすべてズレてしまっていま
す。
また、毎回ズレるわけではなくて、情報ウィンドウが紐付けられているマーカーの位置によってズレる場合とズレない場合があるようです。
再現用のソースは以下のとおりです。
<!DOCTYPE html>
<html style="height:100%;">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0; user-scalable=0;" />
<title>test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
function init(){
var map = new google.maps.Map(
document.getElementById("map"),
{
zoom: 10,
center: new google.maps.LatLng(35, 135),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
var marker = [];
var info_window = [];
for(i=0; i<20; i++){
marker[i] = new google.maps.Marker(
{
map: map,
position: new google.maps.LatLng(34+Math.random()*2,
134+Math.random()*2)
}
);
info_window[i] = new google.maps.InfoWindow(
{
content: '<select><option>test</option></select>'
}
);
info_window[i].open(map, marker[i]);
}
}
</script>
</head>
<body onload="init()" style="margin:0px; padding:0px; height:100%;">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>
回避する手段をご存知の方がいらっしゃいましたら、力を貸していただければ幸いです。
よろしくお願いします。
現在、Maps API V3を利用したスマートフォン向けサイトを作成しています。
大まかな仕組みは、外部から取得した位置情報を含むデータを元にマップ上にマーカーを配置し、マーカーをタップすると情報ウィンドウを表示する、という
ものです。
このとき情報ウィンドウ内にセレクトボックスを表示してユーザーに選択させようとしているのですが、iPhoneまたはiPadで情報ウィンドウ内のセ
レクトボックスをタップすると、マップ全体がズレてしまいました(実機、シミュレータともに発生しました)。
ただ単に地図が勝手にパンするという意味ではなく、マップ種別やGoogleロゴ、著作権表示といったコントロール類も含めてすべてズレてしまっていま
す。
また、毎回ズレるわけではなくて、情報ウィンドウが紐付けられているマーカーの位置によってズレる場合とズレない場合があるようです。
再現用のソースは以下のとおりです。
<!DOCTYPE html>
<html style="height:100%;">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0; user-scalable=0;" />
<title>test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
function init(){
var map = new google.maps.Map(
document.getElementById("map"),
{
zoom: 10,
center: new google.maps.LatLng(35, 135),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
var marker = [];
var info_window = [];
for(i=0; i<20; i++){
marker[i] = new google.maps.Marker(
{
map: map,
position: new google.maps.LatLng(34+Math.random()*2,
134+Math.random()*2)
}
);
info_window[i] = new google.maps.InfoWindow(
{
content: '<select><option>test</option></select>'
}
);
info_window[i].open(map, marker[i]);
}
}
</script>
</head>
<body onload="init()" style="margin:0px; padding:0px; height:100%;">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>
回避する手段をご存知の方がいらっしゃいましたら、力を貸していただければ幸いです。
よろしくお願いします。
KF
Oct 2, 2010, 5:44:44 AM10/2/10
to Google-Maps-API-Japan
iPad (iOS3)だとひどくずれてしまいますが、iPhone 4G(iOS4)だと、ずれないようです。
iPhoneのiOS3だと、やはりずれてしまうでしょうか？
これだけ、ずれてしまうのも珍しいのですが、どうしても駄目な場合はラジオボタンで代用してみてはどうでしょうか。
iPhoneのiOS3だと、やはりずれてしまうでしょうか？
これだけ、ずれてしまうのも珍しいのですが、どうしても駄目な場合はラジオボタンで代用してみてはどうでしょうか。
mzsm_j
Oct 2, 2010, 11:53:12 PM10/2/10
to Google-Maps-API-Japan
こちらではiPhone4(iOS)でもかなりずれています(先述のとおりずれる場合とずれない場合があるので、ずれなかったのはたまたまそれに当たら
なかっただけかもしれません)
iPhone(iOS3)は実機では確認できていないのですが、シミュレータではずれることを確認しています
また、別件かもしれませんが、Androidではそもそもセレクトボックスが開けない(タッチされたと判定されていない?)こともありました
(Xperia、IS01で確認済)
セレクトボックスを利用しているのは、リンクやラジオボタンを並べていると表示しきれない(スペースをとってしまう)ためなので、代用は難しいです
ね…
なかっただけかもしれません)
iPhone(iOS3)は実機では確認できていないのですが、シミュレータではずれることを確認しています
また、別件かもしれませんが、Androidではそもそもセレクトボックスが開けない(タッチされたと判定されていない?)こともありました
(Xperia、IS01で確認済)
セレクトボックスを利用しているのは、リンクやラジオボタンを並べていると表示しきれない(スペースをとってしまう)ためなので、代用は難しいです
ね…
Reply all
Reply to author
Forward
0 new messages