Меню

Настройка карты яндекс для сайта

Выбор типа карты и получение кода или ссылки

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

Кроме того, вы можете экспортировать свою карту в файл. См. раздел Экспорт объектов карты.

При подготовке карты следует помнить о Внимание. \\n

Существуют определенные ограничения на создание объектов:

На карту может быть добавлено не более 10 000 объектов (включая и метки, и линии, и многоугольники).

Одна линия или многоугольник могут включать не более 1 000 вершин.

Если число вершин объекта превышает эту величину, объект можно автоматически упростить: удалить некоторые вершины таким образом, чтобы максимально сохранить общий вид объекта.

Для этого выберите нужный тип карты (нажмите кнопку на панели Тип карты ):

Подробнее об этом типе и существующих ограничениях см. раздел Печатная карта.

Интерактивная карта

Чтобы получить код для вставки на сайт, в блог или мобильное приложение своей карты таким образом, что с ней можно будет взаимодействовать (двигать, менять масштаб, строить маршруты, просматривать описания и т. п.), выберите тип карты Интерактивная :

В открывшейся форме вы можете скопировать код, который позволит отобразить вашу карту на сайте или в блоге (доступны два варианта HTML-кода ─ JavaScript или iframe ):

Использование кода iframe имеет ограничения:

карта может отображаться только на крупных масштабах,

