ライン上にシンボルを表示する｜Google Maps API v3

GoogleMapsAPIではラインを引くだけでなく、
ライン上にシンボル(ライン描画オブジェクト)を配置することができます。
矢印や丸など様々な形状を描画することができますので、
ラインの方向性を表示したい場合などに便利です。

概要

1 地図の表示
2 補足
3 サンプルコード
4 参考

地図の表示

以下は指定した座標（「姫路城」と「三の丸広場南」）を結ぶポリラインを表示しています。

そのポリライン上にシンボルにて表示したマーカーを５種類配置しています。
それぞれのマーカーの意味は特にありません。

補足

地図上にポリラインを表示(「姫路城」と「三の丸広場南」を結ぶ直線)する
方法についても以下でご紹介しています。

地図上に直線（ポリライン）を引いて表示する｜Google Maps API v3

ここでは表示するポリライン上にシンボルマークを表示する点について補足します。

シンボルマークの定義

以下の５つの変数に対して、
それぞれプロパティー指定で利用可能なシンボルマークのオプション定義をしています。

//ライン上シンボルオプション定義
var lineSymbol_BACKWARD_CLOSED_ARROW = {
	path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
	scale: 5,
	strokeColor: '#e65100',
	strokeWeight: 2
};
var lineSymbol_BACKWARD_OPEN_ARROW = {
	path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW,
	scale: 5,
	strokeColor: '#e65100',
	strokeWeight: 2
};
var lineSymbol_CIRCLE = {
	path: google.maps.SymbolPath.CIRCLE,
	scale: 6,
	strokeColor: '#e65100',
	strokeWeight: 2
};
var lineSymbol_FORWARD_OPEN_ARROW = {
	path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
	scale: 5,
	strokeColor: '#e65100',
	strokeWeight: 2
};
var lineSymbol_FORWARD_CLOSED_ARROW = {
	path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
	scale: 5,
	strokeColor: '#e65100',
	strokeWeight: 2
};

//ライン上シンボルオプション定義

var lineSymbol_BACKWARD_CLOSED_ARROW = {

path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,

scale: 5,

strokeColor: '#e65100',

strokeWeight: 2

};

var lineSymbol_BACKWARD_OPEN_ARROW = {

path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW,

scale: 5,

strokeColor: '#e65100',

strokeWeight: 2

};

var lineSymbol_CIRCLE = {

path: google.maps.SymbolPath.CIRCLE,

scale: 6,

strokeColor: '#e65100',

strokeWeight: 2

};

var lineSymbol_FORWARD_OPEN_ARROW = {

path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,

scale: 5,

strokeColor: '#e65100',

strokeWeight: 2

};

var lineSymbol_FORWARD_CLOSED_ARROW = {

path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

scale: 5,

strokeColor: '#e65100',

strokeWeight: 2

};

ポリライン定義に対してシンボルマークをアイコン指定

次に、ポリラインを描画するためのオプション定義にて、
上記の各シンボルマーカーを「icons:」の指定によって５配列で格納しています。

「offset: “XX%”」の指定部分は、
「path: [points[0].latlng, points[1].latlng]」で指定したポリラインの描画方向に対して、
全体の何％の位置にアイコンを描画するかを指定しています。

//ポリラインオプション定義
var polyopt = {
	map: gmap_canvas,
	path: [points[0].latlng, points[1].latlng],
	strokeColor: "#e65100",
	strokeOpacity: 1,
	strokeWeight: 2,
	zIndex: 1,
	icons: [
		{icon: lineSymbol_BACKWARD_CLOSED_ARROW, offset: '15%'},
		{icon: lineSymbol_BACKWARD_OPEN_ARROW, offset: '30%'},
		{icon: lineSymbol_CIRCLE, offset: '50%'},
		{icon: lineSymbol_FORWARD_OPEN_ARROW, offset: '70%'},
		{icon: lineSymbol_FORWARD_CLOSED_ARROW, offset: '85%'}
		]
};

//ポリラインオプション定義

var polyopt = {

map: gmap_canvas,

path: [points[0].latlng, points[1].latlng],

strokeColor: "#e65100",

strokeOpacity: 1,

strokeWeight: 2,

zIndex: 1,

icons: [

{icon: lineSymbol_BACKWARD_CLOSED_ARROW, offset: '15%'},

{icon: lineSymbol_BACKWARD_OPEN_ARROW, offset: '30%'},

{icon: lineSymbol_CIRCLE, offset: '50%'},

{icon: lineSymbol_FORWARD_OPEN_ARROW, offset: '70%'},

{icon: lineSymbol_FORWARD_CLOSED_ARROW, offset: '85%'}

]

};

ポリラインの描画

実際にポリラインの描画時に上記で指定したポリラインオプションを渡し、
ポリラインの描画を行います。

//ライン描画
pline = new google.maps.Polyline(polyopt);

1 2	//ライン描画 pline = new google.maps.Polyline(polyopt);

サンプルコード

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

上記の補足説明の通りです。
ここでは便宜上、JavaScriptのファイル上からボタンを出力しています。

