JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Быстрый старт. Размещение интерактивной карты на странице</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.75, 37.57],
zoom: 10,
controls: ['zoomControl', 'fullscreenControl']
});
// Создаем многоугольник, используя вспомогательный класс Polygon.
var myPolygon1 = new ymaps.Polygon([
// Указываем координаты вершин многоугольника.
// Координаты вершин внешнего контура.
[
[55.75, 37.50],
[55.80, 37.60],
[55.75, 37.70],
[55.70, 37.70],
[55.70, 37.55]
]
], {
// Описываем свойства геообъекта.
// Содержимое балуна.
hintContent: "Приблизьте объект и кликните",
balloonContent: '<p> Кто <br> <a href="http://maps.yandex.ru/" target="_blank">нажмите тут</a> </p>'
}, {
// Задаем опции геообъекта.
// Цвет заливки.
fillColor: '#FF000088',
// Цвет и прозрачность границ.
strokeColor: '#FF0000',
// Ширина обводки.
strokeWidth: 10
});
// Добавляем многоугольник на карту.
myMap.geoObjects.add(myPolygon1);
// Создаем многоугольник, используя вспомогательный класс Polygon.
var myPolygon2 = new ymaps.Polygon([
// Указываем координаты вершин многоугольника.
// Координаты вершин внешнего контура.
[
[55.85, 37.50],
[55.90, 37.70],
[55.95, 37.55]
]
], {
// Описываем свойства геообъекта.
// Содержимое балуна.
hintContent: "Приблизьте объект и кликните",
balloonContent: '<p> Кто <em>поднимается</em> в гору? <br>...