Googlemapをカスタマイズしてみる。

Googlemapのカスタマイズはだいぶ一般的になってきましたが、こちらも情報がだいぶ玉石混交で結局のところどうしたらいいの!?
という声がありそうなので、私がわかる範囲でまとめてみました。

通常の埋込み

googlemap上で、基準にしたい場所で右クリックし「この場所について」をクリックします。
画面下に場所の情報が表示されるので、名前部分をクリックすることで画面左にその場所の情報が表示されます。
この中の「共有」をクリックし、表示されたモーダルの中の「地図を埋め込む」をクリックします。
ここに表示されるURLをHTML内に記述すれば、通常のgooglemapを埋め込むことができます。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1620.3702858675736!2d139.69039147608635!3d35.683389395024136!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ccd569c53ff%3A0x45766e6cf1101880!2zVW5uYW1lZCBSb2FkLCDku6PjgIXmnKgg5riL6LC35Yy6IOadseS6rOmDvSAxNTEtMDA1Mw!5e0!3m2!1sja!2sjp!4v1525763812910" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

これは一番基本的なやり方ですね。
サイズをCSSで変更したい場合には、ソースのwidthとheightを削除し、このiframeのサイズをcssで指定すれば変更可能です。

iframe {
width:100%;
height:350px;
}

こんな形で指定すれば、レスポンシブ対応にもできますね。

APIキーを取得して地図を表示する

さて、表示をカスタマイズするためには、googlemap APIを取得してページ内に地図を表示する必要があります。
取得はこちらから行うことができます。
取得方法の詳細はまた別の機会にということで、こちらではAPIキーを取得した後の流れを説明していきます。

まずは細かいことは置いといて、一番シンプルな形から。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>googlemap テストページ</title>
<style>
#map_canvas {
	width: 100%;
	height: 350px;
}
</style>
</head>

<body>
<div id="map_canvas"></div>
<script async defer src="//maps.google.com/maps/api/js?key=ここに取得したAPIキーを記載&callback=initMap">"></script>
<!-- googlemap -->
<script>
function initMap() {
	//表示したい緯度経度を指定
	var latlng = new google.maps.LatLng(34.676451, 135.498344);
	//地図を表示させるエリアのidを指定
	var map = new google.maps.Map(document.getElementById('map_canvas'), {
		center: latlng,//地図の中心を指定した緯度経度に設定
		zoom: 16//画面の拡大率を指定
	});
	//マーカーの設定
	var marker = new google.maps.Marker({
		position: latlng,//マーカーの座標をlatlng変数と同じにしています
		map: map//マーカーを表示する地図をmap変数で指定した地図に設定
	});
}
</script>
</body>
</html>

通常の埋込とほとんど変わりませんが、これで一応表示される……はずです。
一応ざっと説明すると、latlng変数に表示したい緯度経度を設定し、続いてmap変数に指定されたidの場所(この場合はmap_canvas)に、googlemapを表示する指定をしています。
その後のマーカーの設定では、marker変数にマーカーを生成し、表示する座標をlatlng変数、表示する地図をmap変数に指定しています。

同一ページ内に複数のgooglemapを埋め込みたい場合には、こちらのページが参考になるかもですね。

ちなみにAPIキーの後ろの&callback以下を記述せず、bodyタグにonload=”initMap();”を記載するというやり方もありますが、
こちらの方がスマートだと思います。

見た目をカスタマイズする

さて、とりあえず表示されたものの、これだけでは埋め込みとほとんど変わりません。
せっかくですから見た目を色々カスタマイズしていきましょう。

見た目のカスタマイズには、
Google Maps Colorizr
Styled Map Wizard
などを使用するのが簡単だと思います。

詳しくはこのあたりの解説を読むのがわかりやすいかもしれません。

かいつまんで少しだけ説明すると、まずは変更したいFeature typeを選択します。
Administrative(行政区分)やLandscape(目印になる風景)、Road(道路)やTransit(交通網)などですね。
次にこの変更したい部分のElement typeを選択します。
これはGeometry(地図上の図)とLabels(名称)に分かれています。
さらにGeometryはFill(ぬりつぶされる色面)とStroke(輪郭線)、LabelsはText(文字)とIcon(アイコン)に分かれています。
この中から変更したいものを選ぶわけですね。
ちなみに種類によっては選べないものもあったりします。

さらにそれらについて表示の可否、色、色相、明度やガンマ値、線の太さなどを指定することで、自分の好みのスタイルに変更できるわけです。

