勉強したことのメモ

webプログラマが勉強したことのメモ。

GoogleMapで半径●メートルを範囲表示

      2021/03/11

GoogleMapでマーカーを立てて、そこから範囲●mもしくは●kmを円で表示させたかった。API自体にその機能があったので使用方法をメモ。

 

サンプル

http://sample.taitan916.info/gmap_circle/

 

事前準備

マーカーの表示と自動ズームが入ったマップの作成に関しては以前の記事のものを使用した。

https://taitan916.info/blog/?p=2403

 

JavaScript部分

var mapData = [
	{ 'name':'大阪城', 'x':'34.687315', 'y':'135.526201'}, 
	{ 'name':'京都タワー', 'x':'34.987574', 'y':'135.759362'}, 
];
var minLat = 999;
var maxLat = 0;
var minLng = 999;
var maxLng = 0;

var currentWindow = null;

var latlng = new google.maps.LatLng(mapData[0].x, mapData[0].y);
var myOptions = {
	center: latlng, 
	mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


for (var key in mapData){
	makeMarker(mapData[key]);
}

autoZoom( maxLat, minLat, maxLng, minLng );

function makeMarker( mapData ){
	if( !mapData ) return false;

	if(mapData.x < minLat) minLat = mapData.x;
	if(mapData.x > maxLat) maxLat = mapData.x;
	if(mapData.y < minLng) minLng = mapData.y;
	if(mapData.y > maxLng) maxLng = mapData.y;

	var marker = new google.maps.Marker({
		position : new google.maps.LatLng(mapData.x,mapData.y), 
		map: map 
	});

	var infoWindow = new google.maps.InfoWindow();
	google.maps.event.addListener(marker, 'click', function() {
		if( currentWindow ) currentWindow.close();

		infoWindow.setContent(mapData.name);
		infoWindow.open(map,marker);
		currentWindow = infoWindow;
	});

	var cityCircle = new google.maps.Circle({
		strokeColor: '#FF0000', //外周の色
		strokeOpacity: 0.8, //外周の透過度
		strokeWeight: 2, //外周の太さ
		fillColor: '#FF0000', //内周の色
		fillOpacity: 0.35, //内周の透明度
		map: map, //表示させるマップ
		center: marker.position, //円の中心地
		radius: 10000 //半径(メートル)
	});

}

function autoZoom( maxLat, minLat, maxLng, minLng ){
	if( !maxLat || !minLat || !maxLng || !minLng ) return false;

	var sw = new google.maps.LatLng(maxLat,minLng);
	var ne = new google.maps.LatLng(minLat,maxLng);
	var bounds = new google.maps.LatLngBounds(sw, ne);
	map.fitBounds(bounds);
}

コメントを入れている部分が以前の記事のソースと異なる部分になる。

 

リファレンス

https://developers.google.com/maps/documentation/javascript/examples/circle-simple?hl=ja

 - Google Maps API, Google

  関連記事

GoogleMapでメインカラーを変更する方法

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...

GoogleMapsAPIでマーカーが全て表示されるように自動ズーム

GoogleMapsAPIでマーカーを複数設置した場合にズームの値や、マーカーの ...

GASで特定サイトにログインした後にスクレイピングを行う方法

Google Apps Scriptの勉強として特定サイトにログインし、その後に ...

GASとGmailを連携させて受信メール検索及びメール送信

Google Apps ScriptとGmailを連携させてみたい。「未読かつ特 ...

reCAPTCHA v2でAjaxは使わずにチェック状況を確認する方法

reCAPTCHA v2を実装する案件があり以前の記事を参考に組み込んでみたもの ...

GoogleMapAPIでヒートマップを表示する方法

GoogleMapAPIで花粉状況や雨量を可視化しやすいようなヒートマップ的なも ...

GoogleMapでマーカーをまとめる

GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示さ ...

GoogleMapAPIでマップ自体を移動し中心地の経度緯度を取得

GoogleMapでマップ自体をドラッグして移動した後、中心地の経度緯度を取得し ...

Advanced Custom FieldsでGoogleMapの使用

Advanced Custom FieldsでGoogleMapを使用したかった ...

GoogleMapAPIのジオコードで存在するはずの住所が見つからない

GoogleMapAPIを利用したプログラムで確かに存在するはずの住所をジオコー ...