[html]  <style>
    #map {
      position: relative;
      background: url('https://upforme.ru/uploads/001c/0e/35/2/354913.jpg');
      width: 848px;
      height: 832px;
    margin: 0 auto;}
    .pin {
      position: absolute;
      cursor: pointer;
      color: #3e3e3e;
    }
    .pin:hover .tooltip {
      display: block;
    }
    .tooltip {
  display: none;
  position: absolute;
  bottom: 20px;
  left: -110px;
  width: 320px;
  padding: 10px;
  background-color: #d9d9d9;
  border: 1px solid #808080;
  box-shadow: 0 2px 5px rgba(162, 162, 162, 0.3);
  z-index: 10;
  color: #212c31;
  text-align: center;
  font-size: 11px;
  font-family: jost;
cursor: auto;   }

#mapanbutton {
  display: block;
  width: max-content;
  background: #2d2d2d;
  font-family: jost;
  padding: 0 10px;
  border-radius: 3px 3px 0px 0px;
  margin: 0 0 0px 776px;
  color: #bfbfbf;
  letter-spacing: 1px;
  cursor: pointer;
}

#mapan {
  text-align: center;
  position: absolute;
  z-index: 100;
  margin-left: 51px;
  display: none;
}

  </style>

<div id="mapanbutton">карта аномалий</div>
<div id="mapan"><img src="https://forumstatic.ru//uploads/001c/0e/35/2/595733.jpg"></div>

<script>
  document.getElementById("mapanbutton").addEventListener("click", function() {
    var mapan = document.getElementById("mapan");
    var mapanButton = document.getElementById("mapanbutton");

    // Переключаем видимость #mapan
    if (mapan.style.display === "none" || mapan.style.display === "") {
      mapan.style.display = "block";
    } else {
      mapan.style.display = "none";
    }

    // Переключаем цвет кнопки
    if (mapanButton.style.color === "red") {
      mapanButton.style.color = ""; // Возвращаем к исходному цвету (или можно задать конкретный цвет)
    } else {
      mapanButton.style.color = "red";
    }
  });
</script>

