Как создать Яндекс Карту для сайта с меткой и радиусом

Необходимо было для клиента создать точную копию Яндекс карты для сайта, но с увеличенным радиусом. Так как предыдущая карта была создана другими разработчиками, доступа к данным для редактирования нет.

Чтобы осуществить задуманное, было выбранно решение создать карту для сайта с использованием Яндекс API Карт, так как этот вариант позволяет делать с картой всё, что угодно.

Документация JavaScript API от Яндекс: https://tech.yandex.ru/maps/jsapi/doc/2.1/dg/concepts/load-docpage/

Создание Яндекс API в кабинете разработчика

Для того, чтобы работать с Яндекс API необходимо получить для вашего проекта собственный ключ. Получить ключ можно в кабинете разработчика

После получения ключа в документации можно взять сниппет кода и для тестирования вставить его. Данный код я выложил ниже. В нём указаны координаты Москвы. В него вам необходимо добавить API-ключ в ссылку <script> и вызвать контейнер <div> у вас на сайте в месте, где хотите, чтобы отображалась ваша карта.

Код для тестирования с координатами Москвы:

<script src="https://api-maps.yandex.ru/2.1?apikey=<ваш API-ключ>&load=package.full&lang=ru_RU">
</script>
<script type="text/javascript">
  ymaps.ready(function () {
    var myMap = new ymaps.Map("YMapsID", {
      center: [55.76, 37.64],
      zoom: 10
    });
  });
</script>

// Формирование div-контейнер карты.
<div id="YMapsID" style="width: 450px; height: 350px;"></div>

Если тестовая карта загрузилась на сайт, значит можно искать свои координаты и добавлять их в код.

Как узнать ваши координаты

Заходим в Яндекс и пишем в поиск необходимый адрес

Код с нашими тестовыми данными получается следующий

Проверяем карту на сайте. Координаты работают.

Так как мы переделываем сайт, нам нужна практически точная копия оригинала. Почему нельзя просто скопировать с предыдущего сайта? Потому что связи с прошлыми разработчиками нет, а нам нужно внести корректировки от клиента.

Из технического задания радиус оказания услуг применить необходимо следующий:

Идём на страницу геообъектов: https://tech.yandex.ru/maps/jsapi/doc/2.1/dg/concepts/geoobjects-docpage/

Добавляем тип геометрии, ещё раз координаты и радиус от нашей точки:

Вот что получилось на сайте с картой после обновления кода:

Зелёный цвет нас не устраивает. Такое ощущение, как будто я смотрю Яндекс Погоду и сейчас в этом месте идёт дождь. Сделаем как и на оригинале – зелёный.

Добавили к координатам:

• цвет заливки с прозрачностью (55 в цвете),
• цвет контура,
• толщину контура,
• прозрачность.

{
        fillColor: "#91D57D55",
        strokeColor: "#91D57D",
        strokeOpacity: 0.8,
        strokeWidth: 5
    }

Добавляем баллун на карту и иконку, чтобы было понятно, где действительно находится наш адрес:

        .add(new ymaps.Placemark([55.694843, 37.435023], {
            balloonContent: 'текст внутри',
            iconCaption: 'текст снаружи'
        }, {
            preset: 'islands#greenDotIconWithCaption'
        }))

Этот код является продолжением вывода нашего объекта:

myMap.geoObjects
.add(myCircle)
.add(new ymaps.Placemark . . .

Вот собственно и всё. Карта готова.

Иконка с описанием:

Баллун – текст внутри открывается при нажатии:

Если вам такие сложности не нужны, можно воспользоваться конструктором карт: https://yandex.ru/map-constructor/

У меня красиво нарисовать круг там не получилось, поэтому и принял решение сделать всё через API.

А ещё один из плюсов, что всю эту карту удобно редактировать. Надо сделать радиус круга побольше? Пожалуйста! 48км от точки:

Вопрос с Яндекс Кью:
Как замерить радиус в популярных сервисах карт, вроде Яндекса, Гугла, 2ГИС и т.д.?

Добрый день! Рекомендую попробовать использовать Яндекс.Аудитории с любого аккаунта.

Инструкция:

1) нажимаете сверху справа кнопку “Создать сегмент”;
2) выбираете “Геолокация”‘
3) выбираете левый квадрат “Окружности”‘
4) ищите свой адрес и указываете радиус охвата местности.’

Яндекс.Аудитории созданы, чтобы давать рекламу на аудиторию, которая находится в указанном радиусе, либо в указанном здании, которое можно с точностью обвести с помощью полигонов.

Если вам это не подходит, напишите, скажу другой способ. 🙂