JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map" style="width: 512px; height: 150px;"></div>
<input type="button" id="destroyButton" value="Удалить карту"/>
CSS
#map {
width: 800px;
height: 300px;
}
JavaScript
var myMap;
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
function init () {
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id ("map").
map = new ymaps.Map('map', {
// При инициализации карты обязательно нужно указать
// её центр и коэффициент масштабирования.
center: [55.65, 37.57], // Москва
zoom: 10
});
var placemark = new ymaps.Placemark([55.650625, 37.62708],
{
hintContent: "hintContent",
balloonContent:"balloonContent"
},
{
draggable: false,
hintOptions: { showTimeout: 500 },
hasBalloon: false,
iconImageOffset: [-35, -40],
iconImageSize: [81, 84]
}
);
map.geoObjects.add(placemark);
placemark.events.add('click', function (e) {
var contentt2 = '<div class="baloonContent"><img src="http://cs319722.vk.me/v319722852/dba/7wdM923tw3s.jpg" alt="Сколковское шоссе"><h6 class="adrTitle">Адрес:</h6>Сколковское шоссе 20 стр.9<br><br><br><strong>Телефон:</strong><br>+7 495 0101010 доб.4200<br><a href="http://idaprikol.ru/f">Подробно</a></div>';
map.balloon.open([55.650625, 37.62708], { content: contentt2 }, { autoPan: true, closeButton: true, offset: [+10, -17] });
}); //end event add click
document.getElementById('destroyButton').onclick = function () {
// Для уничтожения используется метод destroy.
myMap.destroy();
};
}