スマートフォンでGoogleMapsのマーカーを表示した時の質問です。
プログラムは素人です。Webや本を参考にしながら自分のサイトを作成しました。
Googlemapsを使ったページを作ったのですが、マーカーがパソコンでは普通に表示されていますが、スマートフォンで見ると変になります。
（表示画像を添付します。）
何か左右反対のアイコンになっています。
スマートフォンでも正しいアイコンを表示できるようにしたいのですが、
どのようにプログラムすれば良いのでしょうか。
プログラムの例や参考になるページなどを教えて下さい。
-------------------------------
xxx.htmlからzzz.jsのjavascriptを呼び出して、zzz.js内でGooglemapsの表示、マーカーの表示を指定しています。
実装はこんな感じですが、分かりますでしょうか。
●xxx.html
<body onload="initialize()">
:
<div id="map_canvas" style="width: 500px; height: 500px"></div>
:
</body>
●zzz.js
function initialize(){
:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
:
pos = new google.maps.LatLng( xx.xxxx,yyy.yyyy );
mark = new google.maps.Marker({ position: pos , map: map });
}
-----
fiwa様
試してみましたが、うまくできませんでした。
IEで画面を見ているとズーム操作の上にある上下左右に移動するアイコンの表示も崩れていました。（fiwa様のコメントの対応する前からのようでした）
・スマフォではマーカーが異常
・IEでは上下左右アイコンが異常
となっています。
1
0
2
コメント（5件)
http://stackoverflow.com/questions/5695164/google-maps-marker-cut-in-half-internet-explorer
>・IEでは上下左右アイコンが異常
何かimg要素のスタイルが干渉してるのかも？と思ったのですが、そういう可能性はないでしょうか。
http://ot-o.net/2012/10/27/
例えば上の記事にあるようにimg {max-width: 97.5%;}という風にすると、左上のコントロールはこんな感じに表示されたりします。（MacなのでIEではありませんが）
http://f.hatena.ne.jp/fiwa/20130710190113
コメントありがとうございます。
img {max-width: 97.5%;}
とすると左右反対が少しはマシにはなるのですが、
地図に白い線が入ったりして２次災害！？が発生します。
なかなかうまくいきません。
102.5%、90%なども試して見ましたが断念しました。
…「プログラマーでもない素人が手を出すのはやめろ」というGoogleからの忠告ですかね。
諦めるしかないのかもって気になって来ました。
max-width: 97.5%でおかしくなった表示が左、正常な状態が右です。
http://f.hatena.ne.jp/fiwa/20130710221424
地図に白い線が入ったりするのは、私の環境でもそうなります。
差し支えないのであれば、表示がおかしくなるOSのバージョンを書いてCSSを含むソースを全部貼ってみたら、ひょっとしたらIEやスマホでの表示にもっと詳しい方がアドバイスしてくれるかも知れません。
（ま、ホントに出てきてくれるかどうかは分かりませんけど...）
私の手には負えないような問題のようですので諦めようと思います。
fiwa様、ありがとうございました。