MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2018.01.13

Google Maps JavaScript API で描画ツールを利用してみる

描画ツール

みなさん、こんにちは。

Google Maps JavaScript API で地図上にラインや円、ポリゴン、四角形、マーカーを描画するツールがあるのをご存知ですか?

描画ツールを使用すると、以下のようなツールボックスが表示されるので、図形の描画を簡単に行うことができます。

 

drawing_tool

 

左から、地図移動(Pan)マーカー(Marker)、円(Circle)、ポリゴン(Polygon)、ライン(Line)、四角形(Rectangle)となります。

 

 

では、早速使い方を説明します。

まず、jsファイルをロードするときに、「libraries=drawing」というパラメータを付加します。

 

<script src="https://maps.google.com/maps/api/js?v=3&key={API_KEY}&libraries=drawing"></script>

 

実際のソースプログラムです。「google.maps.drawing.DrawingManager」クラスを生成し、map に割り当てます。

// Mapを生成
var map = new google.maps.Map(document.getElementById("map"), {
	zoom : 15,
	center: new google.maps.LatLng(35.5, 139.5)
});

// DrawingManagerを生成
var drawingManager = new google.maps.drawing.DrawingManager({
	drawingMode: google.maps.drawing.OverlayType.PAN,
	drawingControl: true,                            
	drawingControlOptions: {
		position: google.maps.ControlPosition.TOP_CENTER, 
		drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
	},
	//マーカーのプション
	markerOptions: {
		icon: {
			url: '../common/img/ms/pin_02.png',
			scaledSize: new google.maps.Size(40, 40)
		}
	},
	//円のオプション
	circleOptions: {
		fillColor: '#ffff00',
		fillOpacity: 1,
		strokeWeight: 5,
		clickable: false,
		editable: true,
		zIndex: 1
	},
	//ポリゴンのオプション
	polygonOptions: {
		fillColor: '#ff00ff',
		fillOpacity: 1,
		strokeWeight: 5,
		clickable: false,
		editable: true,
		zIndex: 1
	},
	//四角形のオプション
	rectangleOptions: {
		fillColor: '#0000ff',
		fillOpacity: 1,
		strokeWeight: 5,
		clickable: true,
		editable: true,
		zIndex: 1
	},
	//ポリラインのオプション
	polylineOptions: {
		strokeColor: '#ff0000',
		strokeWeight: 5,
		clickable: false,
		editable: true,
		zIndex: 1
	}
});
// Mapに割り当て
drawingManager.setMap(_map);

 

以下にサンプルのサイトを作成しました。画面上部に描画ツールのコントロールが表示されていますので、クリックして図形を描画してみてください。

Full Screen

ただ、実際使用するときは、作図した図形を取得し、何かしら操作を行うことがありますね。

その場合は、以下のようにイベントを定義すると、作成を完了したタイミングで図形を取得することができます。

//Marker
google.maps.event.addListener(drawingManager, 'markercomplete', function(marker) {
	alert('Marker complete');
});
//Circle
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
	alert('Circle complete');
});
//Polygon
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
	alert('Polygon complete');
});
//Polyline
google.maps.event.addListener(drawingManager, 'polylinecomplete', function(polyline) {
	alert('Polyline complete');
});
//Rectangle
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) {
	alert('Rectangle complete');
});

 

いかがでしたか?

このように、非常に簡単に図形を描画できるようになりますので、是非みなさんもお試しください!

 

では、今日はこの辺で。

バイ

 

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

2017.11.05

JavaScript APIでカスタムコントロールを試す

みなさん、こんにちは。

Google Maps JavaScript API を使用して地図を表示し、地図上に検索用のテキストボックスを置・・・

続きを読む

2017.01.19

Distance Matrix API の使い方を考える

みなさん、こんにちは。

 

今回は、Distance Matrix API の使い方について説明いたします。

続きを読む

2016.06.30

Google Maps APIsのライブラリ読み込み方法

みなさん、こんにちは!

Google Maps API のライブラリを読み込む方法は1つじゃないってご存知でしたか?

&n・・・

続きを読む

 - Google Maps JavaScript API

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

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

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

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