「google maps api v3」設置方法は → こちら と こちら
とあるサイトに「google maps api v3」を設置していたんだが
いつも通りHTML、JavaScript、css書いて
設置完了！
さて、他のデザインを書いていきましょうかね～
って感じでデザイン書き終わってみると・・・
あれ？
マーカーの位置、ずれてない！？
もっかい座標確認して反映させてみたがやはりマーカーの位置がオカシイ・・・
我らが福岡ヤフオクドームでやってみると
ズームを最大にすると指定した座標にマーカーがあるんだが
縮小していくとどんどんマーカーがずれていく・・・
あれ～？
日本から出てしまうがな～（TωT）
ロシアに到着！
どうやら、ソチオリンピックを見に行ったようです(*´Д｀)=з
オリンピックは置いといて。。。
結論から言うと、cssの記述に問題があったようです。
ザックリ書くとこんな感じでした
・HTML
<h3>タイトル</h3>
<div id="wrap">
/* -- ふがふが-- */
<div id="content">
<div id="map">google map</div>
</div>
<div id="content2">**</div>
<div id="content3">**</div>
</div>
・ｃｓｓ
#wrap{
position: relative;
}
#content{
width: **px;
height: **px;
}
#content2{
position: absolute;
top: **;
left: **;
}
#content3{
position: absolute;
top: **;
left: **;
}
デザイン的なことでpositionプロパティ指定してたのが問題だったみたいだ。
親ボックスや親ボックスに含まれる#map以外の他のボックスに
positionプロパティ指定するのもダメみたい。
cssで#mapに影響を与える記述がある場合は不具合が出る！
というのは知っていたが他のボックスはい～じゃん
って感じなんだけど・・・
ダメなものはダメ！
ってことでした。
しょーがないんでpositionプロパティ指定をやめて
ボックス増やしてfloatとmarginで対応したけどいらんボックスが増えてしまった(*´Д｀)=з
検索しても対処法が見つからなかったんで
同じような状況の人の参考になれば・・・
誰かスマートな方法教えてくれ～（ ´(ェ)｀）