-
-
Save knownasilya/89a32e572989f0aff1f8 to your computer and use it in GitHub Desktop.
Google Maps Advanced Drawing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
| <meta charset="UTF-8"> | |
| <title>Drawing Tools</title> | |
| <script type="text/javascript" | |
| src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script> | |
| <style type="text/css"> | |
| #map, html, body { | |
| padding: 0; | |
| margin: 0; | |
| width: 960px; | |
| height: 700px; | |
| } | |
| #panel { | |
| width: 200px; | |
| font-family: Arial, sans-serif; | |
| font-size: 13px; | |
| float: right; | |
| margin: 10px; | |
| } | |
| #color-palette { | |
| clear: both; | |
| } | |
| .color-button { | |
| width: 14px; | |
| height: 14px; | |
| font-size: 0; | |
| margin: 2px; | |
| float: left; | |
| cursor: pointer; | |
| } | |
| #delete-button { | |
| margin-top: 5px; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| var drawingManager; | |
| var selectedShape; | |
| var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; | |
| var selectedColor; | |
| var colorButtons = {}; | |
| function clearSelection () { | |
| if (selectedShape) { | |
| if (selectedShape.type !== 'marker') { | |
| selectedShape.setEditable(false); | |
| } | |
| selectedShape = null; | |
| } | |
| } | |
| function setSelection (shape) { | |
| if (shape.type !== 'marker') { | |
| clearSelection(); | |
| shape.setEditable(true); | |
| selectColor(shape.get('fillColor') || shape.get('strokeColor')); | |
| } | |
| selectedShape = shape; | |
| } | |
| function deleteSelectedShape () { | |
| if (selectedShape) { | |
| selectedShape.setMap(null); | |
| } | |
| } | |
| function selectColor (color) { | |
| selectedColor = color; | |
| for (var i = 0; i < colors.length; ++i) { | |
| var currColor = colors[i]; | |
| colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; | |
| } | |
| // Retrieves the current options from the drawing manager and replaces the | |
| // stroke or fill color as appropriate. | |
| var polylineOptions = drawingManager.get('polylineOptions'); | |
| polylineOptions.strokeColor = color; | |
| drawingManager.set('polylineOptions', polylineOptions); | |
| var rectangleOptions = drawingManager.get('rectangleOptions'); | |
| rectangleOptions.fillColor = color; | |
| drawingManager.set('rectangleOptions', rectangleOptions); | |
| var circleOptions = drawingManager.get('circleOptions'); | |
| circleOptions.fillColor = color; | |
| drawingManager.set('circleOptions', circleOptions); | |
| var polygonOptions = drawingManager.get('polygonOptions'); | |
| polygonOptions.fillColor = color; | |
| drawingManager.set('polygonOptions', polygonOptions); | |
| } | |
| function setSelectedShapeColor (color) { | |
| if (selectedShape) { | |
| if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) { | |
| selectedShape.set('strokeColor', color); | |
| } else { | |
| selectedShape.set('fillColor', color); | |
| } | |
| } | |
| } | |
| function makeColorButton (color) { | |
| var button = document.createElement('span'); | |
| button.className = 'color-button'; | |
| button.style.backgroundColor = color; | |
| google.maps.event.addDomListener(button, 'click', function () { | |
| selectColor(color); | |
| setSelectedShapeColor(color); | |
| }); | |
| return button; | |
| } | |
| function buildColorPalette () { | |
| var colorPalette = document.getElementById('color-palette'); | |
| for (var i = 0; i < colors.length; ++i) { | |
| var currColor = colors[i]; | |
| var colorButton = makeColorButton(currColor); | |
| colorPalette.appendChild(colorButton); | |
| colorButtons[currColor] = colorButton; | |
| } | |
| selectColor(colors[0]); | |
| } | |
| function initialize () { | |
| var map = new google.maps.Map(document.getElementById('map'), { | |
| zoom: 16, | |
| center: new google.maps.LatLng(52.25097, 20.97114), | |
| mapTypeId: google.maps.MapTypeId.SATELLITE, | |
| disableDefaultUI: true, | |
| zoomControl: true | |
| }); | |
| var polyOptions = { | |
| strokeWeight: 0, | |
| fillOpacity: 0.45, | |
| editable: true, | |
| draggable: true | |
| }; | |
| // Creates a drawing manager attached to the map that allows the user to draw | |
| // markers, lines, and shapes. | |
| drawingManager = new google.maps.drawing.DrawingManager({ | |
| drawingMode: google.maps.drawing.OverlayType.POLYGON, | |
| markerOptions: { | |
| draggable: true | |
| }, | |
| polylineOptions: { | |
| editable: true, | |
| draggable: true | |
| }, | |
| rectangleOptions: polyOptions, | |
| circleOptions: polyOptions, | |
| polygonOptions: polyOptions, | |
| map: map | |
| }); | |
| google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) { | |
| var newShape = e.overlay; | |
| newShape.type = e.type; | |
| if (e.type !== google.maps.drawing.OverlayType.MARKER) { | |
| // Switch back to non-drawing mode after drawing a shape. | |
| drawingManager.setDrawingMode(null); | |
| // Add an event listener that selects the newly-drawn shape when the user | |
| // mouses down on it. | |
| google.maps.event.addListener(newShape, 'click', function (e) { | |
| if (e.vertex !== undefined) { | |
| if (newShape.type === google.maps.drawing.OverlayType.POLYGON) { | |
| var path = newShape.getPaths().getAt(e.path); | |
| path.removeAt(e.vertex); | |
| if (path.length < 3) { | |
| newShape.setMap(null); | |
| } | |
| } | |
| if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) { | |
| var path = newShape.getPath(); | |
| path.removeAt(e.vertex); | |
| if (path.length < 2) { | |
| newShape.setMap(null); | |
| } | |
| } | |
| } | |
| setSelection(newShape); | |
| }); | |
| setSelection(newShape); | |
| } | |
| else { | |
| google.maps.event.addListener(newShape, 'click', function (e) { | |
| setSelection(newShape); | |
| }); | |
| setSelection(newShape); | |
| } | |
| }); | |
| // Clear the current selection when the drawing mode is changed, or when the | |
| // map is clicked. | |
| google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection); | |
| google.maps.event.addListener(map, 'click', clearSelection); | |
| google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); | |
| buildColorPalette(); | |
| } | |
| google.maps.event.addDomListener(window, 'load', initialize); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="panel"> | |
| <div id="color-palette"></div> | |
| <div> | |
| <button id="delete-button">Delete Selected Shape</button> | |
| </div> | |
| </div> | |
| <div id="map"></div> | |
| </body> | |
| </html> |
How we can manage predefined shapes. Like change shape color, edit and delete the shape etc.
How we use "setSelection" methods for exits shapes.
yes, if we can get the coordinates while drawing - that would be great! tnx.
Thanks a lot,
One more question can you help me with how can I save CIRCLE, RECTANGLE, POLYGON drawing data into database and load when my map is fully loaded.
@azaddeveloper not natively with the drawing manager. I created a tool to help https://github.com/knownasilya/google-maps-drawing-tools
Was someone able to figure out how to get the coordinates of the shape as you are drawing the shape?
@Deepp805 you'd have to manually draw the polygon and then add it to the drawing manager, example here: https://github.com/knownasilya/google-maps-markup/blob/master/addon/components/google-maps-markup.js#L213
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks buddy, I was looking for this for the past few days. Awesome work. One more thing I would like to ask if we can get the coordinates while drawing and, when shapes are moved to new location. Would be very helpful ! Thanks again