メールでのお問い合わせはこちら、お問い合わせフォーム

スタッフブログ

2017年6月

1

グーグルマップに図を描く 

ホームページを制作していると、グーグルマップを利用する機会が多くあります。
大抵は単に地図として埋め込んでいるだけですが、たまには違う使い方をする事もあります。
下図をご覧ください。
gmap.png
これはグーグルマップに4つの三角形を重ねたものです。
もちろん、マップをコピーしてフォトショで加工した...という話ではありません。
以前にも紹介しましたが、グーグルマップのAPIを使うと出来ます。

今回はソースも示しましょう。

[html]
<div id="map"></div>
ここにマップを表示します

[style]
#map	{
	width:600px;
	height:500px;
}
マップのサイズを縦500ピクセル横600ピクセルにします。

[script]
	var originLat = 43.0901767;	//中心位置 緯度
	var originLng = 141.2751628;	//中心位置 経度

	function initialize(){

		var center = new google.maps.LatLng(originLat, originLng);

		var myOptions = {
		  zoom: 11,	//拡大率
		  center: center,
		  panControl: false,
		  zoomControl: true,
		  mapTypeControl: false,
		  scaleControl: false,
		  streetViewControl: false,
		  overviewMapControl: false,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		map = new google.maps.Map(document.getElementById("map"), myOptions);

		//三角形を描く
		//緯度±0.06度、経度±0.1度の範囲に4つの三角形で四角を描いてみます
		draw(map,"#ff0000",0.07,-0.1,0.07,0.1);
		draw(map,"#00ff00",0.07,0.1,-0.07,0.1);
		draw(map,"#ff00ff",-0.07,-0.1,-0.07,0.1);
		draw(map,"#ffff00",-0.07,-0.1,0.07,-0.1);
	}
	
	//三角形描画
	function draw(map,col,lat1,lng1,lat2,lng2)	{
		//三角形なので3点を指定
		var triangleCoords = [
			new google.maps.LatLng(originLat, originLng),
			new google.maps.LatLng(originLat + lat1, originLng + lng1),
			new google.maps.LatLng(originLat + lat2, originLng + lng2),
		];

		bermudaTriangle = new google.maps.Polygon({
			paths: triangleCoords,
			strokeColor: "#222",
			strokeOpacity: 0.8,
			strokeWeight: 1.25,
			fillColor: col,		//塗りつぶし色
			fillOpacity: 0.3	//塗りつぶし透明度
		});
		bermudaTriangle.setMap(map);

	}

	google.maps.event.addDomListener(window, "ready", initialize());	//実行
このくらいの簡単な内容で描画できます。
ちなみに中心位置は弊社のある場所辺りです。

なお、APIを使うにはAPIキーというものが必要です。
Google Maps APIのサイトで入手できます。

1