Добавление меток в google картах

Прайс-лист для Яндекс.Карт

К тому же, пользователи Яндекс.Карт часто ищут компании не по рубрикам, а по товарам. Если они сразу увидят цену услуги ремонта ноутбуков, то это заметно увеличит конверсию.

Как добавить цены:

1. Откройте раздел «Цены» в личном кабинете организации.
2. Выберите вариант публикации прайс-листа. В первом случае можно загрузить готовый файл в формате XLS/XLSX. 
3. Во втором случае, можно добавить несколько товаров вручную. Для этого нажмите «Новый товар».
4. Заполните карточку товара: добавьте фотографию (минимальный размер — 320×320 пикселей, максимальный — 5000×5000 пикселей), укажите название, цену, выберите категорию и сделайте небольшое описание (не больше 500 символов с пробелами). 

Информацию о товарах можно отредактировать в любой момент. Прайс-лист будет отображаться на Яндекс.Картах и в Справочнике через 24 часа. 

Импортирование меток в конструктор из файла

Все созданные объекты возможно импортировать и экспортировать во внешний файл. Импорт возможен из Excel файла, а так же KML, GPX или GeoJSON.

Пример готового для импорта файла в Excel:

Географические координаты как в Excel файле, так и строке поиска указываются в последовательности: широта, а затем долгота через пробел. Количество знаков после точки ограничена семью, это даёт возможность отметить точку на карте с точностью до одного сантиметра.

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

Северная широта	N (N36.45)	С (С36.45)	Положительное число (36.45)
Южная широта	S (S36.45)	Ю (Ю36.45)	Отрицательное число (-36.45)
Восточная долгота	E (E42.56)	В (В42.56)	Положительное число (42.56)
Западная долгота	W (W42.56)	З (З42.56)	Отрицательное число (-42.56)

Способ 4: Метка в Моих Картах

Кроме как в Google Maps, метки можно ставить и сохранять для быстрого доступа с помощью дополнительного сервиса Мои Карты. Данный способ имеет массу преимуществ над прочими, так как созданные наборы не ограничены одними лишь местами, а могут содержать измерения, маршруты и многую другую информацию.

1. Перейдите на сайт сервиса, разверните главное меню в левом верхнем углу и перейдите в раздел «Мои места».

Кликните по вкладке «Карты» и воспользуйтесь кнопкой «Создать карту» в нижней части списка.

Оказавшись на отдельной странице, щелкните по блоку «Карта без названия» и впишите наименование на свое усмотрение.

Чтобы добавить метку, увеличьте масштаб, кликните по значку «Добавить маркер» на верхней панели инструментов и кликните левой кнопкой мыши в нужном месте.

Заполните представленные поля по желанию, добавьте дополнительную информацию вроде фотографий, и нажмите «Сохранить». В результате на экране появится новая точка.

Используя список в левом верхнем блоке сервиса, можно кастомизировать метки. К примеру, можете изменить цвет отдельных точек.

Завершив работу с выставлением меток и добавление дополнительной информации, закройте вкладку сервиса и обновите страницу Google Maps. После этого снова перейдите в «Мои места» через главное меню и откройте вкладку «Карты».

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

Представленный метод не ограничен ПК-версией, однако на телефоне для использования Моих Карт потребуется отдельное приложение, которое едва ли связано с Google Maps. Из-за этого варианты применения способа сильно ограничены.

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Создание объектов

В интерфейсе предлагается создание нескольких видов объектов на карте:

Метки

С их помощью ставятся точечные отметки на карте, которые обозначают конкретные локации — пункт назначения или промежуточный пункт на пути. Это может быть магазин, центральный офис, филиал, место для посадки в транспорт и другие места.

Для меток может быть задана особая иконка, цвет и название.

Линии

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

Многоугольники

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

Помните: на карте может содержаться не более 10 000 объектов, включая вышеперечисленные. Также если обстоятельства вынуждают вас отметить на карте невероятно сложный объект, постарайтесь уместить количество вершин в 1 000, так как больше сервис поставить не позволит.

Для автоматизации процесса при клике левой кнопкой на любую вершину многоугольника выберите пункт Упростить контур. То же действие применимо и к линиям.

Отображение

Пользователь может выбрать и отображение карты:

• Схема — всем знакомый отрисованный план местности с условными обозначениями.
• Спутник — фотографическая карта из космических снимков.
• Гибрид — спутниковые снимки, которые снабжены обозначениями инфраструктуры, топонимами и т.д.

