javascript - Drawing Manager not showing on Google Map - Stack Overflow

admin管理员组

文章数量:1391975

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

Share Improve this question Follow edited Oct 29, 2023 at 21:39 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Mar 6, 2014 at 3:45 user1760110user1760110 2,33666 gold badges3232 silver badges3737 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

本文标签： javascriptDrawing Manager not showing on Google MapStack Overflow