CoString of GMap Drawing Manager
View this example in sandbox :
o,24.88065,121.065427&z,12
View this example full screen.
View this example in sandbox :
o,24.88065,121.065427&z,12
function initialize() { //@ Map/Canvas 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); //@ DrawingManager var oDmOptions = { coStrDmDiv: document.getElementById('drawing_manager'), coStrMap: oCoStrMap, coStrDrawingMode: zhupiter.CoStr.drawing.OverlayType.MARKER, coStrDrawingControls: [zhupiter.CoStr.drawing.ControlType.MODES, zhupiter.CoStr.drawing.ControlType.STROKE, zhupiter.CoStr.drawing.ControlType.FILL, zhupiter.CoStr.drawing.ControlType.WEIGHT, ], coStrDrawingModes: [zhupiter.CoStr.drawing.OverlayType.HAND, zhupiter.CoStr.drawing.OverlayType.MARKER, zhupiter.CoStr.drawing.OverlayType.LINE, zhupiter.CoStr.drawing.OverlayType.TRIANGLE, zhupiter.CoStr.drawing.OverlayType.RECTANGLE, zhupiter.CoStr.drawing.OverlayType.DELETE, zhupiter.CoStr.drawing.OverlayType.CIRCLE, zhupiter.CoStr.drawing.OverlayType.INFO, zhupiter.CoStr.drawing.OverlayType.POLYGON, zhupiter.CoStr.drawing.OverlayType.POLYLINE, ], strokeWeight: 10, strokeColor: '#ff0000', strokeOpacity: 0.7, fillColor: '#00ff00', fillOpacity: 0.5, continuousDrawing: false, //@ Default value is true draggable: true //@ Default value is false }; var oCoStrDm = new zhupiter.CoStr.drawing.DrawingManager(oDmOptions); } zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
<!DOCTYPE html> <html> <head> <meta name='viewport' content='initial-scale=1.0, user-scalable=no'> <meta charset='utf-8'> <title>GMap Drawing Manager</title> <style> html, body, #map_canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src='https://maps.googleapis.com/maps/api/js?libraries=drawing'></script> <script src='//costr.zhupiter.com/js/?libraries=drawing'></script> <script> function initialize() { //@ Map/Canvas 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); //@ DrawingManager var oDmOptions = { coStrDmDiv: document.getElementById('drawing_manager'), coStrMap: oCoStrMap, coStrDrawingMode: zhupiter.CoStr.drawing.OverlayType.MARKER, coStrDrawingControls: [zhupiter.CoStr.drawing.ControlType.MODES, zhupiter.CoStr.drawing.ControlType.STROKE, zhupiter.CoStr.drawing.ControlType.FILL, zhupiter.CoStr.drawing.ControlType.WEIGHT, ], coStrDrawingModes: [zhupiter.CoStr.drawing.OverlayType.HAND, zhupiter.CoStr.drawing.OverlayType.MARKER, zhupiter.CoStr.drawing.OverlayType.LINE, zhupiter.CoStr.drawing.OverlayType.TRIANGLE, zhupiter.CoStr.drawing.OverlayType.RECTANGLE, zhupiter.CoStr.drawing.OverlayType.DELETE, zhupiter.CoStr.drawing.OverlayType.CIRCLE, zhupiter.CoStr.drawing.OverlayType.INFO, zhupiter.CoStr.drawing.OverlayType.POLYGON, zhupiter.CoStr.drawing.OverlayType.POLYLINE, ], strokeWeight: 10, strokeColor: '#ff0000', strokeOpacity: 0.7, fillColor: '#00ff00', fillOpacity: 0.5, continuousDrawing: false, //@ Default value is true draggable: true //@ Default value is false }; var oCoStrDm = new zhupiter.CoStr.drawing.DrawingManager(oDmOptions); } zhupiter.CoStr.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id='drawing_manager'></div> <div id='map_canvas'></div> </body> </html>
CoString | Donate bitcoin: 1LX5KC19tXCPK8y72Z6LVoZjoSaCp9P6K