Как избавиться от ошибки в Google Maps?

Question

[Сергей]

Добрый день. Не знаю с какого момент то отключились гугл карты с ошибкой: При загрузке Google Карт на этой странице возникла проблема. Подробности вы найдете в консоли JavaScript.

Куда нужна добавить ключ гугла в этом JS?:

// Code goes here

var marker;
var map;

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

function CustomMarker(opts) {
  this.setValues(opts);
}

CustomMarker.prototype.draw = function() {
  var self = this;
  var div = this.div;
  if (!div) {
    div = this.div = $('' +
      '<div class="marker">' +
      '<div class="shadow"></div>' +
      '<div class="pulse"></div>' +
      '<div class="pin-wrap">' +
      '<div class="pin"></div>' +
      '</div>' +
      '</div>' +
      '')[0];
    this.pinWrap = this.div.getElementsByClassName('pin-wrap');
    this.pin = this.div.getElementsByClassName('pin');
    this.pinShadow = this.div.getElementsByClassName('shadow');
    div.style.position = 'absolute';
    div.style.cursor = 'pointer';
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
    google.maps.event.addDomListener(div, "click", function(event) {
      google.maps.event.trigger(self, "click", event);
    });
  }

  div.classList.remove('marker-drop');
  setTimeout(function() {
    div.classList.add('marker-drop');
  }, 100)

  var point = this.getProjection().fromLatLngToDivPixel(this.position);
  if (point) {
    div.style.left = point.x + 'px';
    div.style.top = point.y + 'px';
  }
};

CustomMarker.prototype.animateDrop = function() {
  dynamics.stop(this.pinWrap);
  dynamics.css(this.pinWrap, {
    'transform': 'scaleY(2) translateY(-' + $('#map').outerHeight() + 'px)',
    'opacity': '1',
  });
  dynamics.animate(this.pinWrap, {
    translateY: 0,
    scaleY: 1.0,
  }, {
    type: dynamics.gravity,
    duration: 1800,
  });

  dynamics.stop(this.pin);
  dynamics.css(this.pin, {
    'transform': 'none',
  });
  dynamics.animate(this.pin, {
    scaleY: 0.8
  }, {
    type: dynamics.bounce,
    duration: 1800,
    bounciness: 600,
  })

  dynamics.stop(this.pinShadow);
  dynamics.css(this.pinShadow, {
    'transform': 'scale(0,0)',
  });
  dynamics.animate(this.pinShadow, {
    scale: 1,
  }, {
    type: dynamics.gravity,
    duration: 1800,
  });
}

CustomMarker.prototype.animateBounce = function() {
  dynamics.stop(this.pinWrap);
  dynamics.css(this.pinWrap, {
    'transform': 'none',
  });
  dynamics.animate(this.pinWrap, {
    translateY: -30
  }, {
    type: dynamics.forceWithGravity,
    bounciness: 0,
    duration: 500,
    delay: 150,
  });

  dynamics.stop(this.pin);
  dynamics.css(this.pin, {
    'transform': 'none',
  });
  dynamics.animate(this.pin, {
    scaleY: 0.8
  }, {
    type: dynamics.bounce,
    duration: 800,
    bounciness: 0,
  });
  dynamics.animate(this.pin, {
    scaleY: 0.8
  }, {
    type: dynamics.bounce,
    duration: 800,
    bounciness: 600,
    delay: 650,
  });

  dynamics.stop(this.pinShadow);
  dynamics.css(this.pinShadow, {
    'transform': 'none',
  });
  dynamics.animate(this.pinShadow, {
    scale: 0.6,
  }, {
    type: dynamics.forceWithGravity,
    bounciness: 0,
    duration: 500,
    delay: 150,
  });
}

CustomMarker.prototype.animateWobble = function() {
  dynamics.stop(this.pinWrap);
  dynamics.css(this.pinWrap, {
    'transform': 'none',
  });
  dynamics.animate(this.pinWrap, {
    rotateZ: -45,
  }, {
    type: dynamics.bounce,
    duration: 1800,
  });

  dynamics.stop(this.pin);
  dynamics.css(this.pin, {
    'transform': 'none',
  });
  dynamics.animate(this.pin, {
    scaleX: 0.8
  }, {
    type: dynamics.bounce,
    duration: 800,
    bounciness: 1800,
  });
}

$(document).on('click', '.link', function() {
  var $this = $(this);
  $this.addClass('current').siblings().removeClass('current');

  var pos = $this.data('position');
  changeMarkerPos(pos);
});

function initialize() {
  var styles = [{
    stylers: [{
      saturation: 0
    }]
  }];

  var styledMap = new google.maps.StyledMapType(styles, {
    name: "Styled Map"
  });

  var mapProp = {
    center: new google.maps.LatLng(55.720932, 37.600693),
    zoom: 17,
    panControl: false,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: true,
    streetViewControl: false,
    overviewMapControl: false,
    rotateControl: true,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);

  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style')

  marker = new CustomMarker({
    position: new google.maps.LatLng(55.720932, 37.600693)
  });

  google.maps.event.addListener(marker, 'click', function(e) {
    marker.animateWobble();
  });
  $('#drop').on('click', function(e) {
    marker.animateDrop();
  });

  $('#wobble').on('click', function(e) {
    marker.animateWobble();
  });

  $('#bounce').on('click', function(e) {
    marker.animateBounce();
  })
  marker.setMap(map);
  map.panTo(marker.position);
}

function changeMarkerPos(pos) {
  var myLatLng = new google.maps.LatLng(pos[0], pos[1]);
  marker.position = myLatLng;

  map.panTo(myLatLng);
}

$(function() {
  $("#toggler").on("click", function() {
    $(".popup-credit").show();
  })

})

google.maps.event.addDomListener(window, 'load', initialize);

//Отображение контактов

var it_last;
function toggle(it) { 
    if ((it_last)&&(it!=it_last)) {// скрытие предыдущего
        it_last.style.display = "none"; 
    }

    it.style.display= (it.style.display=="none") ? "block" : "none";  

    it_last = it; 
} 

//Выпадающий список

$(document).ready(function(){                                                  
    $('.view-source .spisok').hide();
    $('.view-source a').on('click', function() {
      $('.view-source .spisok').slideUp(500);
      $(this).parent().find('.spisok').slideDown(500);
    });
});

Comments

[furrya_black]

Сломались, потому что ключик сдох

Answer 1

[tyzberd]

Ключ добавляется при подключении api

<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap&&language=RU"
        async defer></script>