Google Map Drawing

by Camille Bechayda

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>

<div id="map"></div>
    	<input id="save" value="save" type="button" />
		<div id="geojson"></div>

CSS

#map {
        		height: 80%;
      		}
     		/* Optional: Makes the sample page fill the window. */
      		html, body {
        		height: 100%;
        		margin: 0;
        		padding: 0;
      		}

JavaScript

function initMap() {
        	var map = new google.maps.Map(document.getElementById('map'), {
          		center: {lat: 40.7328822, lng: -74.0006213},
          		zoom: 12
        	});
        	/*map.data.setControls(['Polygon']);
		    map.data.setStyle({
		        editable: true,
		        draggable: true
		    });*/
		    //bindDataLayerListeners(map.data);
        	var drawingManager = new google.maps.drawing.DrawingManager({
          		drawingMode: google.maps.drawing.OverlayType.POLYGON,
          		drawingControl: true,
          		drawingControlOptions: {
        			position: google.maps.ControlPosition.TOP_CENTER,
            		drawingModes: ['polygon']
          		}
	        });
        
        	drawingManager.setMap(map);
        	google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
			    switch (event.type) {
			      case google.maps.drawing.OverlayType.MARKER:
			        map.data.add(new google.maps.Data.Feature({
			          geometry: new google.maps.Data.Point(event.overlay.getPosition())
			        }));
			        break;
			      case google.maps.drawing.OverlayType.RECTANGLE:
			        var b = event.overlay.getBounds(),
			          p = [b.getSouthWest(), {
			              lat: b.getSouthWest().lat(),
			              lng: b.getNorthEast().lng()
			            },
			            b.getNorthEast(), {
			              lng: b.getSouthWest().lng(),
			              lat: b.getNorthEast().lat()
			            }
			          ]
			        map.data.add(new google.maps.Data.Feature({
			          geometry: new google.maps.Data.Polygon([p])
			        }));
			        break;
			      case google.maps.drawing.OverlayType.POLYGON:
			        map.data.add(new google.maps.Data.Feature({
			          geometry: new google.maps.Data.Polygon([event.overlay.getPath().getArray()])
			        }));
			        break;
			      case google.maps.drawing.OverlayType.POLYLINE:
			        map.data.add(new google.maps.Data.Feature({
			       ...