The Drawing Tools won't show on my map - google-maps-api-3

Question

<%# Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="TestMap.aspx.cs" Inherits="TestMap" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing" type="text/javascript"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8sE5-1UPLAT2UqkNqRiMnvVNh9UNZk-0&callback=initMap">
</script>
<script type="text/javascript">
function initMap() {
var centerPoint = new google.maps.LatLng(41, -103);
var mapOptions = {
center: centerPoint,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
keyboardShortcuts: true,
mapTypeControl: true,
streetViewControl: true,
drawingControl: true,
zoom: 8
};
// alert('initMap');
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
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.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {icon: 'images/pUmjb.jpg'},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
</script>
MAP:
<div style="width:800px; height:500px" id="map"></div>
</asp:Content>
I am trying to use v3 of the google maps api, and it's all working fine so far, except that I can't seem to get the toolbar for the drawing tools to show on the map. Here is the code for a very simplified WebForm. I'm guessing that I'm just missing one parameter or one line of code somewhere, but I just can't seem to make it work.

Answer 1

Only include the API one time. If you want/need to use a key (it is recommended but not required), include it in the parameters of the single include. The sensor parameter is no longer required.
(update: keys are now required)
<script src="http://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyB8sE5-1UPLAT2UqkNqRiMnvVNh9UNZk-0&callback=initMap" type="text/javascript" async defer></script>
code snippet:
function initMap() {
var centerPoint = new google.maps.LatLng(41, -103);
var mapOptions = {
center: centerPoint,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
keyboardShortcuts: true,
mapTypeControl: true,
streetViewControl: true,
drawingControl: true,
zoom: 8
};
// alert('initMap');
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
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.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {
icon: 'images/pUmjb.jpg'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>
<div id="map"></div>