描画ツールを使うとユーザーが地図上に図形を描画することができます。
実際に使用するクラスは「DrawingManager」になります。
このツールは独立したAPIなので、別途使用することを明記しなくてはなりません。
API読み込みの際にパラメータを追加します。
GoogleMapAPI version 3.26
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&libraries=drawing">
</script>
実装方法は以下のようになります。
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
様々なオプションを指定して実装する
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER, //CIRCLE, MARKER, POLYGON, POLYLINE, RECTANGLE
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon', 'rectangle'] //['marker', 'polyline', 'rectangle', 'circle', 'polygon']
},
polygonOptions: {
fillColor: '#999999',
fillOpacity: 0.5,
strokeWeight: 3,
clickable: false,
editable: true,
zIndex: 1
},
rectangleOptions: {
fillColor: '#999999',
fillOpacity: 0.5,
strokeWeight: 3,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
続きを読む…»