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

 

いかがでしたか?

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

 

では、今日はこの辺で。

バイ

 

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

2016.10.11

インバウンド対策! 地図各社の多言語対応比較

みなさん、こんにちは。

 

先日ホームページを見たというお客様より電話で問い合わせがありました。

 ・・・

続きを読む

2017.10.28

GoogleマップにFusion Tablesを使ってマーカーを7万個描画する

みなさん、こんにちは。

今回は、Google  Fusion Tables にデータを登録し、Google Maps JavaScript A・・・

続きを読む

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)