не все теги HTML будут работать (см. \\n \\n Некоторые теги HTML не работают на карте при вставке через iframe: \\n \\n

не показываются произвольные изображения, тег img ( <img src​=\\»my-picture.png\\» />);

не запускаются скрипты, тег script ( <script src​=\\»\\»></script>);

не обрабатываются \\nинлайн-стили ( style=\\». \\») и инлайн-скрипты ( onclick=\\». \\») и т. п.

При использовании кода JavaScript по умолчанию на карте Конструктора нет поиска / маршрутов / панорам.

Чтобы они появились, нужно получить API-ключ в Кабинете разработчика для продукта «JavaScript API и HTTP Геокодер» и добавить его в код.

Пример кода с использованием API-ключа:

Ваша карта откроется на Яндекс.Картах вместе с информационной панелью (см. выше).

В открывшейся форме вы можете скопировать ссылку на карту (или код, который позволит отобразить вашу карту).

Статическая карта

Чтобы получить код для вставки своей карты в виде статического изображения (такие карты можно размещать на сайтах без поддержки JavaScript), выберите тип карты Статическая :

В открывшейся форме вы можете скопировать код, который позволит отобразить вашу карту. Подробнее см. в разделе API Конструктора Карт.

Печатная карта

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

Читайте также:  Real terra haze настройка

Для печатных карт вы можете выбрать единицу измерения: пиксели ( px ), дюймы ( in ) или сантиметры ( cm ).

Печатные карты высокого разрешения можно создать:

Только для карт вида Схема; для спутниковых снимков и гибридов карты для печати создать нельзя.

Только для крупных масштабов карты; для обзорных (мелких) масштабов печатные карты создать нельзя.

Только в последних версиях настольных браузеров Firefox, Chrome, Яндекс.Браузер, Edge, Safari и Opera.

Файл будет сохранен в автоматически созданной папке Конструктор Яндекс.Карт вашего Яндекс.Диска под тем именем, которое вы дали карте.

Выбор типа карты и получение кода или ссылки

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

Кроме того, вы можете экспортировать свою карту в файл. См. раздел Экспорт объектов карты.

При подготовке карты следует помнить о Внимание. \n

Существуют определенные ограничения на создание объектов:

На карту может быть добавлено не более 10 000 объектов (включая и метки, и линии, и многоугольники).

Одна линия или многоугольник могут включать не более 1 000 вершин.

Если число вершин объекта превышает эту величину, объект можно автоматически упростить: удалить некоторые вершины таким образом, чтобы максимально сохранить общий вид объекта.

Для этого выберите нужный тип карты (нажмите кнопку на панели Тип карты ):

Подробнее об этом типе и существующих ограничениях см. раздел Печатная карта.

Интерактивная карта

Чтобы получить код для вставки на сайт, в блог или мобильное приложение своей карты таким образом, что с ней можно будет взаимодействовать (двигать, менять масштаб, строить маршруты, просматривать описания и т. п.), выберите тип карты Интерактивная :

В открывшейся форме вы можете скопировать код, который позволит отобразить вашу карту на сайте или в блоге (доступны два варианта HTML-кода ─ JavaScript или iframe ):

Использование кода iframe имеет ограничения:

карта может отображаться только на крупных масштабах,

не все теги HTML будут работать (см. \n \n Некоторые теги HTML не работают на карте при вставке через iframe: \n \n

не показываются произвольные изображения, тег img ( );

не запускаются скрипты, тег script ( );

не обрабатываются \nинлайн-стили ( style=\». \») и инлайн-скрипты ( onclick=\». \») и т. п.

При использовании кода JavaScript по умолчанию на карте Конструктора нет поиска / маршрутов / панорам.

Чтобы они появились, нужно получить API-ключ в Кабинете разработчика для продукта «JavaScript API и HTTP Геокодер» и добавить его в код.

Пример кода с использованием API-ключа:

Читайте также:  Настройка дверей на ниве

Ваша карта откроется на Яндекс.Картах вместе с информационной панелью (см. выше).

Нажмите на этой панели кнопку Поделиться .

В открывшейся форме вы можете скопировать ссылку на карту (или код, который позволит отобразить вашу карту).

Статическая карта

Чтобы получить код для вставки своей карты в виде статического изображения (такие карты можно размещать на сайтах без поддержки JavaScript), выберите тип карты Статическая :

В открывшейся форме вы можете скопировать код, который позволит отобразить вашу карту. Подробнее см. в разделе API Конструктора Карт.

Печатная карта

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

Для печатных карт вы можете выбрать единицу измерения: пиксели ( px ), дюймы ( in ) или сантиметры ( cm ).

Печатные карты высокого разрешения можно создать:

Только для карт вида Схема; для спутниковых снимков и гибридов карты для печати создать нельзя.

Только для крупных масштабов карты; для обзорных (мелких) масштабов печатные карты создать нельзя.

Только в последних версиях настольных браузеров Firefox, Chrome, Яндекс.Браузер, Edge, Safari и Opera.

Файл будет сохранен в автоматически созданной папке Конструктор Яндекс.Карт вашего Яндекс.Диска под тем именем, которое вы дали карте.

Источник

Как вставить на сайт Яндекс-карту

Видео инструкция

Шаг 1

Авторизовавшись в Яндексе, пройдите по ссылке tech.yandex.ru/maps/tools/constructor.

Далее необходимо нажать на кнопку «Создать карту».

Шаг 2

Затем нажмите на кнопку «Найти».

Шаг 3

Из предложенного списка результатов поиска выберите нужный Вам адрес.

Шаг 4

На карте отобразится всплывающее окно, в котором можно:

После указания всех настроек для метки нажмите «Готово».

Обратите внимание!

Шаг 5

Если Вам необходимо оставить еще одну точку на карте, нажмите на кнопку «Метки».

Шаг 6

Затем в левой части экрана укажите название и описание карты (если это необходимо).

Шаг 7

Теперь на карте Вы можете:

Также в меню слева Вы можете:

Шаг 8

Шаг 9

Зайдите в редактор страницы и нажмите на кнопку «Редактировать HTML-код».

Разместите код карты ниже всего кода страницы и нажмите «Обновить» и «Сохранить изменения».

Источник

Создание собственной Яндекс.Карты на сайте

Карта на сайте служит проводником между вами и вашими клиентами/пользователями.

Назначений и функций у карт большое множество: местоположение объекта, геопозиционирование, построение маршрута проезда, пробки, панорамы, справочная информация об организации и т.д.

В данной статье рассмотрим 3 примера карт и научимся их создавать.

Хотелось бы начать с того, что существует два типа карт: статические (представлены в виде изображения) и интерактивные. Об интерактивных картах и поговорим.

Для создания интерактивных карт используется Яндекс API – программный интерфейс, с помощью которого можно установить Яндекс.Карты и необходимый инструментарий для работы с ними в своем веб-приложении или на сайте.

Читайте также:  Настройка биоса на компьютере днс

Пример 1

Первый и, наверно, самый простой пример. Когда на карте вместо стандартной метки Яндекс.Карт хотелось бы разместить логотип компании. (кликабельно)

На данной карте метка объекта была изменена на логотип компании. При наведении на логотип можно отображать необходимую нам информацию.

Добавлен функционал Яндекс.Пробки:

Рис.2 – Слои на Яндекс.Карте с помощью API Карт

Указание и поиск необходимого адреса, геопозиционирование и масштабирование:

Карта состоит из html-кода, который нам нужен для вставки карты на сайт. Ну и собственно подключаемый JS-файл, который содержит запрограммированную нами информацию.

В рассматриваемом примере html-код для вставки на сайт:

Пример 2

Во втором примере хотелось бы поговорить про интерактивные маркеры POI.

Теперь точки POI на карте стали интерактивными – при выборе откроется карточка с информацией об объекте. (кликабельно)

Следует заметить, что нововведение оказалось интересным и полезным. Теперь на карте можно сразу увидеть не только местоположение объекта, но и режим работы, номер телефона, адрес сайта, как добраться и отзывы.

Как сделать такую карту для своего сайта?

HTML-код для вставки на сайт остается без изменений:

function init() <
var myMap = new ymaps.Map(‘map’, <
center: [55.71136156901162,37.65276849999999],
zoom: 18,
controls: [] >);

// Создадим экземпляр элемента управления «поиск по карте» с установленной опцией провайдера данных для поиска по организациям.
var searchControl = new ymaps.control.SearchControl( <
options: <
provider: ‘yandex#search’ >>);
myMap.controls.add(searchControl);

// Программно выполним поиск определённой компании в текущей прямоугольной области карты.
searchControl.search(‘Artox Media Digital Group’); >
ymaps.ready(init);

Пример 3

В данном примере рассмотрим построение карты маршрутов. Часто бывает так, что пользователю нужно показать, как добраться до места от ближайшей остановки или станции метро. Конечно, можно разместить схему или изображение маршрута. Однако, это легко можно сделать с помощью Яндекс API Карт. (кликабельно)

Рис.4 – Новые балуны маршрутов API Карт

HTML-код для вставки карты на сайт без изменений:

function init () <
var multiRoute = new ymaps.multiRouter.MultiRoute( <
referencePoints: [
[55.7182901653654,37.69726548703039], «Москва, ул.Ленинская Слобода 26, стр. 5»],
params: <
routingMode: ‘masstransit’ > >, <

// Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
boundsAutoApply: true >);

// Создаем карту с добавленной на нее кнопкой.
var myMap = new ymaps.Map(‘map’, <
center: [55.71136156901162,37.65276849999999],
zoom: 16,
controls: [changeLayoutButton] >, <
buttonMaxWidth: 300 >);

// Добавляем мультимаршрут на карту.
myMap.geoObjects.add(multiRoute); >
ymaps.ready(init);

Хочется добавить, что API Карт обладает огромным функционалом. Можно строить различные маршруты для различных видов транспорта без привязки к объектам (т.е. пользователь сам может задать откуда начать построение маршрута до вашей организации).

Источник

Adblock
detector