Если вашим гостям важна обстановка на дорогах, то на карте включается отображение пробок.

Сохранение

По завершении создания карты дайте ей название и сохраните. Система предложит три варианта формата карты — интерактивная, статическая и печатная. Именно здесь можно экспортировать карту в файл (KML, CSV, GPX или GeoJSON). Получите код карты для её размещения на своём ресурсе и добавьте его в исходный код сайта.

Публикация

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

CMS и конструкторы сайтов имеют функцию вставки карты. Например, в Tilda это один из блоков в боковом меню.

Как вставить карту на сайт на WordPress

Определите, на какой странице сайта хотите разместить карту. Чаще размещают на странице «Контакты». Чтобы вставить карту на сайт на WordPress:

1. Зайдите в административную панель сайта и выберите раздел «Страницы».
2. Зайдите в «Контакты» и нажмите «Изменить».
3. Смените в редакторе режим «Визуально» на «Текст».
4. В конструкторе Яндекс карт для сайта скопируйте код iframe и вставьте его вниз страницы.
5. Нажмите «Обновить».

На лендингах карту размещают в подвале сайта. Для этого сгенерируйте в конструкторе HTML код карты и выполните аналогичные действия. Пройдите: «Внешний вид» — «Редактор» — «Подвал». Вставьте HTML код.

Чтобы оценить эффективность рекламных каналов, подключите сквозную аналитику Calltouch и не тратьте время на рутинные задачи. Вы узнаете, что приносит вам целевой трафик и доход. Сервис собирает все сведения с сайта, социальных сетей, CRM и экономит время сотрудников на составление отчетов.

Сквозная аналитика

 от 990 рублей в месяц

• Автоматически соберет данные с рекламных площадок, сервисов и CRM в 1 окне
• Бесплатные интеграции c CRM и другими сервисами: более 50 готовых решений
• Анализируйте воронку продаж от показов до кассы
• Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
• Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды

Узнать подробнее

Как вставить карту 2ГИС на сайт

Встроить карту через API

Установить интерактивную карту 2ГИС можно через JS API — это версия API для простых задач.

Карта 2ГИС

Пошаговый процесс:

1. Перейдите на страницу и выберите город.

2. Найдите компанию по названию.

3. Установите нужный размер карты в правом нижнем углу.

4. Нажмите «Далее», прочитайте Лицензионное соглашение и примите условия.

5. Нажмите «Получить код» и скопируйте его для вставки на сайт.

Это простая карта с готовой меткой, но можно сделать свою через Кjнструктор. Выручит, если вашей компании нет в 2ГИС.

Создать в Конструкторе карту со своими метками

В 2ГИС есть бесплатный Конструктор карт, с его помощью можно создать карту со своей разметкой — добавить метки, описания, отобразить маршруты, графически выделить области.

Пошагово как сделать карту в Конструкторе 2ГИС:

1. Введите адрес и найдите нужное здание.

2. Настройте цвет метки, введите название.

3. Добавьте описание, можно вставить картинку с помощью разметки HTML или Markdown.

4. С помощью линий и выделения областей помогите клиентам сориентироваться по маршруту.

5. Выберите нужный размер карты.

6. Скопируйте код для вставки на сайт или в мобильное приложение.

Знакомство с сервисом

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

Не знаю как у вас, но во мне Гугл Мапс всегда вызывал какой-то ступор, я всегда думал, что им очень тяжело пользоваться и просто не решался сесть и разобраться. Но, как сказал Че Гевара: «Давайте будем реалистами и совершим невозможное», и я пересилил свою фобию перед Google Maps, и выбрал день чтобы полностью в нём разобраться. И вновь убедился, что всё, что поначалу кажется сложным, получается в итоге простым и понятным.

Тем более, что ранее у нас с Вами уже был опыт работы c сервисом Google Календарь, когда мы научились планировать дела и путешествия.

Идеально сервис работает в родном для Google браузере — Ghrome, в Опере вообще не важно отображается и подтормаживает. Во время работы с картами советую пользоваться Хромом или Мозилой

Размещение кода на сайте

Вне зависимости от выбранного варианта вам придется размещать код на сайте. Я не буду подробно рассказывать о том, как это сделать – все индивидуально и зависит от вашей платформы.

Принцип везде один – вам необходимо просто вставить код в нужном месте страницы вашего проекта. В том же WordPress это можно сделать при помощи встроенного редактора. В других CMS этот процесс тоже мало чем отличается.

