Uncaught TypeError: Cannot read property 'parentNode' of null
    at USGSOverlay.onRemove (add:695)
    at Iu.ug (overlay.js:4)
    at Ku (overlay.js:1)
    at Object.qk (overlay.js:5)
    at js?key=AIzaSyAKngEjzSoLW2g7nDnxedV0Bu08o:151
    at Object._.S (js?key=AIzaSyAKngEjzSoLW2g7nDnxedV0Bu08o:64)
    at USGSOverlay._.jg.map_changed (js?key=AIzaSyAKngEjzSoLW2g7nDnxedV0Bu08o:151)
    at Qc (js?key=AIzaSyAKngEjzSoLW2g7nDnxedV0Bu08o:51)
    at USGSOverlay._.m.set (js?key=AIzaSyAKngEjzSoLW2g7nDnxedV0Bu08o:124)
    at USGSOverlay.setMap (js?key=AIzaSyAKngEjzSoLW2g7nDnxedV0Bu08o:54)

{% block map_widget %}
{% set lat = form.children.lat.vars.value %}
{% set lng = form.children.lng.vars.value %}
{% set zoom = form.children.zoom.vars.value %}

<div class="iframe-container">
    <div id="{{form.vars.id}}"></div>
</div>

{{ form_row(form.lat) }}
{{ form_row(form.lng) }}
{{ form_row(form.zoom) }}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKngEjzSoLW2g7nDnxedV0Bu08o"></script>
<script src="{{ asset('admin/js/interact.min.js') }}"></script>
<script>

    var overlay;
    var globalMap;

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

    function initMap() {
        var lat = parseFloat('{{lat}}'.replace(/,/g, '.'));
        var lng = parseFloat('{{lng}}'.replace(/,/g, '.'));
        var styles = //тут код...

        var map = new google.maps.Map(document.getElementById('{{form.vars.id}}'), {
            zoom: {{zoom}},
            center: { lat: lat, lng: lng },
            mapTypeId: 'satellite',
            styles: styles,
            markers: []
        });

        google.maps.event.addDomListener(map, 'center_changed', function() {
            $('#{{form.children.lat.vars.id}}').val(map.getCenter().lat());
            $('#{{form.children.lng.vars.id}}').val(map.getCenter().lng());
            $('#{{form.children.lat.vars.id}}').change();
            $('#{{form.children.lng.vars.id}}').change();
        });

        google.maps.event.addDomListener(map, 'zoom_changed', function() {
            $('#{{form.children.zoom.vars.id}}').val(map.getZoom());
            $('#{{form.children.zoom.vars.id}}').change();
            if(overlay){
                if(overlay.img && overlay.div_){
                    overlay.div_.style.width = 'none';
                    overlay.img.style.width = '100%';
                    overlay.img.style.height = '100%';
                }
            }
        });

        globalMap = map;

    }


/** @constructor */
function USGSOverlay(bounds, image, map, id, fixed = true, floor = null, addingLine = null) {
    // Initialize all properties.
    this.bounds_ = bounds;
    this.startZoom = {{zoom}};
    this.image_ = image;
    this.map_ = map;
    this.id_ = id;
    this.listeners = {};
    this.data = {
        lat  : '',
        lng  : '',
        zoom : '',
        width : '',
        height : ''
    };

    this.div_ = null;
    this.dragflag = false;
    this.img = null;
    this.fixed = fixed;
    this.floorId = floor;

    this.creatingPath = false;
    this.pointFrom = null;
    this.paths = new google.maps.Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1,
        strokeWeight: 3,
        map: map
        //editable: true
        //draggable: true
    });
    this.connections = [];
    this.lines = [];
    this.addingLine = addingLine;
    this.connectionData = {};
    this.connection = {};

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

    if(addingLine){
        this.creatingPath = true;
    }
}

/**
 * onAdd is called when the map's panes are ready and the overlay has
 */
