WEB Tips デザイン・コーディング

GoogleMap のHTML埋め込み(レスポンシブ対応)

2015-03-17

本記事にはプロモーションが含まれています。

GoogleMap のHTML埋め込み(レスポンシブ対応)

Google Mapをレスポンシブに対応してウェブサイトに埋め込む方法をまとめておきたいと思いました。

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

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

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

ジブリ美術館でテスト。

<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/

embedresponsively.com 2015-12-15 16-49-34You 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:地形
scaleControltrue/false地図の縮尺
scrollwheeltrue/false マウスホイールでの拡大縮小
初期値:true
zoomControlenabled/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)プロジェクトを作成
ホーム My Project_8
3)GoogleAPIを利用する
ホーム demo1602_7
4)Google Static Maps APIをクリック
Google Maps APIの中にGoogle Static Maps APIがあります。初期状態では隠れてるので、「その他」をクリックすると表示されます。
API ライブラリ demo1602_6
6)APIを有効にする
APIを有効にするをクリック
Google Static Maps API demo1602_5
7) 認証情報にすすむ(API KEYを作成)
「認証情報に進む」をクリック
Google Static Maps API demo1602_4
APIを呼び出す場所は「ウェブブラウザ(javascript)」を選びました。
「必要な認証情報:をクリック
認証情報ウィザード demo1602_3
8) APIキーを生成
名前の「ブラウザキー1」は特に変更しなくてもよいのかな。
APIキーを作成するをクリック
 
認証情報ウィザード demo1602_2
APIキーが生成されます。これをコピー
認証情報ウィザード demo1602

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

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF ドメイン2個無料 - 2024年3月13日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-, , ,