Google Maps ライン V3

---

取り扱い方

Google Maps V3 ライン　コード

---

初期画面



①：地図上でクリックすると座標を表示します

②：実線か破線の選択

③：編集や移動を可能にするか選択

④：線の色を選びます。クリックすると以下のようなカラーピッカーが表示されますのでここから選択


⑤：線の透過度を選択

⑥：線の太さを選択

地図上をクリックしてラインを設定します。

実線・編集可能・線の色：#FF3366・線の透過度：0.5・線の太さ：14

で描画した場合。



破線・編集不可・線の色：#000033・線の透過度：1.0・線の太さ：14

に変更した場合。

破線は、現バージョンでは太さが一定です。

---

GoogleMaps V3の ライン　コード

実線の場合

var coordinatesArray = [];

//coordinatesArrayに値をセット

function addSolidPolyline(coordinatesArray){
    
    polyline = new google.maps.Polyline({
        path: coordinatesArray,
        strokeColor:"#FF0000",
        strokeOpacity:0.7,
        strokeWeight:3,
        editable:true,
        draggable:true,
    });
    
    polyline.setMap(googlemap);
    
}

破線の場合

var coordinatesArray = [];

//coordinatesArrayに値をセット

function addDashedPolyline(coordinatesArray){
    var lineSymbol = {
        path: 'M 0,-1 0,1',
        strokeOpacity:opacity,
        scale: 4
    };

    var dotline = new google.maps.Polyline({
        path: coordinatesArray,
        strokeOpacity: 0,
        icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '20px'
        }],
        strokeColor:"#FF0000",
        strokeOpacity:0,//元の線を隠す
        strokeWeight:3,
        editable:true,
        draggable:true,
        map:googlemap
    });
    
}