Maps API v3 drawingManager get Polygon paths

http://stackoverflow.com/questions/32739660

by upsidown

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=drawing "></script>
<div id="map-canvas"></div>

CSS

body {
    margin: 0;
    padding: 0;
}
#map-canvas {
    height: 400px;
}

JavaScript

var map;

function initialize() {

    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var drawingManager = new google.maps.drawing.DrawingManager({

        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [google.maps.drawing.OverlayType.POLYGON]
        },
        polygonOptions: {
            strokeWeight: 1,
            strokeColor: '#ff0000',
        }
    });

    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {

        // Get overlay paths
        var paths = event.overlay.getPaths();
        
        // Remove overlay from map
        event.overlay.setMap(null);
        
        // Disable drawingManager
        drawingManager.setDrawingMode(null);

        // Create Polygon
        createPolygon(paths);
    });
}

function createPolygon(paths) {
    
    var polygon = new google.maps.Polygon({
        fillColor: '#ffff00',
        fillOpacity: 1,
        strokeWeight: 1,
        strokeColor: '#0000ff',
        editable: true,
        draggable: true,
        paths: paths,
        map: map
    });
}

initialize();