SYNCERのロゴ
アイキャッチ画像

Symbol

Symbolは、SVGを表すオブジェクトです。例えばマーカーのアイコンをオリジナル画像にしたい時に、PNGやJPGではなく、SVGにしたい場合などに、このオブジェクトを値として指定します。このオブジェクトでは、パスはもちろん、大きさや角度など細かく指定できます。

プロパティ

プロパティ名説明
anchor

Point

画像のアンカー(支点)を調整する。例えばマーカーは、アンカー部分が設置する位置座標と重なる。画像の左上(0,0)を基準に、X座標(→方向)、Y座標(↓方向)をピクセルで指定する。省略した場合、定数のパスの場合は最下部の中央、オリジナルのパスの場合は左上に設定される。

fillColor

string

画像の色を調整する。

fillOpacity

number

画像の不透明度を調整する。

labelOrigin

Point

画像にラベルを付ける際のアンカー(支点)を調整する。ここで指定した部分にテキストが表示される。アンカーは画像の左上(0,0)を基準に、X座標(→方向)、Y座標(↓方向)をピクセルで指定する。省略した場合、定数のパスでは最下部の中央、オリジナルのパスでは左上に設定される。

path

SymbolPath|string

SVGのパスを、あらかじめ用意されたSymbolPath定数、または、独自に指定する。

rotation

number

アンカーを軸とした傾きの角度を調整する。直立した状態を0として、右回りに0〜360で指定する。

scale

number

画像のサイズ。デフォルトでは1が設定されている。

strokeColor

string

画像の線の色を調整する。

strokeOpacity

number

画像の線の不透明度を調整する。

strokeWeight

number

画像の線の太さを調整する。デフォルトでは、scaleと同じ値となる。

デモ

Symbolオブジェクトの各プロパティの役割をデモで確認できます。値を編集して挙動を確認して下さい。このマーカーのラベルは"●"というテキストを指定しています。

パスを定数で指定した場合と、オリジナルで指定した場合で、アンカーの位置やスケールの扱いが変わるのを確認しておきましょう。マーカーをドラッグ操作すると、アンカーの位置にバツ印が付くので分かりやすいです。このデモで利用しているオリジナルのパスは、22x22のViewboxで作成してあります。つまり、anchorに(11,22)を指定すれば、最下部中央を支点にできます。

var symbol = {
	anchor: new google.maps.Point( 11, 22 ) ,
	fillColor: "gold" ,
	fillOpacity: 0.5 ,
	labelOrigin: new google.maps.Point( 11, 11 ) ,
	path: "M0 8h22L4 22L11 0L18 22z" ,
	rotation: 0 ,
	scale: 8 ,
	strokeColor: "purple" ,
	strokeOpacity: 0.75 ,
	strokeWeight: 3 ,
} ;

var marker = new google.maps.Marker( {
	map: map ,
	position: new google.maps.LatLng( 43.0611, 141.3564 ) ,
	icon: symbol ,
} ) ;

サンプルコード

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

// Map
var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 35, 139 ) ,
	zoom: 18 ,
} ) ;

// Marker
var symbol = {
	anchor: new google.maps.Point( 11, 22 ) ,
	fillColor: "gold" ,
	fillOpacity: 0.5 ,
	labelOrigin: new google.maps.Point( 11, 11 ) ,
	path: "M0 8h22L4 22L11 0L18 22z" ,
	rotation: 0 ,
	scale: 8 ,
	strokeColor: "purple" ,
	strokeOpacity: 0.75 ,
	strokeWeight: 3 ,
} ;

var marker = new google.maps.Marker( {
	map: map ,
	position: map.getCenter() ,
	icon: symbol ,
} ) ;

// set center
map.setCenter( marker.getPosition() ) ;
	</script>
</body>
</html>

デモページを開く

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2016年2月1日 (月)
コンテンツを公開しました。