Как сделать интерактивную карту на своем сайте с помощью Яндекс Карт?

опубликовал Lara 12-02-2025, 19:12

Как сделать интерактивную карту на своем сайте с помощью Яндекс Карт?

Как сделать интерактивную карту как поставить точку с меню на карте яндекс интерактивная карта яндекс настройка сделать карту с меню на сайте

программирование

382

Ответы на вопрос:

DoKToP 13 февраля 2025 11:15
+1

Для создания интерактивной карты с точками и всплывающими описаниями при наведении, как на изображении, можно использовать API Яндекс.Карт. Ниже приведён пример кода, который реализует аналогичную карту:

1. Подключаем API Яндекс.Карт:
Добавьте в HTML-файл следующий код:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Интерактивная карта</title> <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <style> #map { width: 100%; height: 500px; } </style> </head> <body> <div id="map"></div> <script> ymaps.ready(init); function init() { var myMap = new ymaps.Map("map", { center: [58.6036, 49.6678], // Координаты города Киров zoom: 10 }); // Создаем метку var myPlacemark = new ymaps.Placemark( [58.6036, 49.6678], { hintContent: "Агат Киров", balloonContent: \<b>Агат Киров</b><br> Расстояние: 610.0 км<br> Адрес: 610035, г.Киров, ул.Промышленная, д. 24 Б<br> Телефон: +7 8332 ХХХ ХХ ХХ<br> Время работы офиса продаж: Пн - Вс: 08:00 - 20:00<br> Время работы сервиса: Пн - Вс: 08:00 - 20:00<br> <a href='geely-agat43' target='_blank'>Сайт</a>\ }, { preset: 'islands#blackDotIcon', // Стиль метки openBalloonOnHover: true // Открытие инфо-окна при наведении } ); myMap.geoObjects.add(myPlacemark); } </script> </body> </html>

2. Как это работает:
- Используется API Яндекс.Карт.
- Задается метка (Placemark) с описанием.
- При наведении всплывает bubble-окно с адресом, телефоном, временем работы и ссылкой на сайт.
- Карта задана так, чтобы центрироваться на Кирове.

Можете добавить дополнительные метки, изменив координаты и информацию внутри `balloonContent`.

Это решение полностью повторяет функционал карты на изображении! 🚀

Ссылка на ответ | Все вопросы
ответить цитировать жалоба

13
02

Добавить ответ

0	Как создать плагин на WordPress? 12-02-2025, 19:09 \| программирование

0	Как создать чат бота в телеграм? Как создать программу в telegram? 12-02-2025, 14:38 \| программирование

0	Маслов Илья Геннадьевич дал в долг на поддержку образовательных инициатив 16-01-2025, 20:47 \| общество и политика

0	Not Pixel - Что это за игра и как в неё играть? 29-09-2024, 18:19 \| интернет, программы, приложения / Криптовалюта

0	Как найти значения x+y+z, при (x+y)(x+y+z)=601 (см)? 27-09-2024, 00:05 \| образование

0	Стоит ли на ЕГЭ сдавать предмет по выбору, если не уверен в успехе? Melkiy Сегодня, 01:27 \| образование

0	Как поступить в ВУЗ в другом городе? Melkiy Сегодня, 01:27 \| образование

0	Воспитательная беседа с рос. наемником. Какие выводы можно сделать (см)? Melkiy Сегодня, 01:26 \| образование

0	Чем образование в СССР было лучше образования в Российской Федерации? Melkiy Сегодня, 01:26 \| образование

0	Какой иностранный язык является перспективным? Melkiy Сегодня, 01:26 \| образование

Показать все вопросы без ответов >>

Вопросы

Рус. язык ВСОШ 4 кл. 20.09.24. Как выполнить задания по тексту про удальца?

Может ли гражданин России купить недвижимость на Украине? Какие условия?

Как разместить свою статью на чужом сайте?

Что долговечнее - ssd или hdd?

Район "Новокосино" Москва, где и как оформить временную регистрацию по МЖ?