Googleマップの表示をレスポンシブ表示に対応させる

こんにちは、市民パソコン教室北九州小倉校の篠原です。


　今回は、Webページに貼り付けたGoogleマップの表示幅の自動調整についてです。
　市民パソコン教室北九州小倉校のホームページをリニューアルしようと、現在作業中です。レスポンシブデザインを取り入れたくて、QHMのhailテーマを使って修正をかけています。これに関係して、教室の場所をGoogleマップを貼り付けて表示出来るようにているのですが、今までは、固定幅のページでしたので横幅は固定されていました。これをページ幅にあわせて横幅を自動調整してくれるように変更します。

春らしい天候が少しづつ見えてくるようになりましたね。PC教室の傍ら農業も少しやっているのですが、秋作のかたずけ、春作の種まきなど、季節の変わり目を感じています。
　写真は、去年栽培した茎ブロッコリーの花です。よく見るブロッコリーのように大きな房ではなく、一房が小さい、つまり普通のブロッコリーのブロックを一つちぎった位の大きさで脇芽を収穫します。食べやすく、茎の部分がおいしい品種です。菜の花のような花をつけます（アブラナ科の植物なので花がそっくりです）。ブロッコリーもほおっておくとこんな花をつけます。つまり花が咲く前の芽の部分を私たちは食べているということです。


　もう一つ春を感じる植物を。次の写真は「沈丁花（じんちょうげ）」です。この花の香りがあたりに漂いだすと「春が来たなぁ～」という感じなります。香りは、過去の記憶を呼び起こす作用があるのでしょうか、何かしら懐かしい気持ちになります。
茎ブロッコリーの花

沈丁花



　自力ではどうしようもないので、ググってみました。
　結果、なんととても簡単。表示幅を「100%」に変えるだけで出来てしまいました。

　ということで、変更箇所を掲載しておきます。

Webページに貼り付けたGoogleマップの横幅を自動調整にする

• 1-1　縦スクロール形式のページであれば、マップの高さは気にしなくて大丈夫。後は、横幅をうまく調整できればいいことになります。
  　そこで、横幅を変更します。
  　まず、イメージとしては、図のような状態へと変われば良いわけです。
  • 1-1-1　変更前の表示（表示幅を狭くするとGoogleマップの表示が切れてしまう：フルサイズ）
    
    
    
  • 1-1-2　変更前の表示（表示幅を狭くするとGoogleマップの表示が切れてしまう：縮小サイズ（レスポンシブ非対応））
    
    
    
  • 1-1-3　変更後の表示（設定を変更すると、表示幅を狭くしても画面内に横幅が調整されきちんと表示される（レスポンシブ対応）
    
    
    
• 1-2　変更前のGoogleマップの貼り付けたコードは図の通りで、
  　<iframe width="550"
  　 の部分が広さを示す値となっています。これは横のサイズをピクセルで表示した場合の指定です。
  
  
  
• 1-3　この部分を図のとおり。
  　<iframe width="100%"
  　に変更します。
  　結果は図1-1-3のように画面サイズに合わせて、マップのサイズが調整されるようになりました。
  
  
  
  以上で、Googleマップのレスポンシブ表示への対応方法はおわりです。
  
  

  ---

  
  
  
  
  
  Tag: Googlerマップ レスポンシブ 表示サイズ自動調整
  • 次の記事　→
  • ←　前の記事

  コメント

  
  
  タイトル：

  お名前：

  認証コード1487

  コメント：

  コメントは管理者の承認後に表示されます。