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

MarkerOptions

MarkerOptionsは、マーカーの設定を調整するためのオブジェクトです。マーカーを作成する時のMarkerクラスの引数などに利用できます。

プロパティ

プロパティ名説明
anchorPoint

Point

情報ウィンドウの位置をPointクラスのインスタンスで指定する。位置は、マーカーの下部中央を起点の座標(0, 0)として計算する。

animation

Animation

マーカーに適用したいアニメーションをAnimationクラスのインスタンスで指定する。

attribution

Attribution

補足情報を表すAttributionオブジェクトを指定する。

clickable

boolean

クリックを有効にするにはtrue、無効にするにはfalseを指定する。

crossOnDrag

boolean

十字マークを表示するにはtrue、非表示にするにはfalseを指定する。

cursor

string

スタイルシートのcursorプロパティと同じ内容で、文字列で指定できます。

draggable

boolean

trueならドラッグ操作ができる、falseならできない。

icon

string|Icon|Symbol

URLを文字列で指定した場合は、その画像ファイルが表示される。大きさなど細かく調整する場合はIconオブジェクトを指定する。画像にSVGを使いたい場合はSymbolオブジェクトを指定する。

label

string|MarkerLabel

文字列で指定する。色やフォントなどを細かく調整したい場合はMarkerLabelオブジェクトで指定する。

map

Map|StreetViewPanorama

Mapクラス、またはStreetViewPanoramaクラスのインスタンスを指定する。

opacity

number

スタイルシートのopacityプロパティと同じルールで、不透明度を指定する。

optimized

boolean

trueなら最適化をする、falseなら最適化をしない。初期はtrue。

place

MarkerPlace

場所の内容をMarkerPlaceオブジェクトで指定する。

position

LatLng

位置座標を表すLatLngクラスを指定する。

shape

MarkerShape

領域をMarkerShapeオブジェクトで指定する。

title

string

テキストを文字列で指定する。

visible

boolean

trueなら表示状態、falseなら非表示状態になる。

zIndex

number

z-orderの値を数値で指定する。数値が高いほど、重なった時に手前に表示される。

デモ

MarkerOptionsオブジェクトを利用して、マーカーを作成するデモです。各プロパティの値を調整して、どのように反映されるのかを確認してみて下さい。

var options = {
	map: map ,
	position: new google.maps.LatLng( 42.0611, 140.3564 ) ,
	anchorPoint: new google.maps.Point( -100, 0 ) ,
	animation: google.maps.Animation.BOUNCE ,
	clickable: false ,
	crossOnDrag: false ,
	cursor: "url(./cursor.png), auto" ,
	draggable: true ,
	icon: "./marker.png" ,
	label: "SYNCER" ,
	opacity: 0.5 ,
	title: "SYNCER" ,
	visible: false ,
} ;

var marker = new google.maps.Marker( 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( 43.0611, 141.3564 ) ,
	zoom: 6 ,
} ) ;

// Marker
var options = {
	map: map ,
	position: new google.maps.LatLng( 42.0611, 140.3564 ) ,
	anchorPoint: new google.maps.Point( -100, 0 ) ,
	animation: google.maps.Animation.BOUNCE ,
	clickable: false ,
	crossOnDrag: false ,
	cursor: "help" ,
	draggable: true ,
	icon: "https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/MarkerOptions/marker.png" ,
	label: "SYNCER" ,
	opacity: 0.5 ,
	title: "SYNCER" ,
//	visible: false ,
} ;

var marker = new google.maps.Marker( options ) ;

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

デモページを開く

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