CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
ralph
ralph

Reputation: 133

Google maps api v3 DrawingManager no work

I'm trying to use the Google Maps APIs v3 but I have always an error

I added the script in the page:

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

and I've 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 got the same error always:

Uncaught TypeError: Cannot read property 'DrawingManager' of undefined

Upvotes: 11

Views: 14079

Answers (7)

Gautom Das
Gautom Das

Reputation: 31

So I don't know if anyone really answered this but what you're supposed to do is add "&libraries=drawing to the end of the url that looks like src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=YOURKEY&v=3&callback=initMapfUNCTION **ADD HERE** "

Upvotes: 3

محمد صبرى فضه
محمد صبرى فضه

Reputation: 71

use this:

<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=YOURKEY&v=3&callback=initMapfUNCTION"></script>

YOURKEY ==> replace this word with your Map API Key initMapfUNCTION ==> replace this word with the name of your initial function to your map

Upvotes: 6

MatzFan
MatzFan

Reputation: 937

It seems your code is being executed before the library has loaded. If you are loading asynchronously, you should include the library in the same API call that specifies a callback to your map initialization function (which presumably includes/calls your code fragment). If your initialization function is called initMap then do this:

<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; one which loads the drawing library (like yours, with no callback) and another with just the 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.

Upvotes: 2

Cyril Jacquart
Cyril Jacquart

Reputation: 2762

Try to add

});

at the end.

hope it helps.

Upvotes: 1

Ray Suelzer
Ray Suelzer

Reputation: 4107

'The concepts within this document refer to features only available within the google.maps.drawing library. This library is not loaded by default when you load the Maps Javascript API but must be explicitly specified through use of a libraries bootstrap parameter: '

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

Upvotes: 20

Henri
Henri

Reputation: 121

I got 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>

Upvotes: 12

duncan
duncan

Reputation: 31912

Apart from your code sample not being complete (I guess you've just missed off the closing brackets when you've copied it in), I don't see anything obvious. I haven't used the Drawing library, but it seems like you're following the documentation correctly. I'd say use Firebug to check what Javascript is being loaded in from Google and see if it mentions anything about the DrawingManager class.

Upvotes: 1

Related Questions