いつもありがとうございます。
Javaで挿入したgooglemap をレスポンシブ対応するにはどうすればいいのでしょうか?
width:100%; height:auto;にすると地図自体が消えてしまいます。
<div id="sample" style="width: 800px; height:600px;">
function initMap() {
// #sampleに地図を埋め込む
map = new google.maps.Map(document.getElementById('sample'), {
center: center,
zoom: 15 // 地図のズームを指定
});
ざっくりとした質問で恐縮ですが、ヒントになるようなことがありましたらお願い致します。
No.1ベストアンサー
- 回答日時:
こんにちは
mapを表示する際には、表示用要素のサイズの基づいて地図のサイズを決めて表示しているはずです。
それなので、表示の際にサイズが無い(高さ0など)と、見かけ上は、地図は表示されなくなります。
mapが表示された後であれば内容があるので、autoでもサイズを確保できる可能性はありますが(マップ内のレイアウトの方法によりますけれど)、表示される前は何もないので、autoなどの指定にすると(特に高さは)0と評価されてしまいます。
ニワトリと卵みたいな関係ですね。
とは言うものの、質問者様には何らかのレイアウトに関してのイメージがおありでしょうから、そのサイズになるように表示要素を前もって指定できるようにしておけば宜しいのではないでしょうか。
例えば、簡単なのは%やvwで指定しておくとか。
%指定等だけですと、画面のプロポーションによっては困ったサイズになってしまうこともあり得るので、max-width、min-widthなども併用しておくといった方法が考えられます。
あるいは、地図の表示にjavascriptを利用しているので、表示の前に地図のサイズもスクリプトで指定するような考え方もあるでしょう。
画面サイズなどから地図のサイズを決めることも可能ですし、地図の縦横比を固定したいとかであれば、width:80%などと指定しておいて、スクリプトからはそのwidthの値を取得して、比率に基づいて高さを設定するとかいったことも可能です。
他にも方法はいろいろあると思いますが、レスポンシブで画像のサイズやレイアウトを制御する際の方法が参考になるのではないかと思います。
http://www.bing.com/search?q=%E3%83%AC%E3%82%B9% …
ご連絡がおそくなり申し訳ありませんでした。
色々方法があるのですね。
少し試してみたのですが(%とwidth)はうまくできなかったので、javascriptでこれより調整してみようと思います
ありがとうございました
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【javascript】住所から郵便番...
-
VBAでオブジェクトがありません...
-
PHPで入力された住所で地図表示
-
aspのセレクトボックスにDBのデ...
-
デジタル時計の時刻合わせの方...
-
マイページはどこを開くの
-
エクセルのシート上に別のシー...
-
Excelでワードアートや図を常に...
-
スクリプトって、何ですか?ど...
-
エクセルVBAでフォームのListbo...
-
ウインドウを毎回同じ位置、大...
-
Javascript_submit()完了後に処...
-
一定時間おきにアラームやポッ...
-
MacのVLCでウインドウの幅の変更
-
window.close()?でエラー
-
Excel VBAでの右クリックのポッ...
-
WIN10のPCに「制限」のポップ...
-
VBA ポップアップが表示された...
-
画面を閉じる(×ボタンやタスク...
-
【Android】ユーザー補助機能ボ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
どうして+3
-
Yahoo地図でマーカーを表示した...
-
VBAでオブジェクトがありません...
-
【javascript】住所から郵便番...
-
WordのVBAについて
-
ホームページビルダー16 地図...
-
ビルダーの黄色マーカーの出し方
-
既存のgoogleマップに半径表示...
-
googlemapで複数条件絞り込みで...
-
逆ジオコーディングについて
-
google map の画面サイズを小さ...
-
map = new google.maps.Mapで作...
-
iPhoneサイトにgooglemapを掲載...
-
Google Maps API v2 現在位置か...
-
GoogleMap のマーカーに数値を...
-
GoogleMapsでルート表示
-
GMap Api V3で中心マーカーを表...
-
ワードプレスのプラグインであ...
-
Dreamweaver CS3で、太い赤字と...
-
アイフォンの位置を検索する
おすすめ情報