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)
API-key рабочий, не понимаю, где я про*бался. Были ли похожие ошибки? Кто сможет помочь решить проблему.
Я пытался сделать страницу добавления торгового центра, в котором выводилась карта(в iframe'e) и можно было добавить этаж( мини-формачка, где указывается номер этажа, загрузка картинки схемы этажа). Как только я перехожу на страницу добавления торгового центра, карта не отображается, а выдает эту ошибку.
{% 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>
Эта строчка возвращает null, потому что у this.div_ нет родителя
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
USGSOverlay.prototype.onRemove = function() {
if(this.div_.parentNode) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
Не помогло. Забыл отметить важный момент. Карта в начале не отображается (висит серым пятном), но как только сработает ошибка, карта отрисовывается
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
День добрыйПодскажите, как сделать, чтобы пользователь переходя на определенную страницу получал сообщение,а переходя на все последующие...
Возникла необходимость встроить редактор в проект на yii2
Вот понадобилось разработать проект на js uwp, и вот мне непонятно, как работают функции по типу WindowsStorage