【Google Maps API】地図上に円を表示・削除をする
今回はGoogle Maps APIを使って地図上に円を出してみました。
これを使用するとGoogpleMapに自分好みの円を描くことが出来ます。
サンプルコード
<!-- Google Maps APIの読み込み -->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=ja' charset='UTF-8'></script>
<script>
// 円オブジェクトの初期化
var circleOptions = null;
// 初期設定
jQuery(document).ready(function ()
{
var mapdiv = document.getElementById('map_canvas');
// 新宿駅
var center_latlng = new google.maps.LatLng(35.68978889880994, 139.70049233458258);
var options =
{
// ズーム倍率
zoom : 10,
// 地図中央の緯度・経度（新宿駅）
center : center_latlng,
// 地図タイプ
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapdiv, options);
var circleOptions = {
center: center_latlng, // 中心点(google.maps.LatLng)
fillColor: '#0000ff', // 塗りつぶし色
fillOpacity: 0.5, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明）
map: map, // 表示させる地図（google.maps.Map）
radius: 5000, // 半径（ｍ）
strokeColor: '#0000ff', // 外周色
strokeOpacity: 1, // 外周透過度（0: 透明 ⇔ 1:不透明）
strokeWeight: 1 // 外周太さ（ピクセル）
};
// 丸を設定
circleObj = new google.maps.Circle(circleOptions);
});
// 地図から丸を削除
function deleteCircle(){
circleObj.setMap(null);
}
</script>
<div class='map' id='map_canvas'></div>
<input type="button" value="円削除" onclick="deleteCircle()"/>
サンプル
応用を効かせると複数の円の出力やクリックしたら円が表示される、消されるなどが可能です。
気になったから調べてみましたが業務で円を表示する機会ってあるのかな・・・？
