Подскажите, почему в этом коде карты выдают ошибку: Uncaught TypeError: Cannot read property 'setPosition' of null
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [59.951671, 30.330581],
zoom: 10
}, {
searchControlProvider: 'yandex#search'
}),
// Создание макета балуна на основе Twitter Bootstrap.
MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
'<div class="popover top">' +
'<a class="close" href="#">×</a>' +
'<div class="arrow"></div>' +
'<div class="popover-inner">' +
'$[[options.contentLayout observeSize minWidth=235 maxWidth=235 maxHeight=350]]' +
'</div>' +
'</div>', {
/**
* Строит экземпляр макета на основе шаблона и добавляет его в родительский HTML-элемент.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#build
* @function
* @name build
*/
build: function () {
this.constructor.superclass.build.call(this);
this._$element = $('.popover', this.getParentElement());
this.applyElementOffset();
this._$element.find('.close')
.on('click', $.proxy(this.onCloseClick, this));
},
/**
* Удаляет содержимое макета из DOM.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#clear
* @function
* @name clear
*/
clear: function () {
this._$element.find('.close')
.off('click');
this.constructor.superclass.clear.call(this);
},
/**
* Метод будет вызван системой шаблонов АПИ при изменении размеров вложенного макета.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
* @function
* @name onSublayoutSizeChange
*/
onSublayoutSizeChange: function () {
MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);
if(!this._isElement(this._$element)) {
return;
}
this.applyElementOffset();
this.events.fire('shapechange');
},
/**
* Сдвигаем балун, чтобы "хвостик" указывал на точку привязки.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
* @function
* @name applyElementOffset
*/
applyElementOffset: function () {
this._$element.css({
left: -(this._$element[0].offsetWidth / 2),
top: -(this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight)
});
},
/**
* Закрывает балун при клике на крестик, кидая событие "userclose" на макете.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
* @function
* @name onCloseClick
*/
onCloseClick: function (e) {
e.preventDefault();
this.events.fire('userclose');
},
/**
* Используется для автопозиционирования (balloonAutoPan).
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ILayout.xml#getClientBounds
* @function
* @name getClientBounds
* @returns {Number[][]} Координаты левого верхнего и правого нижнего углов шаблона относительно точки привязки.
*/
getShape: function () {
if(!this._isElement(this._$element)) {
return MyBalloonLayout.superclass.getShape.call(this);
}
var position = this._$element.position();
return new ymaps.shape.Rectangle(new ymaps.geometry.pixel.Rectangle([
[position.left, position.top], [
position.left + this._$element[0].offsetWidth,
position.top + this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight
]
]));
},
/**
* Проверяем наличие элемента (в ИЕ и Опере его еще может не быть).
* @function
* @private
* @name _isElement
* @param {jQuery} [element] Элемент.
* @returns {Boolean} Флаг наличия.
*/
_isElement: function (element) {
return element && element[0] && element.find('.arrow')[0];
}
});
BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
'<div style="margin: 10px;">11111</div>');
// Создаем многоугольник, используя класс GeoObject.
var myGeoObject = new ymaps.GeoObject({
// Описываем геометрию геообъекта.
geometry: {
// Тип геометрии - "Многоугольник".
type: "Polygon",
// Указываем координаты вершин многоугольника.
coordinates: [
// Координаты вершин внешнего контура.
[
[ 59.98050787316514 ,30.276271287380787],
[59.981411135142736,30.28348106521282 ],
[59.981626193875776,30.287600938259637],
[59.98188426251403 ,30.291720811306554],
[59.98188426251403 ,30.297213975369072],
[59.981196075016896,30.303393784939374],
[59.97981965695854 ,30.31197685378703 ],
[59.97878730573293 ,30.31747001784952 ],
[59.97689457792983 ,30.32364982741985 ],
[59.97448549461692 ,30.327426377712822],
[59.97173204119555 ,30.33017295974407 ],
[59.969150469982154,30.332232896267502],
[59.96605231800164 ,30.334292832790936],
[59.964374030930564,30.334807816921803],
[59.962609585874226,30.33497947829875 ],
[59.959166494762414,30.335322801052666],
[59.95606740577672 ,30.336524430691316],
[59.954259469567496,30.33798355239539 ],
[59.95210703552669 ,30.33017295974407 ],
[59.95098771437923 ,30.324593964993053],
[59.94969614286743 ,30.321246568142495],
[59.94780174662443 ,30.31747001784952 ],
[59.94780174662443 ,30.31300682204876 ],
[59.94676839379639 ,30.309573594509676],
[59.94422793069265 ,30.307341996609296],
[59.941428889282946,30.306827012478433],
[59.94022307529868 ,30.301677171169832],
[59.937983589740675,30.29481071609172 ],
[59.93712220873366 ,30.290347520290933],
[59.93626080527731 ,30.286227647244065],
[59.93501173038011 ,30.280820313870045],
[59.933331865599165,30.27764457839641 ],
[59.93057497940691 ,30.272838059841728],
[59.92816251538927 ,30.27009147781046 ],
[59.92488817551137 ,30.267344895779214],
[59.92187204927931 ,30.26597160476359 ],
[59.91971750499295 ,30.264598313747967],
[59.91868327387625 ,30.26082176345499 ],
[59.91868327386725 ,30.258332673489193],
[59.91902802117505 ,30.25567192214642 ],
[59.92001914963477 ,30.251981202541867],
[59.92161351138359 ,30.24743217605266 ],
[59.922302941304906,30.241939011990166],
[59.924026453231384,30.23816246169719 ],
[59.92523285813594 ,30.234385911404217],
[59.926094548979066,30.23129600661905 ],
[59.92816251538927 ,30.227176133572183],
[59.928679486783494,30.222026292263585],
[59.929541087802285,30.21807808059364 ],
[59.93117806789334 ,30.21395820754677 ],
[59.932125756161206,30.21138328689247 ],
[59.93464561326022 ,30.2106537260404],
[59.93750983293789 ,30.20992416518835 ],
[59.94028767356927 ,30.207048837124447],
[59.9436250802578 ,30.204001847683518],
[59.947812510508044,30.203658524929523],
[59.95055719613177 ,30.204774323879725],
[59.95322631871933 ,30.206920091091686],
[59.95580913521645 ,30.20820755141876 ],
[59.95843479162023 ,30.210439149319214],
[59.96123239250762 ,30.21378654616985 ],
[59.963212089909675,30.21618980544715 ],
[59.96656869684799 ,30.21618980544715 ],
[59.96966680036843 ,30.21515983718547 ],
[59.972011699266595,30.21361488479285 ],
[59.97392621796379 ,30.213185731350436],
[59.97588364471797 ,30.213700715481327],
[59.977840955392935,30.21593231338173 ],
[59.979475543472134,30.22099632400188 ],
[59.98050787316514 ,30.229579392849537],
[59.98085197588536 ,30.236102525173756],
[59.981196075016896,30.24228233474406 ],
[59.9817982398529 ,30.24743217605266 ],
[59.98205630713642 ,30.252925340115123],
[59.982400393716816,30.258418504177666],
[59.98222835087971 ,30.263225022732346],
[59.98188426250503 ,30.26734489577919 ],
[59.98119607500791 ,30.272494737087786],
[59.98050787316514 ,30.276271287380787],
],
[]
],
// Задаем правило заливки внутренних контуров по алгоритму "nonZero".
fillRule: "nonZero"
},
// Описываем свойства геообъекта.
properties:{
// Содержимое балуна.
//balloonContent: "Доставка - 550 руб123",
}
}, {
// Описываем опции геообъекта.
// Описываем опции геообъекта.
// Цвет заливки.
fillColor: '#2B345A',
// Цвет обводки.
strokeColor: '#D6EBFF',
// Общая прозрачность (как для заливки, так и для обводки).
opacity: 0.3,
// Ширина обводки.
strokeWidth: 1,
balloonLayout: MyBalloonLayout,
balloonContentLayout: BalloonContentLayout,
});
// Добавляем многоугольник на карту.
myMap.geoObjects.add(myGeoObject);
myPlacemark = new ymaps.Placemark([59.941840, 30.434473], {
hintContent: 'Мы находимся тут',
}, {
iconColor: '#FD7669'
});
myMap.geoObjects.add(myPlacemark);
}
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap");
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Montserrat';
min-width: 320px;
overflow-x: hidden;
position: relative;
margin: 0;
}
.clear{
clear: both;
}
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
a {
display: inline-block;
text-decoration: none;
color: #fff;
}
a:hover, a:focus, a:active {
text-decoration: none;
color: #fff;
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
line-height: normal;
}
ul {
margin: 0;
padding: 0;
}
input,
button,
textarea,
select {
outline: none;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 1200px;
margin: auto;
}
.btn {
background-color: #FD7669;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 13px 30px;
line-height: 1;
font-size: 16px;
font-weight: 700;
-webkit-transition: .12s;
transition: .12s;
border: 0px;
color: #fff !important;
font-family: 'Montserrat';
cursor: pointer;
}
.btn:hover {
-webkit-box-shadow: 0px 2px 2px #D9D9D9;
box-shadow: 0px 2px 2px #D9D9D9;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
}
.s-title {
font-size: 30px;
font-weight: 700;
line-height: 1.1;
margin-bottom: 30px;
text-align: center;
}
/
/* Contacts section */
.contacts {
padding-top: 40px;
padding-bottom: 80px;
}
.contacts-box {
width: 365px;
height: 101%;
background-color: #fff;
padding: 25px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
display: inline-block;
position: absolute;
left: -3px;
top: -2px;
}
.contacts-text {
font-size: 16px;
font-weight: 500;
color: #666;
line-height: 1.6;
margin-bottom: 30px;
}
.contacts-link {
font-size: 16px;
font-weight: 500;
color: #666;
margin-bottom: 30px;
}
.contacts-link a {
color: #FD7669;
font-weight: 700;
}
.contacts-link a:hover, .contacts-link a:focus, .contacts-link a:active {
color: #FD7669;
}
.contacts-wrapper {
-webkit-box-shadow: 0 0 12px #C4C4C4;
box-shadow: 0 0 12px #C4C4C4;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
background-color: #fff;
height: 375px;
overflow: hidden;
}
.contacts-btn {
border: 1px solid #2B345A;
-webkit-border-radius: 8px;
border-radius: 8px;
padding: 12px 30px;
font-size: 18px;
font-weight: 700;
line-height: 1;
color: #2B345A;
margin-top: 20px;
-webkit-transition: .12s;
transition: .12s;
}
.contacts-btn:hover {
background-color: rgba(214, 235, 255, 0.5);
color: #2B345A;
}
.contacts-btn:focus, .contacts-btn:active {
background-color: #D6EBFF;
color: #2B345A;
}
.contacts-btn-wrapper {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Доставка</title>
<link rel="stylesheet" href="main.css">
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=619a9b44-535b-45be-aa39-887620068816" type="text/javascript"></script>
<script src="js_2.js" type="text/javascript"></script>
<style>
#map{
height: 385px;
width: calc(100% - 365px);
position: absolute;
right: 0;
top: 0;
}
.my-hint{
background: #FFFFFF;
border-radius: 4px;
width: 193px;
height: 40px;
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 18px;
}
</style>
</head>
<body>
<div class="contacts">
<div class="container contacts-container">
<div class="contacts-title s-title">Контакты</div>
<div class="contacts-wrapper">
<div id="map"></div>
</div>
</div>
</div>
</body>
</html>