1373434025 スマートフォンで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 });
}
-----

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/07/10 14:27:05
  • 終了:2013/07/17 14:30:07
id:nantositakocha

fiwa様
試してみましたが、うまくできませんでした。

IEで画面を見ているとズーム操作の上にある上下左右に移動するアイコンの表示も崩れていました。(fiwa様のコメントの対応する前からのようでした)
・スマフォではマーカーが異常
・IEでは上下左右アイコンが異常
となっています。

回答(0件)

回答はまだありません

  • id:fiwa
    IEでの話らしいので参考になるかどうか分かりませんが。
    http://stackoverflow.com/questions/5695164/google-maps-marker-cut-in-half-internet-explorer
  • id:fiwa
    >・スマフォではマーカーが異常
    >・IEでは上下左右アイコンが異常

    何かimg要素のスタイルが干渉してるのかも?と思ったのですが、そういう可能性はないでしょうか。
    http://ot-o.net/2012/10/27/

    例えば上の記事にあるようにimg {max-width: 97.5%;}という風にすると、左上のコントロールはこんな感じに表示されたりします。(MacなのでIEではありませんが)
    http://f.hatena.ne.jp/fiwa/20130710190113
  • id:nantositakocha
    fiwa様
    コメントありがとうございます。

    img {max-width: 97.5%;}

    とすると左右反対が少しはマシにはなるのですが、
    地図に白い線が入ったりして2次災害!?が発生します。

    なかなかうまくいきません。
    102.5%、90%なども試して見ましたが断念しました。

    …「プログラマーでもない素人が手を出すのはやめろ」というGoogleからの忠告ですかね。
     諦めるしかないのかもって気になって来ました。
  • id:fiwa
    いえ、上で挙げた img {max-width: 97.5%;} というのは、それだと左上のコントロールの表示がおかしくなるというダメな例のつもりでした。
    max-width: 97.5%でおかしくなった表示が左、正常な状態が右です。
    http://f.hatena.ne.jp/fiwa/20130710221424

    地図に白い線が入ったりするのは、私の環境でもそうなります。

    差し支えないのであれば、表示がおかしくなるOSのバージョンを書いてCSSを含むソースを全部貼ってみたら、ひょっとしたらIEやスマホでの表示にもっと詳しい方がアドバイスしてくれるかも知れません。
    (ま、ホントに出てきてくれるかどうかは分かりませんけど...)
  • id:nantositakocha
    上下左右のアイコンは他のサイトでも同じように表示されるようです。
    私の手には負えないような問題のようですので諦めようと思います。
    fiwa様、ありがとうございました。

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

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

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

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