В любой момент вы можете зайти в раздел “Мои карты” и изменить какие-то параметры, добавить новые метки или линии, получить другой тип кода.

Также вы можете импортировать готовую карту из форматов XLSX, CSV, KML, GPX или GeoJSON.

Получение кода для размещения

После того как вы смогли поставить метку на карте «Яндекс», можно приступать к размещению последней на сайте:

1. Для этого необходимо получить код. Нажмите на соответствующую кнопку слева, откроется диалоговое окно.
2. Данный код вставляется в нужное место на вашем сайте, и после обновления страницы интерактивная карта с расположенной на ней меткой, которая указывает на вашу организацию, начнет работать.

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

Сохранить файл рекомендуется на компьютере или на сервисе «Яндекс.Диск».

Вы можете в любой момент вернуться к редактированию полученной метки, нажав на кнопку в левом верхнем углу. Метки можно добавлять в любом количестве, перемещать, удалять и менять их оформление.

Создание пользовательских карт в конструкторе

Всё по аналогии с Google Maps, если вы читали статью «Как отмечать места путешествий Google Maps», то легко разберетесь. На мой взгляд, тут даже как-то проще и интуитивно понятней.

Чтобы попасть в конструктор, кликните по аватрке профиля (верхний правый угол) и в выпадающем меню зайдите «Мои карты».

Откроется окно редактирования (скриншот кликабельный):

• Отметить несколько меток на карте, добавить текстовое описание к каждой, подробнее.
• Проложить между ними линию (к сожалению только прямую), с подсчётом общего расстояния.
• Выделить определённую область многоугольником и отметить области внутри него.

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

Если сравнивать возможности печати, то Яндекс Карты опережают Google Maps — можно подобрать DPI (разрешение точек на дюйм), размер карты, формат сохраняемого файла.

Установить метки на карте

Чтобы показать посетителям сайта местоположение вашего офиса на карте, режим работы и другую полезную информацию, используйте виджет «Карта».

Выберите один из следующих типов карт:

• Яндекс Карты
• Google Карты
• Google Embed Карты

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

При выборе Google Embed Карт вам не потребуется получение API ключа. Но для Google Embed Карт вы сможете установить только одну метку без дополнительных настроек.

Настройка метки

Чтобы было понятнее, как поставить метку организации на карте «Яндекс», разберем этот процесс по пунктам:

В интерфейсе работы с картой слева в окне введите название и описание организации, как показано на скриншоте ниже.

• Сверху нажмите на кнопку «Метки» и левой кнопкой мыши выберете необходимое место карты.
• Появится значок, который будет отмечать нужное место, а в левой части окна вы увидите список добавленных объектов. Конструктор дает возможность не только разобраться, как поставить метку на карте «Яндекс», но и поможет ее отредактировать по своему вкусу.

• При выборе места, в меню слева откроется интерактивное диалоговое окно, в котором можно вписать данные об организации, выбрать цвет и тип иконки, а также пиктограмму, указывающую на направленность работы организации.
• Нажав кнопку «Готово», вы сформируете метку на карте.

Как растянуть карту на всю ширину экрана?

По умолчанию заданы определенные значения высоты и ширины карты, но мы их можем изменить в редакторе:В полученном коде необходимо изменить значение width (это ширина карты) на 100%Пример: width=»100%» Теперь ширина карты у нас будет растягиваться на всю ширину виджета “html код”.Изменяя значение height вы измените высоту карты на странице.

На примере ниже, укажем ширину карты (width) на всю ширину экрана, т.е. со значение 100%. И высоту 480 (в пикселях).

Важно: при таких настройках, карта будет растягиваться по всей ширине виджета «HTML код», но еще не по всей ширине экрана. Для того чтобы растянуть границы виджета с картой на всю ширину экрана, необходимо зайти в настройки секции, внутри которой мы добавили карту, и в разделе «Параметры» включить функцию «Растянуть по ширине экрана»

Готово! Теперь наш виджет с картой растянут от края до края экрана.Проделаем тоже самое на записи:

1. Проверим в предпросмотре, как отображается карта

2. Изменим значение ширины карты на 100%, через код

3. Растянем секцию с картой по ширине экрана

4. Проверим результат в предпросмотре

Импортирование посещенных мест из Excel в Google Maps

Если у вас много мест, которые вы хотите отметить на карте, то можно будет подготовить таблицу в Excel, которую затем импортировать в карту. Очень удобно и экономит время.

