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.08.23

Google Maps でロングタップのイベントを発生させるには

みなさん、こんにちは!

今回は Google Maps 上でスマホやiPadなどのタブレットでロングタップに対応する方法をご紹介します。

続きを読む

2016.09.27

MarkerClusterer ライブラリの紹介

みなさん、こんにちは!

 

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

続きを読む

2017.07.19

「関東一の祇園・熊谷うちわ祭り」の山車・屋台位置情報サイト公開!

みんさん、こんにちは!

暑い夏をいかがお過ごしですか?今回は、前回記事の山笠に引き続き、夏祭りネタにです^^

 ・・・

続きを読む

 - Google Maps JavaScript API

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

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

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

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