Google Mapをレスポンシブに対応してウェブサイトに埋め込む方法をまとめておきたいと思いました。
地図を埋め込むコード(iframe)の場合
google mapから埋め込みコードを取得します。この方法は割愛。
ジブリ美術館でテスト。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.610389039536!2d139.7065931653495!3d35.735799334584605!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d5f776638f9%3A0xc1b61dc27a2b03c9!2z44CSMTcwLTAwMTQg5p2x5Lqs6YO96LGK5bO25Yy65rGg6KKL77yS5LiB55uu77yW77yZ4oiS77yXIOaBqeeUsOODk-ODqw!5e0!3m2!1sja!2sjp!4v1450164755498" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
コピーしたコードをdivでラップします。
HTML
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.610389039536!2d139.7065931653495!3d35.735799334584605!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d5f776638f9%3A0xc1b61dc27a2b03c9!2z44CSMTcwLTAwMTQg5p2x5Lqs6YO96LGK5bO25Yy65rGg6KKL77yS5LiB55uu77yW77yZ4oiS77yXIOaBqeeUsOODk-ODqw!5e0!3m2!1sja!2sjp!4v1450164755498" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
CSS
.mapwrapper{
position:relative;
padding-bottom:75%;
height:0;
overflow:hidden;
}
.mapwrapper iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.mapwrapper のpadding-bottom:75%は、マップの縦横比です。
いちいちCSSを書くのが面倒な場合はこんなサービスもありま す。
Embed Responsively
http://embedresponsively.com/
You TubeやGoogleMapなどの埋め込みコードをレスポンシブ対応にしてくれます。
使い方は、サービスを選択して、URLをコピペすればレスポンシブ対応のコードを生成してくれます。
ジブリ美術館でテスト。
こんな感じでコードが生成されました。便利です。
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3240.2184195370137!2d139.5682430153486!3d35.69624233675575!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1450165284203' width='800' height='600' frameborder='0' style='border:0' allowfullscreen></iframe></div>
Google Maps JavaScript API v3を使った基本的な記述方法
https://developers.google.com/maps/documentation/javascript/?hl=ja
html ヘッダーにgooglemap apiを読み込み
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
body にgoogle mapを表示させるdivを記述
<div id="map-canvas"></div>
スタイルシート
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
google mapを表示させるためのjavascript
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var map = document.getElementById("map-canvas");
var options = {
zoom: 8,
center: new google.maps.LatLng(35.700716, 139.572737),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
new google.maps.Map(map, options);
});
</script>
var mapOptions
にマップを表示させるオプションを記述します。
オプション項目の説明
zoom | ズーム値(0~19)。数が小さい程広域で表示されます※必須 |
---|---|
center | 初期表示位置。緯度経度を指定します※必須 |
mapTypeId | マップの種類を指定します※必須ROADMAP:地図 / SATELLITE:航空写真 / HYBRID:地図+写真 / TERRAIN:地形 |
scaleControl | true/false地図の縮尺 |
scrollwheel | true/false マウスホイールでの拡大縮小 初期値:true |
zoomControl | enabled/disabled拡大・縮小を調整 |
マーカーを表示する
google.maps.event.addDomListener(window, 'load', function()
{
var lng = 139.578110;
var lat = 35.700623;
var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var mapObj = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
map: mapObj,
title:"いせや総本店"
});
});
マーカーをクリックしてinfowindowを表示する
google.maps.event.addDomListener(window, 'load', function()
{
var lng = 139.578110;
var lat = 35.700623;
var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false
};
var mapObj = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
map: mapObj
});
google.maps.event.addListener(marker, 'click', function()
{
var html = 'いせや総本店'; //htmlタグもOK
// info Window
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(html);
infoWindow.open(mapObj, marker);
})
});
Googlemapを画像としてhtmlに埋め込む方法・Google Static Maps API
一つのウェブページに複数のGoogleマップを設置したい場合、どうしても表示の重さが気になります。
また現在のGooglemapはIE7、IE8などの古いブラウザには対応していないので古いブラウザでもGooglemapを表示したい場合にも役立ちます。
Google Static Maps APIを使えば、
Googleマップを画像として生成してくれるので、高速、軽量で表示できます。
※ウェブ、Andoroid、iOSとそれぞれに無料で使える制限あり。
ウェブページの場合、
「マップのロードが 90 日間連続して 1 日 25,000 回を超過するまで無料」
くわしくはこちらで
https://developers.google.com/maps/documentation/static-maps/?hl=ja
APIキーの取得から
1)Google Developers Consoleにアクセス(要Googleアカウント)
https://console.developers.google.com
2)プロジェクトを作成
3)GoogleAPIを利用する
4)Google Static Maps APIをクリック
Google Maps APIの中にGoogle Static Maps APIがあります。初期状態では隠れてるので、「その他」をクリックすると表示されます。
6)APIを有効にする
APIを有効にするをクリック
7) 認証情報にすすむ(API KEYを作成)
「認証情報に進む」をクリック
APIを呼び出す場所は「ウェブブラウザ(javascript)」を選びました。
「必要な認証情報:をクリック
8) APIキーを生成
名前の「ブラウザキー1」は特に変更しなくてもよいのかな。
APIキーを作成するをクリック
APIキーが生成されます。これをコピー
Google Static Maps APIを使う
基本のURL
https://maps.googleapis.com/maps/api/staticmap?parameters
parametersの部分に必要なパラメータを付加していきます
center (※必須) | 地図の中心を座標やキーワードで指定する キーワードはURLエンコードする markers,path,visibleを別途指定している場合は省略可。 |
size (※必須) | 生成する画像のサイズ[横width]x[縦height]で指定 幅300ピクセル、高さ240ピクセルの画像にしたい場合は 300x240 |
sensor(※必須) | GPS情報を取得してする場合はtrue,そうでない場合はfalse sensor=true, sensor=false |
key(※必須) | 取得したAPIキー |
zoom | 縮尺値(1~22) |
markers | マーカーを表示 |
maptype | 地図の種類を指定 ・roadmap(通常の地図:デフォルト) ・satellite(航空写真図) ・ hybrid(roadmapとsatelliteの組み合わせ) ・terrain(地形図) |
format | 画像形式を指定できます ・png(デフォルト) ・GIF ・JPG |
language | 地図上のラベルの言語を指定できます。 英語の場合はen 日本語の場合はja |
path | 地図に線を引きます |
visible | 使いどころがよくわからず |
region | 使いどころがよくわからず |
例)ジブリ美術館
https://maps.googleapis.com/maps/api/staticmap?center=35%2e696325%2c%20139%2e570453&markers=35%2e696325%2c%20139%2e570453&zoom=14&size=400x400&key=YOUR_API_KEY