googlemap のhtml埋め込み(レスポンシブ対応) コピペ用

Google Mapをレスポンシブに対応してホームページに埋め込むのに、毎回いろいろ調べていたので、ここら辺で自分用にまとめておきたいと思いました。

地図を埋め込むコード(iframe)の場合

google mapから埋め込みコードを取得します。この方法は割愛。

 

Google マップ 2015-12-15 16-40-21

ジブリ美術館でテスト。

コピーしたコードをdivでラップします。

HTML

CSS

.mapwrapper のpadding-bottom:75%は、マップの縦横比です。

いちいちCSSを書くのが面倒な場合はこんなサービスもありました。

Embed Responsively
http://embedresponsively.com/

embedresponsively.com 2015-12-15 16-49-34You TubeやGoogleMapなどの埋め込みコードをレスポンシブ対応にしてくれます。
使い方は、サービスを選択して、URLをコピペすればレスポンシブ対応のコードを生成してくれます。

ジブリ美術館でテスト。
こんな感じでコードが生成されました。便利ですね^^

 

 

Google Maps JavaScript API v3
https://developers.google.com/maps/documentation/javascript/?hl=ja

基本的な記述方法

html ヘッダーにgooglemap apiを読み込み

body にgoogle mapを表示させるdivを記述

スタイルシート

google mapを表示させるためのjavascript

var mapOptions
にマップを表示させるオプションを記述します。

オプション項目の説明

<thscrollwheel

zoom ズーム値(0~19)。数が小さい程広域で表示されます※必須
center 初期表示位置。緯度経度を指定します※必須
mapTypeId マップの種類を指定します※必須ROADMAP:地図 / SATELLITE:航空写真 / HYBRID:地図+写真 / TERRAIN:地形
scaleControl true/false地図の縮尺
true/false マウスホイールでの拡大縮小
初期値:true
zoomControl enabled/disabled拡大・縮小を調整

マーカーを表示する

 マーカーをクリックしてinfowindowを表示する

 

SNSでもご購読できます。