Карты Google не могут рисовать на пользовательском оверлее

Question

У меня есть пользовательское наложение, которое находится на слое OverlayImage.Я использую это, потому что это позволяет событиям, так что я могу изменить размер и повернуть изображение.

Мне также нужно использовать Google Maps Инструменты рисования поверх OverlayImage.Но всякий раз, когда я делаю это, он пытается нарисовать фигуры под OverlayImage.

Я уже пробовал использовать zIndex и другие панели.

Я приложил пример дополнительно.Вы должны увидеть проблему там.

Не могли бы вы помочь об этом?

Мой сценарий выглядит так:

$ (документ) .ready (function () {

  var imgObj = new Image();
  imgObj.onload = function(){

          var map = new google.maps.Map(document.getElementById("map"),{
                        zoom:20,
                        mapTypeId: google.maps.MapTypeId.SATELLITE,
                        center: new google.maps.LatLng(40.923200, 29.314472),
                        draggable: true,
                        showOverlay: true
                    });

        getOverlay(imgObj,map);
  };
  imgObj.src = 'floorplan.png';


  function getOverlay(imgObj, maps) {

        CanvasOverlay.prototype = new google.maps.OverlayView();


        var projection;

        function CanvasOverlay(image, map) {

            // Now initialize all properties.
            this.top    = 0;
            this.left   = 0;
            this.width  = image.width;
            this.height = image.height;

            while (window && (this.width > window.innerWidth || this.height > window.innerHeight)) {
                this.width /= 2;
                this.height /= 2;
            }

            this.image_ = image;
            this.map_ = map;

            // We define a property to hold the canvas's
            // div. We'll actually create this div
            // upon receipt of the add() method so we'll
            // leave it null for now.
            this.div_ = null;
            this.canvas = null;
            this.ctx = null;
            this.angle = 0;
            this.scale = 1;

            this.latlng = map.getCenter();


            this.new_left = 0;
            this.new_top = 0;


            // Explicitly call setMap on this overlay
            this.setMap(map);

            drawTools().setMap(map);

        }

        CanvasOverlay.prototype.onAdd = function () {

            // Note: an overlay's receipt of add() indicates that
            // the map's panes are now available for attaching
            // the overlay to the map via the DOM.

            // Create the DIV and set some basic attributes.

            var div = document.createElement('div');
            div.id = "canvas_editor";
            // initialize the position of the outer div according to the center of the overlay
            // which is the center of the map


            var self = this;

            // Create a Canvas element and attach it to the DIV.
            var canvas = document.createElement('canvas');
            canvas.id = "canvas";
            div.appendChild(canvas);

            // Set the overlay's div_ property to this DIV
            this.div_ = div;
            this.canvas = canvas;
            this.ctx = canvas.getContext("2d");

            // load the floor
            this.initImage();

            // We add an overlay to a map via one of the map's panes.
            // We'll add this overlay to the overlayImage pane.
            var panes = this.getPanes();
            panes.overlayImage.appendChild(this.div_);

            return this;
        }

        CanvasOverlay.prototype.draw = function () {
            var div = this.div_;

            if (this.canvas == null) {
                alert("error creating the canvas");
            }
        }
        /*****************************
         * EDITING METHODS
         */

        CanvasOverlay.prototype.setCanvasSize = function () {
            this.ctx.canvas.width = this.width;
            this.ctx.canvas.height = this.height;

            // we need to change the width and height of the div #canvas_editor
            // which is the element being rotated by the slider
            this.div_.style.width = this.width + 'px';
            this.div_.style.height = this.height + 'px';
        }

        CanvasOverlay.prototype.initImage = function () {
            this.setCanvasSize();
            this.ctx.save();

            this.ctx.translate((this.ctx.canvas.width / 2), (this.ctx.canvas.height / 2));
            this.ctx.rotate(this.angle);

            this.ctx.drawImage(this.image_, -(this.width / 2), -(this.height / 2), this.width, this.height);
            this.ctx.restore();
        }

        var canvasOverlay = new CanvasOverlay(imgObj,maps);

        return canvasOverlay;
    };

    function drawTools() {

        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            index:9999999999,   
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
            },
            markerOptions: {
                icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
                draggable:true,
                clickable:true,
                position: google.maps.ControlPosition.TOP_CENTER
            },
            circleOptions: {
                fillColor: '#ffff00',
                clickable: true,
                editable: true,
                draggable:true,
                index:99999999,
                geodesic:true,
                position: google.maps.ControlPosition.TOP_CENTER
            },
            polygonOptions:{
                fillColor: '#9400d3',
                editable:true,
                clickable:true,
                draggable:true,
                index:99999999,
                geodesic:true,
                position: google.maps.ControlPosition.TOP_CENTER
            },
            polylineOptions:{
                fillColor: '#008000',
                editable:true,
                clickable:true,
                draggable:true,
                index:99999999,
                geodesic:true,
                position: google.maps.ControlPosition.TOP_CENTER
            },
            rectangleOptions:{
                fillColor: '#ff0000',
                editable:true,
                clickable:true,
                draggable:true,
                index:99999999,
                geodesic:true,
                position: google.maps.ControlPosition.TOP_CENTER
            }

        });

        return drawingManager;
    };
  });