<div id="map"></div>

  <script>
    // Данные о локациях
    var locations = [
      {
        name: "Международный аэропорт",
        description: "Международный аэропорт — огромный комплекс с современными терминалами, широкими взлетно-посадочными полосами и многочисленными службами обслуживания пассажиров. Здесь постоянно царит движение: самолеты прибывают и отправляются в разные уголки мира, люди спешат на свои рейсы или встречают друзей и родных. Вокруг аэропорта развитая инфраструктура — гостиницы, рестораны, магазины.",
        x: 134,
        y: 488,
        icon: "flight_takeoff" // Иконка Material Icons
      },
  {
              name: "Полицейский участок",
        description: "Полицейский участок Таскджи & Лейквуд & Вудвилл находится в спокойном районе, окружённом небольшими домами и зелёными парками. Небольшое здание, построенное в начале XX века, хранит атмосферу уюта и спокойствия. Внутри - скромная обстановка, несколько кабинетов и комната для отдыха сотрудников. Здесь все знают друг друга, и работа ведётся неспешно, но основательно.",
        x: 357,
        y: 450,
        icon: "local_police" // Иконка Material Icons
      },

      {
    name: "Полицейский участок",
        description: "Полицейский участок Сетлерс Крик & Беттон Хилс & Семинол & Олд Сейнт окружённый высокими офисными зданиями и шумными улицами. Внутри просторный зал с современным оборудованием, где постоянно кипит работа. Широкие коридоры ведут к кабинетам детективов и конференц-залам для оперативных совещаний. Здесь всегда много людей - от сотрудников полиции до горожан, пришедших за помощью.",
        x: 434,
        y: 259,
        icon: "local_police" // Иконка Material Icons
      },

      {
    name: "Полицейский участок",
        description: "Полицейский участок Истгейт & Ройал Окс - небольшое кирпичное здание, утопающее в зелени деревьев, расположенное в тихом квартале. Внутри уютная обстановка с деревянной мебелью и слегка потрескавшейся штукатуркой на стенах.",
        x: 624,
        y: 182,
        icon: "local_police" // Иконка Material Icons
      },
{
    name: "Городской суд",
        description: "Городской суд - величественное здание с колоннами и мраморными ступенями, возвышающееся в центре города. Внутри широкие коридоры, высокие потолки и большие окна, наполняющие помещения естественным светом. В залах суда, отделанных дубовыми панелями, стоят массивные деревянные скамьи для присяжных и строгие кафедры для судьи и адвокатов. В фойе часто можно увидеть группы юристов, обсуждающих дела, и посетителей, ожидающих своей очереди в залы заседаний.",
        x: 200,
        y: 172,
        icon: "gavel" // Иконка Material Icons
      },

   {
    name: "Химический завод Symrise",
        description: "Химический завод Symrise - обширная промышленная территория, усеянная лабиринтом трубопроводов, цистерн и дымящихся башен, находящаяся на окраине города. Огромные металлические сооружения, соединенные сетью переходов и лестниц, создают впечатление сложной и опасной инфраструктуры. Внутри заводских цехов раздается гул работающих машин и запах химических реагентов, а сотрудники в защитных костюмах и масках тщательно следят за оборудованием и процессами. На территории завода расположены лаборатории, где ученые и инженеры проводят анализы и контролируют качество продукции.",
        x: 100,
        y: 60,
        icon: "factory" // Иконка Material Icons
      },

  {
    name: "Металлургический завод Steel Corp",
        description: "Металлургический завод Steel Corp - обширная промзона, наполненная массивными строениями с высокими дымовыми трубами, из которых постоянно вырываются клубы дыма и пара. Внутри огромных цехов слышен грохот работающих станков и печей, а воздух пропитан запахом раскаленного металла и смазочных материалов. Вокруг мощные конвейерные линии, по которым движутся раскаленные слитки, а рабочие в огнеупорной одежде снуют туда-сюда, выполняя свои задачи. Вдали от основных цехов расположены склады, где аккуратно уложены готовые металлические изделия, ожидающие отправки заказчикам. В подвальных помещениях располагается база Авангарда.",
        x: 600,
        y: 590,
        icon: "factory" // Иконка Material Icons
      },

{
    name: "Кэмпинг",
        description: "Кэмпинг расположен в живописном природном уголке, окруженном лесами. Здесь есть уютные площадки для палаток и домиков, а также места для костров и барбекю. Посетители могут насладиться активным отдыхом, занимаясь походами, а вечером наслаждаться тишиной и красотой звездного неба.",
        x: 600,
        y: 488,
        icon: "landscape" // Иконка Material Icons
      },

{
    name: "Лесопилка Father Wood",
        description: "Лесопилка Father Wood расположена на окраине густого леса, окруженная высокими соснами и ели. Вокруг стоят большие деревянные сооружения с многочисленными пилами и станками для обработки древесины. В воздухе пахнет смолой и свежесрубленным деревом. Владельцы лесопилки сменились уже несколько раз, некоторые пропали, другие покончили с собой прямо на лесопилке. В остальном нормальное место. ",
        x: 740,
        y: 235,
        icon: "forest" // Иконка Material Icons
      },

{
    name: "Лесопилка Countyline Sawmill",
        description: "Лесопилка Countyline Sawmill - рромышленная площадка на окраине лесного массива, окруженная штабелями свежеспиленных брёвен. Внутри длинного, шумного цеха гудят пилорамы и станки, превращающие массивные стволы в ровные доски и балки. В воздухе витает аромат свежесрубленной древесины, а полы покрыты толстым слоем древесной стружки. Рабочие в защитных очках и наушниках оперативно управляют оборудованием, обеспечивая непрерывный поток пиломатериалов, которые затем отправляются на склад для дальнейшей обработки и транспортировки.",
        x: 58,
        y: 157,
        icon: "forest" // Иконка Material Icons
      },
{
    name: "Тюрьма",
        description: "Тюрьма штата Флорида является исправительным учреждением максимального уровня безопасности и представляет собой фортифицированный комплекс с толстыми бетонными стенами, электронными системами безопасности и строго контролируемыми зонами. Здесь находятся камеры высокой степени изоляции, обеспечивающие минимальный контакт заключенных между собой и с внешним миром. Внутри действует строгий режим, включающий постоянное наблюдение со стороны охраны и ограниченные возможности свободного передвижения. ",
        x: 649,
        y: 270,
        icon: "corporate_fare" // Иконка Material Icons
      },

{
    name: "Трейлерный городок",
        description: "Трейлера и шаткие домики заняли территорию в 5км2. Здесь десяток кривых улиц и около сотни семей. Есть с десяток брошенных трейлеров. В целом, это место считается не самым безопасным. Говорят, что местные жители допились до белки, потому что всё чаще утверждают, что видели странные вещи. ",
        x: 560,
        y: 252,
        icon: "cottage" // Иконка Material Icons
      },

{
    name: "Мотель",
        description: "Мотель Cactus Motel — на первый взгляд простой мотель, но он настолько часто упоминался Creepy News во всяких теориях, что стал городским достоянием. Здесь якобы люди пропадали и происходили жестокие убийства, и были замечены монстры, и люди терялись в комнатах, но подтверждений всему этому не было.",
        x: 532,
        y: 484,
        icon: "domain" // Иконка Material Icons
      },

{
    name: "Центральная библиотека",
        description: "Центральная библиотека находится в центре города, в историческом здании с красивой архитектурой. Ее интерьеры отличаются уютом и функциональностью, привлекая как читателей, так и посетителей, ищущих знания и информацию. Библиотека предлагает обширную коллекцию книг, периодических изданий и мультимедийных ресурсов, а также проводит различные мероприятия и программы для образования и развлечения горожан.",
        x: 474,
        y: 500,
        icon: "book_2" // Иконка Material Icons
      },

{
    name: "Отель",
        description: "Отель Hyatt House — дорогой отель, на 10-ом этаже, которого произошла массовая резня в начале 2023 года. Обвинили группу музыкантов, которые, якобы, были под наркотическими веществами. Их уже отправили за решетку, но те не перестают утверждать, что там было какое-то чудовище, которое убило 20 человек. Десятый этаж до сих пор не сдается и запечатан. ",
        x: 400,
        y: 352,
        icon: "apartment" // Иконка Material Icons
      },

{
    name: "Мэрия",
        description: "Мэрия расположена в центре города, в величественном здании с колоннами. Ее окружают просторные площади и парки, где горожане могут проводить свободное время и участвовать в различных мероприятиях. Внутри мэрии находятся офисы администрации, залы заседаний и места для встреч с общественностью. ",
        x: 489,
        y: 327,
        icon: "location_city" // Иконка Material Icons
      },

{
    name: "Больница Кэпитал Медикал",
        description: "Больница Кэпитал Медикал располагается в просторном здании с современным медицинским оборудованием и комфортными палатами для пациентов. Ее окружают ухоженные зеленые насаждения и парковые зоны, создавая благоприятную атмосферу для выздоровления. В больнице работает высококвалифицированный медицинский персонал, готовый оказать помощь в любых ситуациях. ",
        x: 423,
        y: 390,
        icon: "local_hospital" // Иконка Material Icons
      },
{
    name: "Пожарная станция",
        description: "Пожарная станция - здание с яркими красными воротами и маячающим светом на крыше, расположенное в центре города. На въезде всегда готовые к выезду пожарные машины различных типов и размеров. Внутри, помимо гаража, есть комнаты для отдыха и тренировок пожарных, а также современная командная комната, оснащенная мониторами и связью для оперативной координации действий. Вокруг здания обустроены площадки для тренировок и испытаний.",
        x: 353,
        y: 350,
        icon: "local_fire_department" // Иконка Material Icons
      },

{
    name: "Старшая школа Леон",
        description: "Старшая школа Леон - большое кирпичное здание с высокими окнами и ухоженным двором, расположенное в жилом районе города. Внутри просторные коридоры, украшенные стендами с информацией о школьных мероприятиях и достижениях учеников. Классы оборудованы современной техникой и интерактивными досками, а в библиотеке можно найти широкий выбор учебной литературы и уютные уголки для чтения. Во дворе школы расположены спортивные площадки и зоны отдыха, где ученики могут проводить перерывы между занятиями.",
        x: 269,
        y: 390,
        icon: "school" // Иконка Material Icons
      },

{
    name: "Университет штата Флорида",
        description: "Университет штата Флорида — крупный образовательный центр с обширной территорией, современными учебными корпусами и разнообразными академическими программами. Университет является центром научных исследований и культурных мероприятий. ",
        x: 208,
        y: 260,
        icon: "school" // Иконка Material Icons
      },

{
    name: "Кинотеатр Partyflix",
        description: "Кинотеатр Partyflix - элегантное здание в стиле арт-деко с яркой неоновой вывеской, украшенное мраморными колоннами и резными фасадами, которое выделяется на фоне городского пейзажа. Внутри уютные фойе с мягкими креслами и огромными постерами с новинками кино. Залы кинотеатра оборудованы современными креслами с подстаканниками, большим экраном и качественной акустикой, создающей потрясающую атмосферу для просмотра фильмов. Аромат свежего попкорна и сладких напитков наполняет воздух, добавляя впечатлениям полноты.",
        x: 285,
        y: 285,
        icon: "movie" // Иконка Material Icons
      },

{
    name: "Недостроенный торговый центр",
        description: "Недостроенный торговый центр - вокруг царит чувство заброшенности и забытого потенциала. Большое девятиэтажное здание торгового центра застыло на полпути к завершению. Когда-то это место задумывалось как центр городской жизни, но теперь оно выглядит как бетонный скелет, оставленный на произвол судьбы.",
        x:  235,
        y: 335,
        icon: "apartment" // Иконка Material Icons
      },

{
    name: "Театр Creative Veins",
        description: "Театр Creative Veins - здание театра, возвышающееся среди исторических памятников города, является воплощением архитектурной гармонии и изыска. Фасад украшен изящными деталями и статуями, а перед входом витражные окна добавляют шарма и таинственности. Внутри располагается роскошный фойе с мраморными колоннами и кристальными люстрами, где посетители могут насладиться атмосферой предвкушения и беседой перед представлением. Залы театра восхищают своей роскошью и элегантностью, с удобными креслами, пышными коврами и балконами, откуда открываются великолепные виды на сцену. Живая музыка и ароматы цветов смешиваются в воздухе, создавая волшебную атмосферу, приглашая зрителей погрузиться в мир искусства.",
        x: 293,
        y: 224,
        icon: "account_balance" // Иконка Material Icons
      },
{
    name: "Музей Florida History",
        description: "Музей Florida History - здание, возвышающееся над городским сквером, привлекает внимание своим уникальным архитектурным стилем и красивыми фасадами. Внутри создается атмосфера изысканности и умиротворения, где каждый шаг напоминает о величии истории и культуры. Просторные залы наполнены экспонатами, представляющими различные эпохи и направления искусства, а тщательно подобранные световые решения подчеркивают красоту каждой детали. Посетители могут насладиться коллекцией произведений искусства, аудиогидами и интерактивными экспозициями, погружаясь в удивительный мир знаний и вдохновения.",
        x: 535,
        y: 177,
        icon: "museum" // Иконка Material Icons
      },

{
    name: "Танцевальная студия Happy Feet Dance",
        description: "Танцевальная студия Happy Feet Dance - современное здание с яркими окнами, за которыми виднеются веселые рисунки и афиши событий. Внутри студии царит атмосфера энергии и творчества: зеркальные стены, балетные брусья и мягкий паркет, создающие комфортное пространство для занятий танцами. Звучит музыка различных стилей, а инструкторы с энтузиазмом и профессионализмом ведут занятия, помогая ученикам развивать свой талант и технику.",
        x: 337,
        y: 188,
        icon: "group" // Иконка Material Icons
      },

{
    name: "Вышка местного телеканала TallaST",
        description: "Вышка местного телеканала TallaST - небольшое сооружение на окраине города, увенчанное антеннами и сигнальными мачтами. С ней связаны ассоциации с высотой и коммуникацией, символизируя связь и информационное пространство. Внутри вышки находятся технические помещения с оборудованием для передачи и распространения сигнала, а на вершине установлены антенны и ретрансляторы для обеспечения качественного приема телевизионных и радио сигналов по всему городу и его окрестностям. Работники вышки следят за техническим состоянием оборудования и обеспечивают бесперебойную работу телеканала, делая его доступным для всех жителей.",
        x: 87,
        y: 244,
        icon: "cell_tower" // Иконка Material Icons
      },

{
    name: "Приют Св.Девы Марии",
        description: "Приют Святой Девы Марии — старейший детский приют города, принимающий под свой кров детей всех возрастов, а также разной степени физической полноценности. Здесь дети могут жить до совершеннолетия и проходят школьную программу обучения, не покидая стен учреждения. Приют находился под патронажем церкви до 2012 года, после чего был безвозмездно передан в муниципальное ведомство. Сестер-воспитательниц заменил светский персонал, а в церкви больше не проводятся службы. По слухам, причиной передачи стало загадочное убийство священника в 2012 году, которое постарались замять, и полиция быстро прекратила расследование. Другие говорят, что сиротский дом скатывался в маргинальность уже не первый год, и в его стенах не осталось ничего святого задолго до снятия церковного статуса.",
        x: 140,
        y: 154,
        icon: "house" // Иконка Material Icons
      },

{
    name: "Церковь",
        description: "Церковь Святого Марка занимает центральное место на площади, увенчанная изящными куполами и высокой колокольней. Ее стены украшены красочными витражами, а внутри царит торжественная атмосфера, наполненная мягким светом и звучанием органа. Вокруг церкви тянутся улицы с красивой застройкой и множеством маленьких кафе и магазинчиков.",
        x: 206,
        y: 394,
        icon: "church" // Иконка Material Icons
      },

{
    name: "Церковь",
        description: "Церковь Святого Петра расположена среди уютных улочек. Ее высокие стены и красивая архитектура привлекают внимание прохожих, а внутреннее убранство удивляет своим изыском и изяществом. Вокруг церкви ухоженный сад и скамейки, где верующие могут отдохнуть и помолиться. Тут не происходит никаких оккультных мероприятий, это всё сплетни. Или нет. ",
        x: 504,
        y: 94,
        icon: "church" // Иконка Material Icons
      },
{
    name: "Закрытая школа Макклей ",
        description: "Закрытая школа Макклей открыта в 2019 году. Правда, многие говорят о том, что не помнят как она была открыта. Словно она всегда была. В школе около тысячи учеников. Успеваемость у детей высокая. Также, говорят, что дети становятся намного послушнее после посещения этой школы. ",
        x: 638,
        y: 110,
        icon: "school" // Иконка Material Icons
      },

{
    name: "Ярмарка",
        description: "Местная ярмарка проходит по выходным. Здесь можно найти разнообразные товары, от свежих фруктов и овощей до ремесленных изделий и уникальных сувениров. Веселая атмосфера, ароматы уличной еды и живая музыка заставляют забыть о том, что несколько лет назад тут произошла массовая резня.",
        x: 389,
        y: 65,
        icon: "festival" // Иконка Material Icons
      },

{
    name: "Заброшенная жд станция",
        description: "Заброшенная железнодорожная станция возвышается в тенистом уголке за городом. Ее старые перроны и ржавые рельсы напоминают о былой славе и шуме поездов, в то время как теперь здесь царит покой и атмосфера забвения. Открытие станции ждали с нетерпением. Но спустя пару лет стало ясно, что этот вид транспорта не пользуется популярностью и является убыточным. Поэтому в 2015 году станцию закрыли. Некоторые утверждают, что поезда еще заходят на станцию, но разобранные железнодорожные пути доказательство того, что этого не может быть. ",
        x: 320,
        y: 112,
        icon: "train" // Иконка Material Icons
      },

{
    name: "Ночной клуб Asylum",
        description: "Ночной клуб Asylum - ярко освещенное здание, расположенное в центре города, с пульсирующими неоновыми вывесками и стробоскопическими огнями, создающими атмосферу вечной вечеринки. Внутри встречает густая дымка и звуки танцевальной музыки, которые наполняют танцпол энергией и азартом. Барные стойки обильно украшены яркими бутылками алкогольных напитков, а бармены смешивают коктейли с мастерством. В VIP-зонах уютные диваны и столики, где гости могут отдохнуть и насладиться эксклюзивными напитками, наслаждаясь зрелищем огней и движения танцующих людей.",
        x: 319,
        y: 400,
        icon: "nightlife" // Иконка Material Icons
      },

{
    name: "Бар Your Place",
        description: "Бар Your Place - уютное заведение с деревянной отделкой и мягкой подсветкой, создающее атмосферу интимности и расслабленности. Внутри звучит приятная фоновая музыка, а атмосфера наполнена звоном стаканов и приятными запахами напитков. Барная стойка, увенчанная разноцветными бутылками алкоголя, центр внимания, где опытные бармены с улыбкой на лице смешивают коктейли и общаются с посетителями. В углу бара уютные столики и диваны, где гости могут наслаждаться обществом друзей или наслаждаться моментом в одиночестве, наслаждаясь атмосферой и вкусом своего напитка.",
        x: 394,
        y: 184,
        icon: "local_bar" // Иконка Material Icons
      },

{
    name: "Центральное кладбище",
        description: "Центральное кладбище окружено высокими деревьями и зелёными насаждениями. Кладбищу уже более ста лет. Некоторые памятники утратили свой прежний вид, несмотря на попытки городских властей поддерживать их в надлежащем состоянии и реставрировать. Здесь также расположено несколько семейных склепов. Последние года вокруг кладбища все больше историй о призраках и даже о зомби. ",
        x: 340,
        y: 33,
        icon: "api" // Иконка Material Icons
      },

{
    name: "Сад Самоубийц",
        description: "Сад Самоубийц — является частью Кэпитал Парк. Это живописное место, в котором можно найти различные деревья, цветы и растения, а также бесконечное количество уютных уголков, которые так привлекают самоубийц. Самое часто, что говорят близкие умерших: он никогда об этом не говорил и не было похоже, что собирается покончить с собой.",
        x: 316,
        y: 457,
        icon: "park" // Иконка Material Icons
      },

    ];

    $(document).ready(function() {
      var map = $("#map");
// Создание пинов и всплывающих подсказок
      $.each(locations, function(index, location) {
        var pin = $('<div class="pin"><i class="material-icons">' + location.icon + '</i><div class="tooltip">' + location.description + '</div></div>');
        pin.css({ top: location.y + "px", left: location.x + "px", color: location.color });
        map.append(pin);

        // Обработка события наведения на пин
        pin.hover(function() {
          pin.addClass("active");
        }, function() {
          pin.removeClass("active");
        });
      });
    });
  </script>[/html]