USGSOverlay.prototype.onAdd = function() {

    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.opacity = 0.9;

    div.style.outline = '2px solid #000000';


    // Create the img element and attach it to the div.
    var img = document.createElement('img');
    img.src = this.image_;
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.position = 'absolute';

    div.appendChild(img);
    this.img = img;

    var me = this;

    google.maps.event.addDomListener(img, 'mouseover', function() {
        if(!me.fixed){
            me.map_.setOptions({draggable:false});
        }
    });

    google.maps.event.addDomListener(img, 'mouseout', function() {
        me.map_.setOptions({draggable:true});
    });

    interact(img).draggable({
       onmove: window.dragMoveListener
    })
    .resizable({
        preserveAspectRatio: true,
        edges: { left: true, right: true, bottom: true, top: true }
    })
    .on('dragend', function(event){

        var left = parseFloat(div.style.left, 10);
        var top = parseFloat(div.style.top, 10);

        var x = (left + parseFloat(img.dataset.x, 10));
        var y = (top + parseFloat(img.dataset.y, 10));

        div.style.left = x+'px';
        div.style.top = y+'px';
        img.style.webkitTransform = img.style.transform = 'translate(0px,0px)';
        img.dataset.x = 0;
        img.dataset.y = 0;

        me.dragflag = true;

        var rect = event.interactable.getRect();
        var point1 = new google.maps.Point(x, div.offsetHeight+y);
        var point2 = new google.maps.Point(x+div.offsetWidth, y);
        var overlayProjection = me.getProjection();

        var sw = overlayProjection.fromDivPixelToLatLng(point1);
        var ne = overlayProjection.fromDivPixelToLatLng(point2);
        me.bounds_ = new google.maps.LatLngBounds(
            new google.maps.LatLng(sw.lat(), sw.lng()),
            new google.maps.LatLng(ne.lat(), ne.lng())
        );
        var point = new google.maps.Point(x, y);
        var latlng = overlayProjection.fromDivPixelToLatLng(point);
        me.changeOverlay(latlng, img);
    })
    .on('resizemove', function (event) {
        var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

        div.style.width = target.style.width  = event.rect.width + 'px';
        div.style.height = target.style.height = event.rect.height + 'px';

        // translate when resizing from top or left edges
        x += event.deltaRect.left;
        y += event.deltaRect.top;

        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
        me.map_.setOptions({draggable:true});

        div.style.left += event.deltaRect.left + 'px';
        div.style.top += event.deltaRect.top + 'px';
        div.style.webkitTransform = div.style.transform = 'translate(' + x + 'px,' + y + 'px)';

        var overlayProjection = me.getProjection();
        var point = new google.maps.Point(x, y);
        var latlng = overlayProjection.fromDivPixelToLatLng(point);
        me.dragflag = true;
        me.changeOverlay(latlng, img);
    })
    .on('resizeend', function (event) {
        var left = parseFloat(div.style.left, 10);
        var top = parseFloat(div.style.top, 10);
        var point1 = new google.maps.Point(left, div.offsetHeight + top);
        var point2 = new google.maps.Point(left + div.offsetWidth, top);
        var overlayProjection = me.getProjection();

        var sw = overlayProjection.fromDivPixelToLatLng(point1);
        var ne = overlayProjection.fromDivPixelToLatLng(point2);

        me.bounds_ = new google.maps.LatLngBounds(
            new google.maps.LatLng(sw.lat(), sw.lng()),
            new google.maps.LatLng(ne.lat(), ne.lng())
        );

        var x = (left + parseFloat(img.dataset.x, 10));
        var y = (top + parseFloat(img.dataset.y, 10));
        var point = new google.maps.Point(x, y);
        var latlng = overlayProjection.fromDivPixelToLatLng(point);
        me.changeOverlay(latlng, img);
    });

    this.div_ = div;

    //var panes = this.getPanes();
    //panes.overlayLayer.appendChild(div);
    //panes.overlayMouseTarget.appendChild(div);

    //if(this.fixed){
    this.toogleEdit();
    //}

};

  USGSOverlay.prototype.draw = function() {

    // We use the south-west and north-east
    // coordinates of the overlay to peg it to the correct position and size.
    // To do this, we need to retrieve the projection from the overlay.
    var overlayProjection = this.getProjection();
    // Retrieve the south-west and north-east coordinates of this overlay
    // in LatLngs and convert them to pixel coordinates.
    // We'll use these coordinates to resize the div.
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    // Resize the image's div to fit the indicated dimensions.
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';

    //var overlayProjection = this.getProjection();

    var point = new google.maps.Point(sw.x, ne.y);
    var latlng = overlayProjection.fromDivPixelToLatLng(point);
    this.onAdded(latlng, this.img);

    //this.changeOverlay(this.bounds_.getCenter(), this.img);
  };

  USGSOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  };

USGSOverlay.prototype.listeners = null;
USGSOverlay.prototype.addEventListener = function(type, callback) {
    if (!(type in this.listeners)) {
        this.listeners[type] = [];
    }
    this.listeners[type].push(callback);
};

