map = new google.maps.Mapで作ったマップをレスポンシブ化したい

いつもありがとうございます。
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 ベストアンサー 回答者： fujillin 回答日時： 2016/11/22 15:49

こんにちは

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でこれより調整してみようと思います
ありがとうございました

お礼日時：2016/11/26 03:18