MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.05.19

Googleマップに同心円を描画する

同心円を描画する

みなさん、こんにちは。

Googleマップ上に同心円を書きたいと思ったことはありませんか? 私は、よくあります。

マルティスープでは、よく位置情報や地図を利用したアプリの開発を行いますが、例えば、半径10km以内の人を探す、物件を探して距離の近い順に並べる、などの要望があります。

 

開発自体はそれ程難しいものではないのですが、テストをする際にその境界値付近の緯度経度を調へる必要がでてきます。そんなとき、ある地点から同心円を描き、その付近の緯度経度を取得して、テストに利用します。

 

「同心円」自体は、円(Circle)を同じ中心位置から半径を変更して描画すれば簡単にできます。

デモサイトを作成したので、ご覧ください。

Full Screen

使い方

1. 同心円の半径をカンマ区切りで入力します。
2. 同心円を描画する中心を決定します。方法は下記の通りです。
   A. 青いアイコンを任意の位置に移動する。 
  B. 地図の中心を移動し「中心」ボタンをクリックする。
  C. 検索ボックスに住所や施設名を入力。検索を実行し、地図の中心を移動。「中心」ボタンをクリックする。
3. 塗りつぶし色など、スタイルを設定します。
4. 「同心円を描画」ボタンをクリックします。

Google Maps JavaScript API での円の描き方です。「Circle」オブジェクトを利用します。

// 地図作成
var map = new google.maps.Map(document.getElementById("map"), {
	zoom : _zoom,
	mayTypeId: google.maps.MapTypeId.ROADMAP
});
// 円描画
var circle = new google.maps.Circle({
	center: map.getCenter() ,
	map: map ,
	radius: parseInt(parseFloat(val)*1000) ,	// 半径(m)
	fillColor: $('#fillColor').val(), 		// 塗りつぶし色
	fillOpacity: $('#fillOpacity').val(),		// 塗りつぶし透過度(0: 透明 ⇔ 1:不透明)
	strokeColor: $('#strokeColor').val(),		// 外周色
	strokeOpacity: $('#strokeOpacity').val(),	// 外周透過度(0: 透明 ⇔ 1:不透明)
	strokeWeight: $('#strokeWeight').val()		// 外周太さ
});

 

今回は、マーカーと円を連動するようにしてみました。マーカーをドラッグして移動すると円も追随します。

//マーカー描画
var marker =  new google.maps.Marker({
	map: map,
	position: map.getCenter(),
	draggable: true // ドラッグを有効にする
});
// 円とマーカーが連動するよう設定
circle.bindTo("center", marker, "position");

 

また、地図上を右クリックするとポップアップを表示し、その位置の緯度経度を表示するようにしています。緯度経度を調べるのには、意外と必要な機能です。

 

いかがでしたか?

もし同心円を描画する必要があるときは、是非こちらのデモサイトをご活用ください。

また、機能的にもっとこうして欲しいなどの要望も受け付けています。問い合わせフォームより要望を送ってください。

改良いたします!

 

マルティスープでは、Googleマップを利用した開発やオープンソースを利用した開発など、地図に関わる開発を多数行っています。

コーポレイトサイトにも色々な情報がありますので、是非ご覧ください。

 

 

【関連記事】こんな記事も読まれています

2016.09.27

MarkerClusterer ライブラリの紹介

みなさん、こんにちは!

 

Google Maps 上に 店舗の情報などマーカーをたくさん描画したとき、マーカーが重なっ・・・

続きを読む

2017.07.09

Geocoding API を使って郵便番号から住所を入力するフォーム

みなさん、こんにちは。

よく入力フォームで住所を入力するとき、郵便番号から自動で住所を入力する方法がありますね。今回は、Google Ma・・・

続きを読む

2017.06.10

Street View Image API を初めて使ってみました

みなさん、こんにちは!

来週の 6月14、15日は、Google Cloud Next'17 が開催されます。皆さん、申込みしましたか? 

続きを読む

 - Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)