GMap Circles

View this example full screen.

CoString of GMap Circles

View this example in sandbox :
o,24.88065,121.065427&z,12&c,2,ef1568,1,61ed04,0.3,24.902922352868245,121.0441019087184,733.1808524466962&c,2,ef1568,1,61ed04,0.3,24.9354587825679,121.08304697083747,308.6298441864796&c,2,ef1568,1,61ed04,0.3,24.910472511841345,121.1533429778367,1253.1721137115999

JavaScript of GMap Circles

var g_oTownships = {};
g_oTownships['HuKou'] = {
    center: new google.maps.LatLng(24.902922352868245, 121.0441019087184),
    population: 733.1808524466962
};
g_oTownships['FuGang'] = {
    center: new google.maps.LatLng(24.9354587825679, 121.08304697083747),
    population: 308.6298441864796
};
g_oTownships['YangMei'] = {
    center: new google.maps.LatLng(24.910472511841345, 121.1533429778367),
    population: 1253.1721137115999
};

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

    var oCircle;
    for ( var sName in g_oTownships ) {
        var oCircleOptions = {
            coStrMap: oCoStrMap,
            strokeWeight: 2,
            strokeColor: '#ef1568',
            strokeOpacity: 0.8,
            fillColor: '#61ed04',
            fillOpacity: 0.3,
            center: g_oTownships[sName].center,
            radius: g_oTownships[sName].population
        };
        var oCircle = new zhupiter.CoStr.Circle(oCircleOptions);
    }
}

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

JavaScript + HTML of GMap Circles

<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
        <meta charset='utf-8'>
        <title>GMap Circles</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_oTownships = {};
g_oTownships['HuKou'] = {
    center: new google.maps.LatLng(24.902922352868245, 121.0441019087184),
    population: 733.1808524466962
};
g_oTownships['FuGang'] = {
    center: new google.maps.LatLng(24.9354587825679, 121.08304697083747),
    population: 308.6298441864796
};
g_oTownships['YangMei'] = {
    center: new google.maps.LatLng(24.910472511841345, 121.1533429778367),
    population: 1253.1721137115999
};

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

    var oCircle;
    for ( var sName in g_oTownships ) {
        var oCircleOptions = {
            coStrMap: oCoStrMap,
            strokeWeight: 2,
            strokeColor: '#ef1568',
            strokeOpacity: 0.8,
            fillColor: '#61ed04',
            fillOpacity: 0.3,
            center: g_oTownships[sName].center,
            radius: g_oTownships[sName].population
        };
        var oCircle = new zhupiter.CoStr.Circle(oCircleOptions);
    }
}

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

座標物語 | 贊助比特幣: 1LX5KC19tXCPK8y72Z6LVoZjoSaCp9P6K