Google maps api v3 DrawingManager not working

Question

I am trying to use the Google Maps v3 API, but I always have an error

I added a script on the page:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script> 

and I implemented:

 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] }, /*markerOptions: { icon: new google.maps.MarkerImage('http://www.example.com/icon.png') },*/ circleOptions: { fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, clickable: false, zIndex: 1, editable: true } 

I always got the same error:

Uncaught TypeError: Cannot read the "DrawingManager" property from undefined

Answer 1

'The concepts in this document refer to features available only in the google.maps.drawing library. This library is not loaded by default when loading the Javascript Maps API, but must be explicitly specified using the libraries bootstrap parameter: '

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing

Answer 2

I have the same error and I figured it out. Use "https" instead of "http" ...

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

Answer 3

It seems your code is executing before the library loads. If you load asynchronously, you must include the library in the same API call that indicates the callback of the map initialization function (which supposedly includes / calls the code snippet). If your initialization function is called initMap , do the following:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY?libraries=drawing&callback=initMap"></script>

I got the same error by having 2 script tags; which loads the drawing library (like yours without a callback) and the other just a callback. I fixed it after Google kindly wrote the following in my console

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

Answer 4

Besides the fact that your code sample is not complete (I think you just missed the closing brackets when you copied it), I see nothing obvious. I did not use the Drawing library, but it looks like you were following the documentation correctly. I would say using Firebug to check which Javascript is loading from Google and see if it mentions anything about the DrawingManager class.

Answer 5

Try to add

 }); 

in the end.

hope this helps.