CircleOptions

2015/09/01

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

プロパティ

プロパティ名	説明
center	LatLng 位置座標を表すLatLngクラスのインスタンスを指定する。
clickable	boolean trueならクリックが有効、falseなら無効になる。
draggable	boolean trueならドラッグ操作が有効、falseなら無効になる。
editable	boolean trueなら編集が有効、falseなら無効になる。
fillColor	string スタイルシートと同じ方法で、色を文字列で指定する。
fillOpacity	number スタイルシートと同じ方法で、不透明度を数値で指定する。
map	Map 地図を表すMapクラスのインスタンスを指定する。
radius	number メートルを表す数値を指定する。
strokeColor	string スタイルシートと同じ方法で、色を文字列で指定する。
strokeOpacity	number スタイルシートと同じ方法で、不透明度を数値で指定する。
strokePosition	StrokePosition 線の位置の種類を表すStrokePosition定数を指定する。
strokeWeight	number ピクセル単位で数値を指定する。
visible	boolean trueなら表示状態、falseなら非表示状態になる。
zIndex	number z-orderを表す数値を指定する。

デモ

オプションの内容を確認して下さい。ここで紹介し切れなかったプロパティは、専用のページをご参考下さい。

var options = {
	map: map ,
	center: new google.maps.LatLng( 35.78572777,139.78867441 ) ,
	radius: 400 ,
	clickable: true ,
	draggable: true ,
	editable: true ,
	fillColor: "red" ,
	fillOpacity: 1 ,
	strokeColor: "blue" ,
	strokeOpacity: 0.25 ,
	strokePosition: google.maps.StrokePosition.INSIDE ,
	strokeWeight: 30 ,
	visible: true ,
} ;

var circle = new google.maps.Circle( 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: 15 ,
} ) ;

// Circle
var options = {
	map: map ,
	center: new google.maps.LatLng( 35.78572777,139.78867441 ) ,
	radius: 400 ,
	clickable: true ,
	draggable: true ,
	editable: true ,
	fillColor: "red" ,
	fillOpacity: 1 ,
	strokeColor: "blue" ,
	strokeOpacity: 0.25 ,
	strokePosition: google.maps.StrokePosition.INSIDE ,
	strokeWeight: 30 ,
	visible: true ,
} ;

var circle = new google.maps.Circle( options ) ;

// fit bounds
map.fitBounds( circle.getBounds() ) ;
	</script>
</body>
</html>

デモページを開く

参考

Google Maps JavaScript API: CircleOptions: Googleの公式リファレンス。