Базовая таблица будет состоять из трёх столбцов:

• Месторасположение маркера. Это могут быть как точные координаты (широта и долгота), так и просто название местности. Я использую название города в котором был и через запятую указываю страну. Страну надо указывать потому, что некоторые названия городов повторяются и программа может расставить много ненужных маркеров. Так же старайтесь писать названия без ошибок;
• Второй столбец это название маркера, которое будет отображаться в заголовке и в меню;
• Третий столбец будет отвечать за описание, в котором можно указать любую информацию касающуюся этой местности.

Пример импортируемого файла Excel:

В произвольной форме можно указывать ещё столбцы, это могут быть номера телефонов, сайты, название отелей и всё что угодно. Вся информация из дополнительных колонок будет находиться в описании к отметке.

Теперь, чтобы добавить все данные на карту, создайте новый слой, после чего нажмите на кнопку «Импорт». В открывшемся меню выберите ваш xls файл или таблицу с Google Drive.

В открывшемся окне сервис предложит выбрать столбцы, отвечающие за месторасположение и названия маркеров, после этого нажимайте «Готово». Через несколько секунд вся таблица с данными будет загружена на карту и доступна для редактирования.

Способ 3: Сохранение места

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

Вариант 2: Мобильное приложение

1. Через мобильный клиент Google Maps также вполне можно сохранять собственные метки. Первым делом откройте приложение, установите маркер путем долгого зажатия точки и тапните по названию места на нижней панели.

   Воспользуйтесь кнопкой «Ярлык» и на открывшейся странице укажите желаемое название. После этого на карте появится соответствующая метка синего цвета.

С куда большим комфортом можно воспользоваться и другим разделом приложения. Для этого через главное меню откройте вкладку «Сохранено» и перейдите на страницу «Списки».

Чтобы создать новый список, например, которым можно делиться, не беспокоясь о сохранении личных данных, нажмите «Создать список». Заполните представленные поля в соответствии с требованиями, выберите настройки приватности и нажмите «Сохранить» в правом верхнем углу.

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

Воспользуйтесь кнопкой «Сохранить», в представленном списке установите галочку рядом с нужным вариантом и нажмите «Готово» в углу страницы. Это действие можно повторять неограниченное количество раз с каждой из нужных меток.

Отправить список мест можно, открыв нужный раздел на странице «Сохранено» и нажав поделиться. При этом просто для просмотра меток будет достаточно нажать «Открыть карту» на том же экране.

Мобильное приложение в плане управления метками не сильно отличается от веб-сайта, но, как видно, предоставляет несколько более удобный интерфейс. Безусловно, какой бы из вариантов вы не выбрали, места сохраняются в обеих версия сервиса.

Вариант 1: Веб-сайт

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

Способ 2: Отправка на телефон или почту

1. Кроме как вручную, отправить данные можно в определенное место, к сожалению, ограниченное адресом электронной почты или мобильным устройством. Чтобы выполнить поставленную задачу, по аналогии с предыдущим способом откройте карточку нужной точки, в левой колонке разверните раздел «Поделиться» и воспользуйтесь кнопкой «Отправить в телефон».

При появлении всплывающего окна «Уведомление отправлено», по сути, процедура уже отчасти выполнена, так как сразу после этого на авторизованное мобильное устройство придет оповещение с возможностью перехода к точке на карте. В качестве альтернативы, а также если нужно предоставить данные другому пользователю, можете воспользоваться QR-кодом в той же области.

Для отправки прямой ссылки на место можете нажать «Отправить письмо на электронную почту», ввести нужный почтовый адрес без каких-либо ограничений и кликнуть «Отправить». Это приведет к отправке электронного письма, содержащего ссылку с возможностью быстрого перехода на Яндекс.Карты.

Если вас не устраивает такое решение, остается еще функция «Отправка СМС на телефон», доступная из указанного ранее окна. При нажатии необходимо будет перепроверить номер телефона и воспользоваться кнопкой «Отправить», тем самым получив на привязанный номер бесплатное сообщение с URL-адресом.

Выполнить отправку ссылки посредством СМС на произвольный номер, к сожалению, невозможно, тогда как при выходе из учетной записи останется и вовсе лишь один вариант – электронная почта. Также мы не стали рассматривать не совсем стандартный способ с использованием виджета карты, так как это едва ли отличается от первого решения из инструкции.

Создаём свою Яндекс карту

