ライン(線)を引いて表示する(HEX色指定)｜Google Maps API v3

Google Maps API(v3) を利用して地図上に道筋などを表示する際に
利用することができるのがライン(線)です。
ここでは単純に２座標を指定して線を描画します。
ポリライン色に指定できるCSS3Colorを、一般的なHEX指定によって描画しています。

概要

1 地図の表示
2 サンプルコード

地図の表示

指定したGPS座標を中心に情報ウィンドウを表示します。

サンプルコード

HTML

HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></div>」部分は、
ページ表示用の高さ制御用のタグです。

<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div>

1	<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div>

CSS

CSSではclass=”aspect”に対して、幅100%を指定し、高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。

<style type="text/css">
	.aspect{
		width:100%;
		height:50vw;
	}
	.aspect_normal,
	.aspect_dot,
	.aspect_key,
	.aspect_dotkey{
		width:100%;
		height:25vw;
	}
	#gmap_canvas,
	#gmap_canvas_normal,
	#gmap_canvas_dot,
	#gmap_canvas_key,
	#gmap_canvas_dotkey,
	div.g_canvas{
		width:100%;
		height:100%;
	}

</style>

.aspect{

width:100%;

height:50vw;

}

.aspect_normal,

.aspect_dot,

.aspect_key,

.aspect_dotkey{

width:100%;

height:25vw;

}

#gmap_canvas,

#gmap_canvas_normal,

#gmap_canvas_dot,

#gmap_canvas_key,

#gmap_canvas_dotkey,

div.g_canvas{

width:100%;

height:100%;

}

</style>

JavaScript

Polylineインスタンスを生成時に、
対象のmapインスタンスをパラメータで渡します。
同時にラインを描画する座標を指定し、表示の色・透明度・重なり順を指定しています。

<script type="text/javascript">
	function init(){
		var map_div = document.getElementById("gmap_canvas");
		var gmap_canvas = new google.maps.Map(map_div,{
			center: new google.maps.LatLng(34.839450, 134.693903),
			zoom : 14,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		});
		//create polyline
		var pline = new google.maps.Polyline({
			map:gmap_canvas,
			path:[new google.maps.LatLng(34.827463, 134.690208),
			      new google.maps.LatLng(34.839449, 134.693905)
		      ],
	      strokeColor: "#FF0000",	//線色(def:#000000)
	      strokeOpacity: 0.5,		//透明度0～1(def:1)
	      strokeWeight: 5,			//px指定（def:1)
	      zIndex: 1						//重なり順
		});
	}

	google.maps.event.addDomListener(window,"load",init);
	$('#ver').text(google.maps.version);
</script>

function init(){

var map_div = document.getElementById("gmap_canvas");

var gmap_canvas = new google.maps.Map(map_div,{

center: new google.maps.LatLng(34.839450, 134.693903),

zoom : 14,

mapTypeId : google.maps.MapTypeId.ROADMAP

});

//create polyline

var pline = new google.maps.Polyline({

map:gmap_canvas,

path:[new google.maps.LatLng(34.827463, 134.690208),

new google.maps.LatLng(34.839449, 134.693905)

strokeColor: "#FF0000", //線色(def:#000000)

strokeOpacity: 0.5, //透明度0～1(def:1)

strokeWeight: 5, //px指定（def:1)

zIndex: 1 //重なり順

});

}

google.maps.event.addDomListener(window,"load",init);

$('#ver').text(google.maps.version);

</script>

別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script>

1 2	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script>