USGSOverlay.prototype.removeEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    return;
  }
  var stack = this.listeners[type];
  for (var i = 0, l = stack.length; i < l; i++) {
    if (stack[i] === callback){
      stack.splice(i, 1);
      return;
    }
  }
};

USGSOverlay.prototype.dispatchEvent = function(event) {
    if (!(event.type in this.listeners)) {
        return true;
    }
    var stack = this.listeners[event.type];
    event.target = this;
    for (var i = 0, l = stack.length; i < l; i++) {
        stack[i].call(this, event);
    }
    return !event.defaultPrevented;
};

USGSOverlay.prototype.changeOverlay = function(latlng, img){

    this.data.lat = latlng.lat();
    this.data.lng = latlng.lng();
    this.data.zoom = this.map_.getZoom();

    if(img.width == 0){
        this.data.width = img.naturalWidth;
    }else{
        this.data.width = img.width;
    }

    if(img.height == 0){
        this.data.height = img.naturalHeight;
    }else{
        this.data.height = img.height;
    }

    var event = new Event('changed');
    this.dispatchEvent(event);
};

USGSOverlay.prototype.onAdded = function(latlng, img) {
    this.data.lat = latlng.lat();
    this.data.lng = latlng.lng();
    this.data.zoom = this.map_.getZoom();

    if(img.width == 0){
        this.data.width = img.naturalWidth;
    }else{
        this.data.width = img.width;
    }

    if(img.height == 0){
        this.data.height = img.naturalHeight;
    }else{
        this.data.height = img.height;
    }

    var event = new Event('added');
    this.dispatchEvent(event);
};

USGSOverlay.prototype.drawConnections = function(points){

    for (var i = 0; i < points.length; i++) {
        var point = points[i];
        this.createMarker(point[0], parseFloat(point[1]), parseFloat(point[2]), point.connections, point.icon);
    }

    return null;
};

USGSOverlay.prototype.createMarker = function(id, lat, lng, connections = null, image = null){
    var icon = null;
    if(image){
        icon = {
            url: image.url,
            size: new google.maps.Size(30, 30),
            scaledSize: new google.maps.Size(30, 30),
            anchor: new google.maps.Point(15, 30)
        };
    }else{
        icon = {
            url: "{{asset('admin/img/point_path.svg')}}",
            size: new google.maps.Size(20, 20),
            scaledSize: new google.maps.Size(20, 20),
            anchor: new google.maps.Point(10, 10)
        };
    }
    var marker = new google.maps.Marker({
        position: {lat: lat, lng: lng},
        icon: icon,
        map: this.map_,
        draggable: true,
        opacity: 1,
        id: id,
        connections: connections
    });

    if(connections){
        for(var i = 0; i < connections.length; i++){
            var exists = false;
            for(var j = 0; j < this.connections.length; j++) {
                if (this.connections[j].id == connections[i].id) {
                    exists = true;
                    break;
                }
            }

            if(!exists){
                this.connections.push(connections[i]);

                var latlng1 = new google.maps.LatLng({lat: parseFloat(connections[i].from_lat), lng: parseFloat(connections[i].from_lng) });
                var latlng2 = new google.maps.LatLng({lat: parseFloat(connections[i].to_lat), lng: parseFloat(connections[i].to_lng)});

                var line = createLine(this.map_, latlng1, latlng2, connections[i].from_id, connections[i].to_id, connections[i].id);
                this.lines.push(line);
            }
        }
    }

    var me = this;
    marker.addListener('click', function(event){
        var currentId = this.get('id');
        currentPointId = currentId;

        if(me.creatingPath){

            me.pointFrom.setOptions({
                draggable: true,
                opacity: 1
            });

            var pointTo = me.map_.getMarker(currentId);
            var distance = parseInt(google.maps.geometry.spherical.computeDistanceBetween( me.pointFrom.getPosition(), pointTo.getPosition() ));

            me.connectionData = {
                fromId: me.pointFrom.get("id"),
                toId: currentId,
                distance: distance
            };
            $("#connection-distance").val(distance);
            $("#connection-create-btn").data('edit', 0);
            $("#connection-modal").modal('show');
        }else{
            $.ajax({
                url: '{{ path('admin_points_edit') }}/'+currentId,
                type: 'GET',
                dataType: 'html',
                data: { id: currentId },
                success:function(data){
                    $("#point-modal").modal('show');
                    var $data = $($.parseHTML(data));
                    $data.find("#appbundle_point_floor").val(me.floorId);
                    if($data.find("#appbundle_point_code").val()){
                        $data.find("#appbundle_point_code_container").show();
                        $data.find("#appbundle_point_code_buttons").css('display', 'inline-block');
                    }
                    $("#point-modal .modal-body").html($data);

                    $("#point-create-btn").hide();
                    $("#point-edit-btn").show();
                    $("#point-remove-btn").show();
                    $("#point-modal").modal('show');
                }
            });
        }
    });


    marker.addListener('drag', function(event){
        var data = {
            id: this.get('id'),
            lat: this.position.lat(),
            lng: this.position.lng()
        };

        for(var i = 0; i < me.lines.length; i++){
            if(data.id == me.lines[i].from){
                var latlng = new google.maps.LatLng({lat: data.lat, lng: data.lng});
                var paths = me.lines[i].getPath();
                paths.setAt(0, latlng);
            }
            if(data.id == me.lines[i].to){
                var latlng = new google.maps.LatLng({lat: data.lat, lng: data.lng});
                var paths = me.lines[i].getPath();
                paths.setAt(1, latlng);
            }
        }

    });

    marker.addListener('dragend', function(event){
        var data = {
            id: this.get('id'),
            lat: this.position.lat(),
            lng: this.position.lng(),
        };

        $.ajax({
            url: '{{ path('admin_points_change_position') }}',
            type: 'POST',
            dataType: 'json',
            data: data,
            success:function(data){
                if(data !== 'ok'){
                    alert("error");
                }
            }
        });

    });

    this.map_.markers.push(marker);
    this.map_.setOptions({draggable:true});
};


