Google Maps(グーグルマップ)上に円(Circle)に描く方法
今回は、矩形ではなく、円を描いていきます。
なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。
Contents
Google Maps(グーグルマップ)上に円(Circle)に描く方法
サンプル
青の円をドラッグ、または、サイズを変更してみてください。
中心緯度 | |
---|---|
中心経度 | |
半径(m) |
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Sample Map</title>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >
</script>
<style type="text/css">
#map_canvas {
width: 100%;
height:100%;
}
html,
body {
height: 80%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var map;
var circleRed;
var circleBlue;
var nRadiusKm = 1000; /* 1000メートル */
var nRadiusHalfKm = 500; /* 500メートル */
function initMap() {
var myLatlng = new google.maps.LatLng(35.683934,139.737612);
var centerLatLngRed = new google.maps.LatLng(35.685870,139.760372);
var centerLatLngBlue = new google.maps.LatLng(35.683755,139.745625);
var mapOptions = {
zoom: 14,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// 編集不可の円追加
circleRed = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: centerLatLngRed,
radius: nRadiusKm
});
// 編集可能の円追加
circleBlue = new google.maps.Circle({
strokeColor: "#3333FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#3333FF",
fillOpacity: 0.35,
map: map,
draggable: true,
editable: true,
center: centerLatLngBlue,
radius: nRadiusHalfKm
});
setCircleInfo(circleBlue.getCenter(),circleBlue.getRadius());
/* 中心位置変更 */
circleBlue.addListener("center_changed",function(e) {
setCircleInfo(circleBlue.getCenter(),circleBlue.getRadius());
});
/* 半径変更 */
circleBlue.addListener("radius_changed",function(e) {
setCircleInfo(circleBlue.getCenter(),circleBlue.getRadius());
});
}
function setCircleInfo(center,radius) {
document.getElementById('tdLat').innerHTML = center.lat();
document.getElementById('tdLng').innerHTML = center.lng();
document.getElementById('tdCtr').innerHTML = radius;
}
</script>
</head>
<body>
<div id="map_canvas"></div>
<table>
<tr><th>中心緯度</th><td id="tdLat"></td></tr>
<tr><th>中心経度</th><td id="tdLng"></td></tr>
<tr><th>半径(m) </th><td id="tdCtr"></td></tr>
</table>
</body>
</html>
デモ
Circle クラス
円作成
// 編集不可の円追加
circleRed = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: centerLatLngRed,
radius: nRadiusKm
});
google.maps.Circleクラスをnewすれば、円を作成できます。当然、中心点や半径の長さ(メートル)などを指定する必要があり、それらのオプションは「CircleOptions」になります。
主なパラメータは以下の通りです。
center | 中心の緯度/経度 |
radius | 半径の長さ(単位:メートル) |
strokeColor | 縁の色 |
strokeOpacity | 縁の透明度(0.0:透明~1.0:透明なし) |
strokeWeight | 縁の太さ |
fillColor | 塗りつぶしの色 |
fillOpacity | 塗りつぶしの透明度(0.0:透明~1.0:透明なし) |
編集可能な円
circleBlue = new google.maps.Circle({
strokeColor: "#3333FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#3333FF",
fillOpacity: 0.35,
map: map,
draggable: true,
editable: true,
center: centerLatLngBlue,
radius: nRadiusHalfKm
});
CircleOptionで「editable」をtrueにすれば、サイズ(半径)を変えられますし、「draggable」をtrueにすれば、位置を移動させることができます。
円変更時にイベントを設定する
/* 中心位置変更 */
circleBlue.addListener("center_changed",function(e) {
setCircleInfo(circleBlue.getCenter(),circleBlue.getRadius());
});
/* 半径変更 */
circleBlue.addListener("radius_changed",function(e) {
setCircleInfo(circleBlue.getCenter(),circleBlue.getRadius());
});
中心点変更イベント
addListenerメソッドで「center_changed」イベントを仕掛けると中心点変更時のイベントを取得できます。
半径長さ変更時のイベント
addListenerメソッドで「radius_changed」イベントを仕掛けると半径長さ変更時のイベントを取得できます。
サンプルでは、最後に中心点と半径長さをラベルに設定してあります。
function setCircleInfo(center,radius) {
document.getElementById('tdLat').innerHTML = center.lat();
document.getElementById('tdLng').innerHTML = center.lng();
document.getElementById('tdCtr').innerHTML = radius;
}