I am working on the below code. Why is the Drawing Manager not showing on the Map?

$(document).ready(function () {
    var map;
    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);
  
    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/beachflag.png'
        },
        circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
        }
    });
    drawingManager.setMap(map);

});

I checked the console and I get this error message:

Uncaught TypeError: Cannot read property 'DrawingManager' of undefined

I am working on the below code. Why is the Drawing Manager not showing on the Map?

$(document).ready(function () {
    var map;
    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);
  
    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/beachflag.png'
        },
        circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
        }
    });
    drawingManager.setMap(map);

});

I checked the console and I get this error message:

Uncaught TypeError: Cannot read property 'DrawingManager' of undefined

• javascript
• google-maps-api-3

2 Answers 2

Ok I got the issue

I had to change the Google Map Javascript Library to

<script src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>

I met the same issue. At last, found that the problem maybe came from the confliction of google map js libraries. In my code, I'm using the

<script type="text/javascript" src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>

to load the drawing library, then in another place I'm using google jsapi to load google map library by

google.load("map", "3")

After I remove the google.load("map", "3") code, the error gone.