Далее предлагаю пошаговую инструкцию создания карты.

Профиль в Яндекс

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

Регистрация в яндекс почте

Создаём карту

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

В открывшемся окне заполняем поля название карты и её описание.

Далее два пути, загрузить готовый файл с метками или создать в конструкторе.

Загружаем готовый файл с метками в конструктор

У Вас уже есть готовый шаблон с метками, в формате XLSX или CSV, нажимаем кнопку импорт и загружаем файл. Если шаблона нет, его можно скачать, нажав всё туже кнопку импорт. Внизу открывшегося окна, выбираем нужный формат. 

Скачанный шаблон открывается Microsoft Excel. Вставляете свои данные и загружаем назад. Жмём кнопку сохранить и продолжить.

Создаём метки на карте

Создаём метки непосредственно на карт, без загрузки шаблонов. Для этого нажимаем верхней части кнопку метки и щёлкаем левой кнопкой мыши в нужном месте карты. В открывшемся окне заполняем название метки, а также пишем описание объекта.

Также на открывшейся вкладке, вы можете:

• изменить цвет и форму метки;
• выбрать из списка стандартную иконку, или установить порядковый номер метки.

К сожалению на данный момент, недоступна возможность прикрепить фотографию к метке. Ранее эта функция реализовывалась через Яндекс Фотки. На данный момент Яндекс Фотки переезжают на Яндекс Диск. Как услуга, добавления фото на карту, будет работать после переезда узнаем по факту.

На карту можно добавить маршрут. Для этого необходимо нажать вверху кнопку линии, и с помощью левой кнопки мыши, нажимая на нужные места проложить маршрут. Расстояние маршрута, автоматически отобразится напротив маршрута, в списке объектов с лева.

Также, на карту можно добавить отображение Яндекс пробок, выделить необходимый объект с помощью кнопки многоугольники. А также отобразить внешний вид карты нажав на кнопку слои и выбрав желаемый вариант (схема, спутник, гибрид).

На одну карту можно добавить до 10 000 объектов.

По завершению нанесения меток, нажимаем на кнопку сохранить и продолжить.

Настраиваем карту для вставки на сайт

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

Скачиваем файл карты для загрузки в навигатор

Созданную карту, для загрузки в мобильный навигатор, можно скачать нажав на кнопку экспорт. Выбираем необходимый формат и жмём кнопку скачать, или сохранить на Яндекс диск. На этом создание Яндекс карты завершено.

Редактирование карты

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

Конструктор карт от «Яндекса»

Самый простой способ того, как поставить метку на карте «Яндекс» — это воспользоваться конструктором карт, который можно найти на официальном сайте «Яндекса». Для того чтобы выложить на сайт карту с заданной отметкой, достаточно выполнить ряд несложных действий. Интерфейс интуитивно понятен для любого пользователя.

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

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

Добавляем Яндекс карту

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

При заходе на страницу конструктора карты, появится окно, где нужно нажать на кнопку «Создать карту»

Указываем нужный нам адрес в поисковой строке и нажимаем на кнопку «Найти» чтобы перейти к нему

Отметим на карте нужные нам адреса. Можно поставить несколько меток, а также добавить линии. Для этого нажмите на нужную функцию в верхней панели управления, после чего нажмите на нужное место на карте, чтобы поставить там метку или же начать рисовать линию.

После добавления метки или линии, они добавляются в раздел «Список объектов» слева

Чтобы редактировать уже добавленные метки, нажмите на нужную метку в этом списке, который отображается слева (нажать именно в списке, а не на саму метку, которая расположена на карте).

Указываем название и описание нашей карты. После чего нажимаем на кнопку «Сохранить и продолжить»

Выбираем вариант «Вставить на сайт» и «Интерактивная карта»

Интерактивную карту посетитель сможет приблизить/отдалить и двигать ее, чтобы сориентироваться в местности. Если выбрать вариант «Статическая карта» вместо интерактивной, то она будет отображаться на странице в формате картинки и с ней невозможно будет взаимодействовать. 

Указываем размер карты (ширину и высоту), в котором хотим добавить ее на страницу. Если хотите, чтобы карта была по всей ширине экрана — включите функцию «Растянуть по ширине». На самой карте, справа, будет выделяться область, которая отобразится на сайте.

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

Нажимаем на кнопку «Получить код карты»

Выберите вариант подключения карты (через JavaScript или iframe) и скопируйте полученный код

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

