MacgyverMartins/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hackaton</title>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!--[if lt IE 9]>
    <div class="lt-ie9-bg">
      <p class="browsehappy">You are using an <strong>outdated</strong> browser.</p>
      <p>Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    </div>
    <![endif]-->

    <h2>Mapa dummy</h2>
    <div id="map"></div>

    <script type="text/javascript" charset="utf-8" src="script.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQWmqOFtkGEoe6ThDDmD9tooJ6NKkhd28&libraries=drawing&callback=initMap" async defer></script> </body>
</html>

## script.js
'use strict';

var map;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {
      icon: 'images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    var coordinates = (polygon.getPath().getArray());
    console.log(coordinates);
  });

  google.maps.event.addListener(drawingManager, 'circlecomplete', function(polygon) {
    debugger;
  });

  google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(polygon) {
    debugger;
  });

}

## style.css
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 80%;
  width: 80%;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Hackaton</title>
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<!--[if lt IE 9]>
	<div class="lt-ie9-bg">
	<p class="browsehappy">You are using an <strong>outdated</strong> browser.</p>
	<p>Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	</div>
	<![endif]-->

	<h2>Mapa dummy</h2>
	<div id="map"></div>

	<script type="text/javascript" charset="utf-8" src="script.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQWmqOFtkGEoe6ThDDmD9tooJ6NKkhd28&libraries=drawing&callback=initMap" async defer></script> </body>
	</html>
	'use strict';

	var map;

	function initMap() {
	var map = new google.maps.Map(document.getElementById('map'), {
	center: {
	lat: -34.397,
	lng: 150.644
	},
	zoom: 8
	});

	var drawingManager = new google.maps.drawing.DrawingManager({
	drawingMode: google.maps.drawing.OverlayType.MARKER,
	drawingControl: true,
	drawingControlOptions: {
	position: google.maps.ControlPosition.TOP_CENTER,
	drawingModes: [
	google.maps.drawing.OverlayType.CIRCLE,
	google.maps.drawing.OverlayType.POLYGON,
	google.maps.drawing.OverlayType.RECTANGLE
	]
	},
	markerOptions: {
	icon: 'images/beachflag.png'
	},
	circleOptions: {
	fillColor: '#ffff00',
	fillOpacity: 1,
	strokeWeight: 5,
	clickable: false,
	editable: true,
	zIndex: 1
	}
	});
	drawingManager.setMap(map);

	google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
	var coordinates = (polygon.getPath().getArray());
	console.log(coordinates);
	});

	google.maps.event.addListener(drawingManager, 'circlecomplete', function(polygon) {
	debugger;
	});

	google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(polygon) {
	debugger;
	});

	}
	html,
	body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	#map {
	height: 80%;
	width: 80%;
	}