USGSOverlay.prototype.updateMarker = function(id, lat, lng, connections = null, image = null){
    var icon = null;
    if(image){
        icon = {
            url: image.url,
            size: new google.maps.Size(30, 30),
            scaledSize: new google.maps.Size(30, 30),
            anchor: new google.maps.Point(15, 30)
        };
    }else{
        icon = {
            url: "{{asset('admin/img/point_path.svg')}}",
            size: new google.maps.Size(20, 20),
            scaledSize: new google.maps.Size(20, 20),
            anchor: new google.maps.Point(10, 10)
        };
    }
    var marker = this.map_.getMarker(id);
    marker.setIcon(icon);
};

USGSOverlay.prototype.createPath = function(point){

    var marker = this.map_.getMarker(point);
    marker.setOptions({
        draggable: false,
        opacity: 0.8
    });

    this.creatingPath = true;
    this.pointFrom = marker;

    this.addingLine = createLine(this.map_, this.pointFrom.position, this.pointFrom.position, marker.id);
    google.maps.event.addListener(this.map_, 'mousemove', pathCreatorListener);

};

function pathCreatorListener(event){
    overlay.pathListener(event);
}

USGSOverlay.prototype.pathListener = function(event){
    var paths = this.addingLine.getPath();
    paths.setAt(1, event.latLng);
};


USGSOverlay.prototype.toogleEdit = function() {
    var img = this.div_.getElementsByTagName('img')[0];
    var panes = this.getPanes();

    if(this.fixed){
        panes.overlayLayer.appendChild(this.div_);
        //this.div_.style.borderStyle = 'none';
        //this.div_.style.borderWidth = '0px';
        this.div_.style.outline = '0px solid #000000';
        this.fixed = true;
        interact(img).draggable(false);
    }else{
        panes.overlayMouseTarget.appendChild(this.div_);
        //this.div_.style.borderStyle = 'solid';
        //this.div_.style.borderWidth = '1px';
        this.div_.style.outline = '2px solid #000000';
        this.fixed = false;
        interact(img).draggable(true);
    }
}

USGSOverlay.prototype.removePoint = function(id) {
    var marker = this.map_.getMarker(id);

    if(marker.connections){

        for(var i = 0; i < marker.connections.length; i++){
            for(var j = 0; j < this.connections.length; j++) {
                if (this.connections[j].id == marker.connections[i].id) {
                    var connectionToRemove = this.connections[j];
                    this.connections.splice(j, 1);
                    for(var k = 0; k < this.lines.length; k++){
                        //var line = this.lines[k];
                        if(this.lines[k].id == connectionToRemove.id){
                            this.lines[k].setMap(null);
                            this.lines.splice(k, 1);
                        }
                    }

                }
            }
        }

    }

    marker.setMap(null);
};

