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

2015-12-15

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

オプション項目の説明

<thscrollwheel

zoom ズーム値(0~19)。数が小さい程広域で表示されます※必須
center 初期表示位置。緯度経度を指定します※必須
mapTypeId マップの種類を指定します※必須ROADMAP:地図 / SATELLITE:航空写真 / HYBRID:地図+写真 / TERRAIN:地形
scaleControl true/false地図の縮尺
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);
            })
        });