GoogleMap のHTML埋め込み（レスポンシブ対応）

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
にマップを表示させるオプションを記述します。

オプション項目の説明

マーカーを表示する

 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);
            })
        });