GMap Simple Polylines

View this example full screen.

CoString of GMap Simple Polylines

View this example in sandbox :
o,24.88065,121.065427&z,14&e,6,ef1568,1,4,24.877277778799474,121.048983335495,24.877764443700702,121.05239510536194,24.876771645268857,121.05535626411438,24.877005245617514,121.05668663978577

JavaScript of GMap Simple Polylines

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

    var oPath = [
        new google.maps.LatLng(24.877277778799474, 121.048983335495),
        new google.maps.LatLng(24.877764443700702, 121.05239510536194),
        new google.maps.LatLng(24.876771645268857, 121.05535626411438),
        new google.maps.LatLng(24.877005245617514, 121.05668663978577)
        ];
    var oPolyline = new zhupiter.CoStr.Polyline({
        //@ In this example, the coStrMap is not given in options.
        //coStrMap: oCoStrMap,
        path: oPath,
        strokeWeight: 6,
        strokeColor: '#ef1568',
        strokeOpacity: 1.0
    });

    //@ Notice: The CoString type information of this oPolyline is getting form the oCoStrMap
    //@         in the first time of setMap() call.
    oPolyline.setMap(oCoStrMap);
}

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

JavaScript + HTML of GMap Simple Polylines

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
        <meta charset='utf-8'>
        <title>GMap Simple 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>
function initialize()
{
    var oMapOptions = {
        coStrType: zhupiter.CoStr.CoStrType.GMAP,
        center: new google.maps.LatLng(24.880650, 121.065427),
        zoom: 14
    };
    var oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);

    var oPath = [
        new google.maps.LatLng(24.877277778799474, 121.048983335495),
        new google.maps.LatLng(24.877764443700702, 121.05239510536194),
        new google.maps.LatLng(24.876771645268857, 121.05535626411438),
        new google.maps.LatLng(24.877005245617514, 121.05668663978577)
        ];
    var oPolyline = new zhupiter.CoStr.Polyline({
        //@ In this example, the coStrMap is not given in options.
        //coStrMap: oCoStrMap,
        path: oPath,
        strokeWeight: 6,
        strokeColor: '#ef1568',
        strokeOpacity: 1.0
    });

    //@ Notice: The CoString type information of this oPolyline is getting form the oCoStrMap
    //@         in the first time of setMap() call.
    oPolyline.setMap(oCoStrMap);
}

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