Googleマップでポリゴンを作成

今回はGoogleマップでポリゴン（図形）を作成したいと思います。
始めは単純にマップ上にポリゴンを追加してみたいと思います。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>polygon</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
    <script type="text/javascript" src="js/specified_range.js"></script>
<style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_canvas {
        height: 100%;
      }
    </style>
</head>
<body onload="initialize()">
    <div id="map_canvas"></div>
</body>
</html>

HTMLは上記のようにします。
続いてJavascriptです。

var mapObj;
function initialize(){
    var latlng = new google.maps.LatLng(35.387958, 132.736220);
    var options = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //マップの取得
    mapObj = new google.maps.Map(document.getElementById("map_canvas"),options);
    addPolygon();
}
//マップへポリゴンの追加
function addPolygon(){
    var polArray = [
        {lat:35.27253175660236,lng:134.945068359375},
        {lat:35.0254981588326,lng:134.9505615234375},
        {lat:35.36665566526249,lng:134.23095703125},
        {lat:35.48751102385376,lng:134.659423828125}
    ];
    var polygonObj = new google.maps.Polygon({
        paths: polArray,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: mapObj
    });
}

スポンサード・リンク

google.maps.Polygonのpathsに緯度経度の配列を渡すだけです。
そのほかのオプションについてはリファレンスを参考にしてください。

ただ、ポリゴンを書くだけなら上記のようにソースに直接緯度経度の配列を書けばよいのですが、私の場合は編集したりしたポリゴンの緯度経度を取得してサーバーへ保存する必要があったので下記のようなjavascripを書きました。
（HTMLは上記とほぼ同じなので記述しません。ボタンタグとテキストを書き出すdivタグを追加したくらいです。ボタンタグはonclickでeditを実行するようにしています。）

var mapObj;
var markerArray = new google.maps.MVCArray();
var polygonArray = new google.maps.MVCArray();
function initialize(){
    var latlng = new google.maps.LatLng(35.387958, 132.736220);
    var options = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //マップの取得
    mapObj = new google.maps.Map(document.getElementById("map_canvas"),options);
    //マップクリックイベント登録
    google.maps.event.addListener(mapObj,'click',function(event){
        addMerker(event.latLng);
    });
}
function addMerker(latlng){
    var marker = new google.maps.Marker({
        position: latlng,
        map:mapObj,
        draggable: true // ドラッグ可能にする
    });

    google.maps.event.addListener( marker, 'dragend', function(ev){
        addPolygon();
    });
    //マーカー配列へ投入
    markerArray.push(marker);
    addPolygon();
}

function addPolygon(){
    //ポリゴンパス生成
    var polygonPath=arryForEach(markerArray);
    //ポリゴンの初期化
    polygonArray.forEach(function(gpolygon,index){
        gpolygon.setMap(null);
    });
    polygonArray.clear();
    //ポリゴン作成
    var polygon = new google.maps.Polygon({
        paths: polygonPath,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map:mapObj
    });
    polygonArray.push(polygon);
}

//パスの生成
function edit(){
    var sendPath=arryForEach(markerArray);
    var conObj = document.getElementById("contents");
    conObj.innerHTML = JSON.stringify(sendPath);
}

function arryForEach(array){
    var resArray=[];
    array.forEach(function(gmarker,index){
        resArray.push({lat:gmarker.getPosition().lat(),lng:gmarker.getPosition().lng()});
    });
    return resArray;
}

今回はgoogle.maps.MVCArrayというものを使用しています。MVCArrayとはマーカーを扱ったり、MVCObjectを扱うための配列だそうです。これを使うとforEachが扱えるので重宝します。
マップのクリックイベントでマーカーを生成し、マーカーから緯度経度配列を生成しています。
マップをクリックするたびに逐次、マップからポリゴンを削除、再度緯度経度を生成しマップに設定しています。（すいません。ほかにやり方がわかりませんでした）
マーカーにはドラッグイベントも設定して、ドラッグすると再度ポリゴンを生成しています。
最後は設定を押すとクリックして設定した緯度経度を書き出すようにしています。

スポンサード・リンク

iinの備忘録

記録を忘れないように書くblog

Googleマップでポリゴンを作成