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

Icon

Iconは、アイコンを表すオブジェクトです。マーカーをオリジナル画像にしたい時に、画像ファイルのURLやサイズ、アンカー位置などを調整できます。

プロパティ

プロパティ名説明
anchor

Point

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

labelOrigin

Point

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

origin

Point

anchor、sizeなどを指定する際の基準となる座標を指定する。省略時は画像の左上(0,0)が基準となっている。例えば、CSSスプライトの画像を利用する際などに有用である。

scaledSize

Size

画像の表示されるサイズを指定する。画像の、sizeで指定した部分がこのサイズで表示される。Retinaに対応したい場合に有用。

size

Size

画像ファイルの、表示する部分を指定する。anchor(デフォルトでは画像の左上(0,0))を基準に、横幅、高さをピクセルで指定する。省略した場合、画像ファイルの全部分が表示される。画像ファイルより小さいサイズを指定した場合、全て表示されずに途切れる。このプロパティは、CSSスプライト用の画像を利用する時に有用である。

url

string

画像ファイルのパスを指定する。

デモ

Iconオブジェクトの各プロパティの役割をデモで確認できます。オリジンやアンカーの位置がどのように作用するのかを確認しておきましょう。このデモで使用している画像ファイルのサイズは、scaledSizeよりsizeを小さくすると、画像が途切れます。●はラベルのテキストです。

var options = {
	anchor: new google.maps.Point( 0, 0 ) ,
	labelOrigin: new google.maps.Point( 0, 0 ) ,
	origin: new google.maps.Point( 0, 0 ) ,
	scaledSize: new google.maps.Size( 50, 50 ) ,
	size: new google.maps.Size( 50, 50 ) ,
	url: "./marker.png" ,
} ;

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

サンプルコード

<!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 options = {
	anchor: new google.maps.Point( 0, 0 ) ,
	labelOrigin: new google.maps.Point( 50, 50 ) ,
	origin: new google.maps.Point( 0, 0 ) ,
	scaledSize: new google.maps.Size( 50, 50 ) ,
	size: new google.maps.Size( 50, 50 ) ,
	url: "https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Icon/marker.png" ,
} ;

var marker = new google.maps.Marker( {
	map: map ,
	position: map.getCenter() ,
	label: { text: "●", color: "red", fontSize: "24px", } ,
	icon: options ,
} ) ;
	</script>
</body>
</html>

デモページを開く

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