カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

描画ツールライブラリを使う GoogleMap v3

この記事は最終更新日から1年以上経過しています。

描画ツールを使うとユーザーが地図上に図形を描画することができます。
実際に使用するクラスは「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);


描画時に何らかの処理を行いたい場合は、overlaycompleteイベントに追加します。
ここでは例として描画した図形部分の面積を取得してみます。
※面積計測については[GoogleMapで面積計測(v3)]で説明しています。

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {

    switch(event.type){

        case "rectangle":

            var span = event.overlay.bounds.toSpan(); // 矩形の大きさを取得

            // 面積計測のための図形座標の配列を別途作成
            var thisPoly = new Array();
            thisPoly.push(event.overlay.bounds.getSouthWest());
            thisPoly.push(new google.maps.LatLng(event.overlay.bounds.getSouthWest().lat() + span.lat(), event.overlay.bounds.getSouthWest().lng()));
            thisPoly.push(event.overlay.bounds.getNorthEast());
            thisPoly.push(new google.maps.LatLng(event.overlay.bounds.getSouthWest().lat(), event.overlay.bounds.getSouthWest().lng() + span.lng()));

            // 計測するには図形を閉じないといけないため最初の座標をもう一度追加
            thisPoly.push(event.overlay.bounds.getSouthWest());

            // 面積を計測し、小数点以下2位で切り上げ
            var a = google.maps.geometry.spherical.computeArea(thisPoly);
            a *= 100;
            a = Math.ceil(a);
            a /= 100;

            alert("面積:" + a + "平米");

            // 面積を坪数に変換し、小数点以下2位で切り上げ
            var tubo = a * 0.3025;
            tubo *= 100;
            tubo = Math.ceil(tubo);
            tubo /= 100;

            alert("面積:" + tubo + "坪");

            break;

        case "polygon":

            // 面積計測のための図形座標の配列を別途作成
            var thisPoly = new Array();
            event.overlay.getPaths().forEach(function(path) {
                for(i in path.getArray()) {
                    thisPoly.push(path.getArray()[i]);
                }

                // 計測するには図形を閉じないといけないため最初の座標をもう一度追加
                thisPoly.push(path.getArray()[0]);
            });

            // 面積を計測し、小数点以下2位で切り上げ
            var a = google.maps.geometry.spherical.computeArea(thisPoly);
            a *= 100;
            a = Math.ceil(a);
            a /= 100;

            alert("面積:" + a + "平米");

            // 面積を坪数に変換し、小数点以下2位で切り上げ
            var tubo = a * 0.3025;
            tubo *= 100;
            tubo = Math.ceil(tubo);
            tubo /= 100;

            alert("面積:" + tubo + "坪");

            break;

    }

});

参考URL:https://developers.google.com/maps/documentation/javascript/drawinglayer?hl=ja

この記事がお役に立ちましたらシェアお願いします
3,295 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です