При подключении через JavaScript мы видим в правом верхнем углу карты есть кнопки, чтобы изменить слои карты (отображение карты со спутника или в виде схемы) и открыть карту на весь экран.

Если подключить через iframe, то кнопок смены слоя и открытия карты на весь экран не будет.

Заходим в редактор и добавляем на страницу виджет «Вставка HTML кода». 

Скопированный код карты добавляем в настройках этого виджета

Создание карты

Для этого мы будем пользоваться специальным конструктором карт Яндекса. Его могут использовать все, но придется пройти регистрацию и завести себе аккаунт Яндекса.

Как только вы залогинитесь, можно переходить к следующей инструкции. С помощью полей ввода адреса или курсора найдите нужное место и задайте масштаб. Делайте это с умом, потому как именно таким образом и будет выглядеть карта на вашем сайте.

Вы можете поставить метки, линии, многоугольник и пробки для того, чтобы дать посетителям дополнительную информацию. Например, о том, что где-то есть удобный проход или же наоборот, что пути нет. Но обо всем этом далее.

Все созданные вами объекты будут доступны в “Списке объектов”. Их при желании можно удалить или отредактировать.

Метки

Метками можно обозначить ближайшие станции метро или автобусные остановки. Еще меткой можно обозначить вход в здание (если оно большое) или другие офисы, если они есть.

Чтобы создать метку выберите ее в панели управления сверху и кликните по любому месту на карте. После этого выскочит окно, в котором вы сможете ввести подпись метки и краткое описание – оно будет выводиться при клике. Также вы можете выбрать цвет и тип метки. Рядом доступны и другие параметры кастомизации, например иконки или произвольное число.

Как только редактирование будет завершено, кликните на кнопку “Готово”. Можно создать сколько угодно меток. Но если их будет слишком много, пользователи могут запутаться.

Линии

С помощью линий вы можете нарисовать маршрут, отметить какие-то обходные пути или показать наиболее короткую дорогу от того же метро или остановки.

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

Линия создается по точкам, как только вы кликните на определенного место, нужно переместить курсор по направлению линии и кликнуть еще раз. Как только формирование линии будет закончено, нажмите на клавишу “Esc”. После этого всплывет окно с опциями.

Вы можете выбрать цвет, процент прозрачности и толщину линии. Также можно ввести описание, которое будет доступно при клике по объекту. Кликаем на “Готово”, как только редактирование будет закончено.

Многоугольники

С помощью многоугольников вы также можете рисовать произвольные отметки на карте. Обычно этот инструмент используют для обрисовки контура здания. Им же можно обозначить какую-то территорию или любую другую местность.

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

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

После того, как фигура сформирована, нажимаем на клавишу “Esc”. Выскочит окно с параметрами.

Можно задать цвет контура и заливки, выбрать толщину

Обратите внимание на два поля “Прозрачность”, которые расположены параллельно контуру и заливке. Здесь вы можете задать процент прозрачности

Если выставить 100, то нужный элемент просто исчезнет. Например, вы хотите, чтобы был только контур – вводите значение 100 в поле напротив заливки и она исчезает. То же сработает и с самим контуром. Очень удобно.

Можно закрывать редактор с помощью кнопки “Готово”. Но не спешите, есть еще кое-что, о чем надо сказать.

Пробки и слои

Эти два инструмента также могут помочь при создании карты. С помощью кнопки “Пробки” вы можете включить отображение дорог, где есть пробки. Для больших городов это очень важный пункт.

Слои же отвечают за тип карты. Например, на моих скриншотах стоит стандартный рисованный вариант. Если он вам не нравится, то вы можете выбрать спутник (думаю, не надо объяснять, что это вид со спутника) и гибрид. Последний представляет собой смесь рисованного варианта и спутника (грубо говоря: спутник с отметками).

В заключение

Наличие на веб-странице интерактивной карты — хороший способ показать заботу о клиенте. Также ее можно использовать в любых других целях для собственного удобства. При помощи этой статьи вы смогли узнать, как поставить метку на карте «Яндекс», и в дальнейшем вы избежите проблем с указанием расположения вашей организации и схемы проезда к ней.

Яндекс Карты работают с 2004 года и за этот срок превратились в по-настоящему функциональный картографический сервис, который позволяет:

Яндекс Карты предоставляют такие же возможности как и Google Maps, последний имеет немного расширенный функционал, но это такие мелочи, вроде добавления видео к меткам, которые не влияют на главную задачу — отмечать места и маршруты на карте.