Google Map Draw Custom

Google Map - jQuery way

by Camille Bechayda

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<button id="rect">Draw</button>
<div class="container">
    <div class="well">
        <div id="map_canvas"></div>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
    padding-top:25px;
}
#map_canvas {
    width: 100%;
    height: 400px;
}

JavaScript

var map;
$(document).ready(function () {

    var latlng = new google.maps.LatLng(49.241943, -122.889318);
    var myOptions = {
        zoom: 12,
        center: latlng,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  // enabling Drawing Manager
    //var drawingManager = new google.maps.drawing.DrawingManager();
    //drawingManager.setMap(map);

    var drawingStyle = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true,
        draggable: true,
            strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
    };
    var drawingManager = new google.maps.drawing.DrawingManager({

        drawingControl: false,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
            google.maps.drawing.OverlayType.CIRCLE,
            google.maps.drawing.OverlayType.POLYGON,
            google.maps.drawing.OverlayType.RECTANGLE]
        },
        rectangleOptions: drawingStyle,
        polygonOptions: drawingStyle,
        circleOptions: drawingStyle,
        map: map
    });
    drawingManager.setMap(map);
    
        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
  
            // Switch back to non-drawing mode after drawing a shape.
            drawingManager.setDrawingMode(null);
            // To hide:
            drawingManager.setOptions({
             // drawingControl: false
            });
    
        });
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
    console.log(radius);
});
    
 //   google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  //if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
 //   var radius =...