GoogleMap上に円を描く方法をご紹介します。
CircleOptionsクラス
var myCircleOptions = {
center: null, // 中心の座標
clickable: true, // クリックの可否(デフォルトtrue)
draggable: false, // ドラッグの可否(デフォルトfalse)
editable: false, // 編集の可否(デフォルトfalse)
fillColor: "#ffffff", // 塗り潰しの色
fillOpacity: 0.7, // 塗り潰しの不透明度 0.0~1.0
map: map, // GoogleMapのインスタンス
radius: 0, // 半径(単位:m)
strokeColor: "#6090ff", // 線の色
strokeOpacity: 0.9, // 線の不透明度 0.0~1.0
strokePosition:
google.maps.StrokePosition.CENTER, // 線の位置(CENTER|INSIDE|OUTSIDE)
strokeWeight: 3, // 線の太さ(単位:ピクセル)
visible: true, // 表示の有無(デフォルトtrue)
zIndex: 1 // 重なり順
}
設定したオプションを利用してサークルオブジェクトを作成します。
myCircle = new google.maps.Circle(myCircleOptions);
マップを後から設定する場合は
myCircle.setMap(map);
公式リファレンスはこちらから
https://developers.google.com/maps/documentation/javascript/reference#Circle