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

GoogleMapsAPIではラインを引くだけでなく、
ライン上にSVGで描画したシンボルを配置することができます。
SVGのベクターデータで記述できるものなら自由に配置することができますので、
ライン上の任意の位置にアイコンなどを表示する際に便利です。

概要

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

地図の表示

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

そのポリライン上にSVGパスにて描画した「×」印を配置しています。。
マーカーの意味は特にありません。

補足

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

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

ここでは表示するポリライン上にSVGパスを表示する点について補足します。

シンボルマーク（SVG）の定義

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

//ライン上SVGアイコンオプション定義
var svgSymbol = {
	path: "M -2,-2 2,2 M 2,-2 -2,2",
	scale: 5,
	strokeColor: '#e65100',
	strokeWeight: 2
};

//ライン上SVGアイコンオプション定義

var svgSymbol = {

path: "M -2,-2 2,2 M 2,-2 -2,2",

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: svgSymbol, offset: '50%'}
		]
};

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

var polyopt = {

map: gmap_canvas,

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

strokeColor: "#e65100",

strokeOpacity: 1,

strokeWeight: 2,

zIndex: 1,

icons: [

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

]

};

ポリラインの描画

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

//ライン描画
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
		});

		//ライン上SVGアイコンオプション定義
		var svgSymbol = {
				path: "M -2,-2 2,2 M 2,-2 -2,2",
				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: svgSymbol, offset: '50%'}
						]
				};
		//ライン描画
		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

});

//ライン上SVGアイコンオプション定義

var svgSymbol = {

path: "M -2,-2 2,2 M 2,-2 -2,2",

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: svgSymbol, offset: '50%'}

]

};

//ライン描画

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

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

SVG Examples

Paths – SVG 1.1 (Second Edition)

Example triangle01- simple example of a ‘path’