マルティスープ
Staff Blog

2018.01.13

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

みなさん、こんにちは。

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

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

左から、地図移動（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);

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

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

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

//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');
});

いかがでしたか？

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

では、今日はこの辺で。

バイ