Created
February 27, 2016 17:18
-
-
Save cristianossd/6f9162629b136a809036 to your computer and use it in GitHub Desktop.
Using Google Maps drawing tools and getting shape coordinates
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) { | |
| selectedShape.setEditable(false); | |
| selectedShape = null; | |
| } | |
| } | |
| function setSelection (shape) { | |
| clearSelection(); | |
| // getting shape coordinates | |
| var v = shape.getPath(); | |
| for (var i=0; i < v.getLength(); i++) { | |
| var xy = v.getAt(i); | |
| console.log('Cordinate lat: ' + xy.lat() + ' and lng: ' + xy.lng()); | |
| } | |
| selectedShape = shape; | |
| shape.setEditable(true); | |
| selectColor(shape.get('fillColor') || shape.get('strokeColor')); | |
| } | |
| 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) { | |
| console.log('fn setSelectedShapeColor()'); | |
| console.log(selectedShape); | |
| 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: 4, | |
| center: new google.maps.LatLng(-14.0935589, -59.8004219), | |
| 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) { | |
| 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. | |
| var newShape = e.overlay; | |
| newShape.type = e.type; | |
| 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); | |
| } | |
| }); | |
| // 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> |
I want to make a shape on google map and auto get all address inside of shape it is possible if yes so how i can write a code please tell me better idea
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It wasn't updated since created. I think the current problem is the missing API key