ちなみにこの変更を加えるとscriptの記述がだいぶ長くなるので別ファイルにしといた方が作業が楽だと思います。
こんな感じですかね。

<div id="map_canvas"></div>
<script async defer src="//maps.google.com/maps/api/js?key=AIzaSyDIBipyDomLgh6AQA9PCB2jmEU76FyyRAU&callback=initMap">"></script>
<script type="text/javascript" src="js/mapscript.js"></script>
function initMap() {
	//初期位置に、上記配列の一番初めの緯度経度を格納
	var latlng = new google.maps.LatLng(35.676167, 139.744837);
	//地図を表示させるエリアのidを指定
	var map = new google.maps.Map(document.getElementById('map_canvas'), {
		center: latlng,//地図の中心を指定した緯度経度に設定
		zoom: 16//画面の拡大率を指定
	});
	var marker = new google.maps.Marker({
		position: latlng,//マーカーの座標をlatlng変数と同じにしています
		map: map//マーカーを表示する地図をmap変数で指定した地図に設定
	});
}

さて、それはともかく今回はStyled Map Wizardを利用して見た目のカスタマイズをしてみましょう。

基本的に左側で変更したいFeature typeとElement typeを選び、Stylersを変更していきます。
複数のスタイルを変更したい場合には、それぞれ右側のMap Styleのaddボタンを押して変更するスタイルを複数用意していきます。
今回は細かく色々な箇所を変更しているので、Styleを16用意してみました。
完成したら右側のShow JSONボタンをクリックしてソースを表示してコピーし、現在のスクリプトに書き加えていきます。
こんな形にすれば問題ありません。

function initMap() {
	//初期位置に、上記配列の一番初めの緯度経度を格納
	var latlng = new google.maps.LatLng(35.676167, 139.744837);
	//地図を表示させるエリアのidを指定
	var map = new google.maps.Map(document.getElementById('map_canvas'), {
		center: latlng,//地図の中心を指定した緯度経度に設定
		zoom: 16,//画面の拡大率を指定
		styles: [//スタイルのカスタマイズは、styles: の後ろにコピーした[]の中身を全てペーストする
		{
			"featureType": "landscape",
			"elementType": "geometry",
			"stylers": [{
				"color": "#c5c5c5"
			}]
		}, {
			"featureType": "landscape",
			"elementType": "labels",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "road",
			"elementType": "labels",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "road",
			"elementType": "geometry.fill",
			"stylers": [{
				"color": "#a3a3a3"
			}]
		}, {
			"featureType": "transit",
			"elementType": "labels.icon",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "transit",
			"elementType": "geometry.fill",
			"stylers": [{
				"color": "#787878"
			}, {
				"weight": 4
			}]
		}, {
			"featureType": "transit",
			"elementType": "geometry.stroke",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.park",
			"stylers": [{
				"visibility": "off"
			}]
		}, {}, {
			"featureType": "poi.business",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.attraction",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.medical",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.place_of_worship",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.government",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "administrative",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "water",
			"stylers": [{
				"visibility": "on"
			}, {
				"color": "#888888"
			}]
		}, {
			"stylers": [{
				"saturation": -100
			}]
		}]
	});
	//マーカーの指定
	var marker = new google.maps.Marker({
		position: latlng,//マーカーの座標をlatlng変数と同じにしています
		map: map
	});
}

これで見た目を変更することができました!

マーカーを変更する

さて、続いてはこのマーカーを変更してみましょう。
マーカーはpng画像を使うやり方などもありますが、レスポンシブやRatina対応が当たり前になっている今はSVGを使用する方が良いでしょう。
こちらは簡単です。
以下の記述を追加すれば変更することができます。

//マーカーの変更
	var markerImg = {
		url:'img/mappoint.svg',//SVGアイコンのパスを記述
		scaledSize : new google.maps.Size(122,140)//アイコンサイズ
	};
	//マーカーの指定
	var marker = new google.maps.Marker({
		position: latlng,//マーカーの座標をlatlng変数と同じにしています
		map: map,//マーカーを表示する地図をmap変数で指定した地図に設定
		icon: markerImg//マーカーをmarkerImg変数で指定したSVG画像に設定
	});

アーカイブ

カレンダー

2018年5月
« 2月    
 123456
78910111213
14151617181920
21222324252627
28293031  

最近のコメント

コメントなし

RSS