GMap Complex Polylines

View this example full screen.

JavaScript of GMap Complex Polylines

var g_oCoStrMap = null;
var g_oPolyline = null;
function initialize()
{
    var oMapOptions = {
        coStrType: zhupiter.CoStr.CoStrType.GMAP,
        center: new google.maps.LatLng(24.880650, 121.065427),
        zoom: 14
    };
    g_oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);

    g_oPolyline = new zhupiter.CoStr.Polyline({
        strokeWeight: 3,
        strokeColor: '#ef1568',
        strokeOpacity: 1.0
    });
    g_oPolyline.setMap(g_oCoStrMap);

    zhupiter.CoStr.event.addListener(g_oCoStrMap, 'click', myAdd);
}

function myAdd(oInEv)
{
    var oPath = g_oPolyline.getPath();
    oPath.push(oInEv.latLng);

    var oMarker = new zhupiter.CoStr.Marker({
        coStrMap: g_oCoStrMap,
        position: oInEv.latLng,
        title: '#' + oPath.getLength()
    });
}

zhupiter.CoStr.event.addDomListener(window, 'load', initialize);

JavaScript + HTML of GMap Complex Polylines

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
        <meta charset='utf-8'>
        <title>GMap Complex Polylines</title>
        <style>
        html, body, #map_canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
        }
        </style>
        <script src='https://maps.googleapis.com/maps/api/js'></script>
        <script src='//costr.zhupiter.com/js/'></script>
        <script>
var g_oCoStrMap = null;
var g_oPolyline = null;
function initialize()
{
    var oMapOptions = {
        coStrType: zhupiter.CoStr.CoStrType.GMAP,
        center: new google.maps.LatLng(24.880650, 121.065427),
        zoom: 14
    };
    g_oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);

    g_oPolyline = new zhupiter.CoStr.Polyline({
        strokeWeight: 3,
        strokeColor: '#ef1568',
        strokeOpacity: 1.0
    });
    g_oPolyline.setMap(g_oCoStrMap);

    zhupiter.CoStr.event.addListener(g_oCoStrMap, 'click', myAdd);
}

function myAdd(oInEv)
{
    var oPath = g_oPolyline.getPath();
    oPath.push(oInEv.latLng);

    var oMarker = new zhupiter.CoStr.Marker({
        coStrMap: g_oCoStrMap,
        position: oInEv.latLng,
        title: '#' + oPath.getLength()
    });
}

zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id='map_canvas'></div>
    </body>
</html>

CoString | Donate bitcoin: 1LX5KC19tXCPK8y72Z6LVoZjoSaCp9P6K