USGSOverlay.prototype.createConnection = function(data) {
    if(this.pointFrom){
        var pointFrom = this.pointFrom;
    }else{
        var pointFrom = this.map_.getMarker(data.fromId);
    }
    var pointTo = this.map_.getMarker(data.toId);
    var me = this;
    $.ajax({
        url: '{{path('admin_points_connect')}}',
        type: 'POST',
        dataType: 'json',
        data: {
            pointA: data.fromId,
            pointB: data.toId,
            distance: data.distance
        },
        success:function(id){

            var line = createLine(me.map_, pointFrom.getPosition(), pointTo.getPosition(), data.fromId, data.toId, id);
            me.lines.push(line);
            if(!pointFrom.connections){
                pointFrom.connections = []
            }
            if(!pointTo.connections){
                pointTo.connections = []
            }

            pointFrom.connections.push({
                distance: data.distance,
                from_id: data.fromId,
                from_lat: pointFrom.getPosition().lat(),
                from_lng: pointFrom.getPosition().lng(),
                id: id,
                to_id: data.toId,
                to_lat: pointTo.getPosition().lat(),
                to_lng: pointTo.getPosition().lng()
            });

            pointTo.connections.push({
                distance: data.distance,
                from_id: data.fromId,
                from_lat: pointFrom.getPosition().lat(),
                from_lng: pointFrom.getPosition().lng(),
                id: id,
                to_id: data.toId,
                to_lat: pointTo.getPosition().lat(),
                to_lng:pointTo.getPosition().lng()
            });

            google.maps.event.clearListeners(me.map_, 'mousemove');
            me.pointFrom = null;
            me.addingLine.setMap(null);
            me.addingLine = null;
            me.creatingPath = false;

            me.connections.push({
                distance: data.distance,
                from_id: data.fromId,
                from_lat: pointFrom.getPosition().lat(),
                from_lng: pointFrom.getPosition().lng(),
                id: id,
                to_id: data.toId,
                to_lat: pointTo.getPosition().lat(),
                to_lng: pointTo.getPosition().lng()
            });
        }
    });
};

USGSOverlay.prototype.updateConnection = function(data) {
    var me = this;
    var distance = data.distance;
    $.ajax({
        url: '{{path('admin_points_connect_update')}}',
        type: 'POST',
        dataType: 'json',
        data: data,
        success:function(id){
            for(var i = 0; i < me.connections.length; i++) {
                if (me.connections[i].id == id) {
                    me.connections[i].distance = distance;
                }
            }
        }
    });
};

USGSOverlay.prototype.removeConnection = function(data) {
    var me = this;
    var id = data.id;
    $.ajax({
        url: '{{path('admin_points_connect_remove')}}',
        type: 'POST',
        dataType: 'json',
        data: data,
        success:function(response){

            for(var i = 0; i < me.connections.length; i++) {
                if (me.connections[i].id == id) {

                    me.connections.splice(i, 1);
                    for(var j = 0; j < me.lines.length; j++){
                        if(me.lines[j].id == id){
                            me.lines[j].setMap(null);
                            me.lines.splice(j, 1);
                        }
                    }

                }
            }

        }
    });

};

USGSOverlay.prototype.cancelCreateConnection = function() {
    google.maps.event.clearListeners(this.map_, 'mousemove');
    this.pointFrom = null;
    if(this.addingLine){
        this.addingLine.setMap(null);
        this.addingLine = null;
    }
    this.creatingPath = false;
};

USGSOverlay.prototype.clearConnections = function() {
    for(var i = 0; i < this.lines.length; i++){
        this.lines[i].setMap(null);
    }
    this.lines = [];
    this.connections = [];
};

function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
}
window.dragMoveListener = dragMoveListener;
google.maps.event.addDomListener(window, 'load', initMap);

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

google.maps.Map.prototype.getMarker = function(id) {
    for(var i=0; i < this.markers.length; i++){
        if(this.markers[i].id == id){
            return this.markers[i];
        }
        //this.markers[i].setMap(null);
    }
    return null;
};

function createLine(map, latlng1, latlng2, from_id, to_id, id) {

    var line = new google.maps.Polyline({
        strokeColor: '#000000',
        strokeOpacity: 1,
        strokeWeight: 3,
        path: [latlng1, latlng2]
    });

    line.from = from_id;
    line.to = to_id;
    line.id = id;

    google.maps.event.addListener(line, 'click', function(h) {
        $("#connection-create-btn").data('edit', 1);
        $("#connection-create-btn").data('connection', id);
        $("#connection-remove-btn").show();

        for (var i = 0; i < overlay.connections.length; i++) {
            if (overlay.connections[i].id == id){
                $("#connection-distance").val(overlay.connections[i].distance);
                break;
            }
        }
        $("#connection-modal").modal('show');
    });

    line.setMap(map);

    return line;
}

</script>