新しくなったGoogleマップで埋め込みの取得と埋め込みの地図をレスポンシブにする方法

www_google_co_jp_maps_@35_5473293,139_6006851,10z
このエントリーをはてなブックマークに追加
PR

いつのまにかGoogkeマップの画面が大きく変更されており一面地図という状態になっていました
地図の埋め込みコードの取得位置も変わっていました

 

埋め込みコードを取得する

各種ツールは画面の右下の方に集約されています

WS002488

 

歯車マークをクリック

WS002489

 

 

地図を共有/埋め込む を選択して表示

WS002490

 

 

地図を埋め込むタブを表示

WS002491

あとはこのコードをコピーしてHTMLに貼り付ければOKです

 

 

GoogleMapをレスポンシブにする方法

取得したifarameのコードのwidthを100%とすることでレスポンシブになります

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d415521.02699013887!2d139.6006850678982!3d35.547329277517974!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1396913924048" width="600" height="450" frameborder="0" style="border:0"></iframe>

このコードの中の widht=”” の部分を widht=”100%”にしてやることで親要素に合わせてレスポンシブになります
レスポンシブになるといっても、中の地図が自動で縮小、拡大するわけではなく表示領域がレスポンシブになります

あとは高さも自由にheightの値を変えることで変えれます、数値はピクセルです

 

実際に埋め込んでみたもの

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)