<script type="text/javascript">
	//global
	var markers = [];
	var gmap_canvas;
	var map_div = document.getElementById("gmap_canvas");
	var points = [
			{location:"三の丸広場南（姫路城）", latlng:{lat:34.836508 , lng:134.693319},icon: "https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png,icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1535-camera-photo_4x.png&highlight=ff000000,0288d1,ff000000&scale=2.0"},
			{location:"姫路城", latlng:{lat: 34.839450, lng:134.693903},icon: "https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container-bg_4x.png,icons/onion/SHARED-mymaps-pin-container_4x.png,icons/onion/1899-blank-shape_pin_4x.png&highlight=ff000000,e65100,ff000000&scale=2.0"}
			];
	var lcnt = points.length;
	var pline;

	//地図を描画
	function init(){
		gmap_canvas = new google.maps.Map(map_div,{
			center: points[0].latlng,
			zoom : 17,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		});

		//ライン上シンボルオプション定義
		var lineSymbol_BACKWARD_CLOSED_ARROW = {
			path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
			scale: 5,
			strokeColor: '#e65100',
			strokeWeight: 2
		};
		var lineSymbol_BACKWARD_OPEN_ARROW = {
			path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW,
			scale: 5,
			strokeColor: '#e65100',
			strokeWeight: 2
		};
		var lineSymbol_CIRCLE = {
			path: google.maps.SymbolPath.CIRCLE,
			scale: 6,
			strokeColor: '#e65100',
			strokeWeight: 2
		};
		var lineSymbol_FORWARD_OPEN_ARROW = {
				path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
				scale: 5,
				strokeColor: '#e65100',
				strokeWeight: 2
			};
		var lineSymbol_FORWARD_CLOSED_ARROW = {
			path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
			scale: 5,
			strokeColor: '#e65100',
			strokeWeight: 2
		};

		//ポリラインオプション定義
		var polyopt = {
				map: gmap_canvas,
				path: [points[0].latlng, points[1].latlng],
				strokeColor: "#e65100",
				strokeOpacity: 1,
				strokeWeight: 2,
				zIndex: 1,
				icons: [
						{icon: lineSymbol_BACKWARD_CLOSED_ARROW, offset: '15%'},
						{icon: lineSymbol_BACKWARD_OPEN_ARROW, offset: '30%'},
						{icon: lineSymbol_CIRCLE, offset: '50%'},
						{icon: lineSymbol_FORWARD_OPEN_ARROW, offset: '70%'},
						{icon: lineSymbol_FORWARD_CLOSED_ARROW, offset: '85%'}

						]
				};
		//ライン描画
		pline = new google.maps.Polyline(polyopt);
	}

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

//global

var markers = [];

var gmap_canvas;

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

var points = [

{location:"三の丸広場南（姫路城）", latlng:{lat:34.836508 , lng:134.693319},icon: "https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png,icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1535-camera-photo_4x.png&highlight=ff000000,0288d1,ff000000&scale=2.0"},

{location:"姫路城", latlng:{lat: 34.839450, lng:134.693903},icon: "https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container-bg_4x.png,icons/onion/SHARED-mymaps-pin-container_4x.png,icons/onion/1899-blank-shape_pin_4x.png&highlight=ff000000,e65100,ff000000&scale=2.0"}

];

var lcnt = points.length;

var pline;

//地図を描画

function init(){

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

center: points[0].latlng,

zoom : 17,

mapTypeId : google.maps.MapTypeId.ROADMAP

});

//ライン上シンボルオプション定義

var lineSymbol_BACKWARD_CLOSED_ARROW = {

path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,

scale: 5,

strokeColor: '#e65100',

strokeWeight: 2

};

var lineSymbol_BACKWARD_OPEN_ARROW = {

path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW,

scale: 5,

strokeColor: '#e65100',

strokeWeight: 2

};

var lineSymbol_CIRCLE = {

path: google.maps.SymbolPath.CIRCLE,

scale: 6,

strokeColor: '#e65100',

strokeWeight: 2

};

var lineSymbol_FORWARD_OPEN_ARROW = {

path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,

scale: 5,

strokeColor: '#e65100',

strokeWeight: 2

};

var lineSymbol_FORWARD_CLOSED_ARROW = {

path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

scale: 5,

strokeColor: '#e65100',

strokeWeight: 2

};

//ポリラインオプション定義

var polyopt = {

map: gmap_canvas,

path: [points[0].latlng, points[1].latlng],

strokeColor: "#e65100",

strokeOpacity: 1,

strokeWeight: 2,

zIndex: 1,

icons: [

{icon: lineSymbol_BACKWARD_CLOSED_ARROW, offset: '15%'},

{icon: lineSymbol_BACKWARD_OPEN_ARROW, offset: '30%'},

{icon: lineSymbol_CIRCLE, offset: '50%'},

{icon: lineSymbol_FORWARD_OPEN_ARROW, offset: '70%'},

{icon: lineSymbol_FORWARD_CLOSED_ARROW, offset: '85%'}

]

};

//ライン描画

pline = new google.maps.Polyline(polyopt);

}

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>

参考

図形 | Google Maps JavaScript API | Google Developers

Polyline class｜Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers

シンボル | Google Maps JavaScript API | Google Developers

SymbolPath constants｜Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers