googlemap

Google Map API V3 1ページに複数マップを表示する(レスポンシブで)

会社案内やショップ案内のページで、グーグルマップを2つ設置することになった時の
備忘録。

参考にしたサイトはこちら
[Google Map V3]地図を複数同時に表示する
ページ内に二つのGoogle Mapを設置する!

地図上にマーカーを表示させて、吹き出しに説明を出す

Google Map をレスポンシブ対応に

Googlemap apiの読み込み

 

bodyに加える

 

 

HTML
1カ所目

 

2カ所目

 

CSS

 

 

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を表示する