View this example full screen.
CoString of GMap Draggable Polygons
View this example in sandbox :
o,24.88065,121.065427&z,16&g,2,ef1568,0.8,61ed04,0.3,4,24.87865260220418,121.05988651514053,24.878939731532824,121.06129735708237,24.877883676309157,121.06143146753311,24.877679277481374,121.06035858392715
JavaScript of GMap Draggable Polygons
function initialize()
{
var oMapOptions = {
coStrType: zhupiter.CoStr.CoStrType.GMAP,
center: new google.maps.LatLng(24.880650, 121.065427),
zoom: 16
};
var oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);
var oCoords = [
new google.maps.LatLng(24.87865260220418, 121.05988651514053),
new google.maps.LatLng(24.878939731532824, 121.06129735708237),
new google.maps.LatLng(24.877883676309157, 121.06143146753311),
new google.maps.LatLng(24.877679277481374, 121.06035858392715)
];
var oPolygon = new zhupiter.CoStr.Polygon({
coStrMap: oCoStrMap,
path: oCoords,
strokeWeight: 2,
strokeColor: '#ef1568',
strokeOpacity: 0.8,
fillColor: '#61ed04',
fillOpacity: 0.3,
draggable: true
});
}
zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
JavaScript + HTML of GMap Draggable Polygons
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
<meta charset='utf-8'>
<title>GMap Draggable Polygons</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: 16
};
var oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions);
var oCoords = [
new google.maps.LatLng(24.87865260220418, 121.05988651514053),
new google.maps.LatLng(24.878939731532824, 121.06129735708237),
new google.maps.LatLng(24.877883676309157, 121.06143146753311),
new google.maps.LatLng(24.877679277481374, 121.06035858392715)
];
var oPolygon = new zhupiter.CoStr.Polygon({
coStrMap: oCoStrMap,
path: oCoords,
strokeWeight: 2,
strokeColor: '#ef1568',
strokeOpacity: 0.8,
fillColor: '#61ed04',
fillOpacity: 0.3,
draggable: true
});
}
zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>