Как вставить на сайт Яндекс-карту #50901
Введите в строку «Адрес или объект» — адрес месторасположения.
Затем нажмите на кнопку «Найти».
Шаг 3
Из предложенного списка результатов поиска выберите нужный Вам адрес.
Шаг 4
На карте отобразится всплывающее окно, в котором можно:
- Задать подпись для метки на карте;
- Указать описание для точки на карте (по умолчанию — адрес);
- Подобрать цвет метки;
- Выбрать тип метки;
После указания всех настроек для метки нажмите «Готово».
Обратите внимание!
- Вы также можете перенести метку вручную в нужное Вам место карты (например, если Вы хотите сделать акцент на каком-либо конкретном корпусе здания или явно указать, где находится вход). Для этого просто закройте окно настроек описания, цвета и пр. и перетащите метку на карте, кликнув на нее и зажав с помощью левой кнопки мыши. Вернуться после этого к настройкам описания, цвета и пр. Вы можете, нажав на метку на карте.
Шаг 5
Если Вам необходимо оставить еще одну точку на карте, нажмите на кнопку «Метки».
И кликните в том месте карты, где Вам необходима дополнительная метка — отобразится еще одно окно с настройками метки.
Шаг 6
Затем в левой части экрана укажите название и описание карты (если это необходимо).
После чего — нажмите «Сохранить и продолжить».
Шаг 7
Теперь на карте Вы можете:
- Изменить размер карты, зажав и перетащив один из квадратных маркеров в углах и на сторонах карты;
- Изменить масштаб карты с помощью бегунка;
- Переместить область карты.
Также в меню слева Вы можете:
- Выбрать тип карты: интерактивная, статическая или печатная;
- Задать размер карты в пикселах.
- Растянуть карту на 100%.
Шаг 8
После произведения всех настроек нажмите «Получить код карты» и скопируйте код — его будет необходимо вставить на стороне системы управления.
Шаг 9
Зайдите в редактор страницы и нажмите на кнопку «HTML».
- Например, если Вы хотите разместить карту на отдельной странице, просто перейдите к редактированию нужной текстовой страницы и в текстовом редакторе данной страницы нажмите на кнопку «HTML» (см. скриншот ниже). Также Вы можете разместить карту в общих блоках.
Разместите код карты ниже всего кода страницы и нажмите «Ок» и «Сохранить изменения».
Обратите внимание!
- Для корректного отображения карты Вам может потребоваться указать в настройках ключ API. О том, что это такое, как его получить и где указывать — читайте в инструкции по ссылке.
Мы создаём веб-сайты для России и зарубежных рынков с 1997 года. Наша команда – более пятисот сотрудников в разных странах и городах.
Понимание потребностей онлайн-бизнеса, опыт взаимодействия с тысячами клиентов, высокая квалификация персонала, собственные «ноу-хау» и хороший объём заказов позволяют веб-студии Мегагрупп.ру предлагать услуги высокого качества по удивительно низким и «вкусным» ценам.
Как добавить организацию в Яндекс.Карты и сделать карту на сайте
Эта статья о базовых возможностях Яндекс.Карт будет полезна компаниям, которые продают товары и оказывают услуги офлайн, физически общаясь с клиентами: магазины, банки, аптеки, детские и образовательные центры, клубы, кафе, мастерские, агентства недвижимости, нотариальные конторы, фитнес-залы и т. д.
Если вашей компании нет на Яндекс.Картах либо есть, но »для галочки», эта статья расскажет, как и зачем можно использовать Карты — это легче, чем копаться в Яндекс.Справочнике.
Статья не будет интересна компаниям, которые решают транспортные и логистические задачи, оказывают услуги доставки и перевозки. Возможно, вас заинтересуют такие продукты, как Яндекс.Маршрутизация и Матрица расстояний, но они — за рамками этой статьи.
Из этой статьи вы узнаете:
Зачем добавлять компанию в Яндекс.Карты
Наличие организации на Картах помогает людям узнать о вас, влияет на доверие к бренду, делает аудиторию лояльнее: найти вашу компанию на Карте и удобно до нее добраться.
Благодаря рубрикам в Яндекс.Картах, человеку не нужно знать точное название компании, он может найти нужную организацию по общему запросу: »где поесть», »детский центр», »магазин одежды» и т. д.
Таким образом, наличие компании на Картах помогает привлекать и случайных клиентов. Например, к нам в Банк часто заходят прохожие »из Карт и навигатора», чтобы поменять валюту.
По запросам о деятельности (»банк», »обмен валюты») приложения »Яндекс.Навигатор» и »Яндекс.Карты» находят вашу компанию на карте и прокладывают маршрут
Базовые возможности Яндекс.Карт для бизнеса
В Яндекс.Картах есть собственный личный кабинет, в котором вы управляете информацией о ваших организациях. Рассмотрим его основные возможности: добавление компании, управление аккаунтом, просмотр статистики и реклама.
Как добавить компанию на Яндекс.Карту через Справочник
Авторизуйтесь в системе, используя логин и пароль корпоративной Яндекс.Почты. Затем перейдите на страницу создания компании. Введите название и начните заполнять поле »Адрес».
Форма добавления организации: название и адрес
Яндекс автоматически подтянет корректный формат адреса и подставит геометку. Перетяните метку туда, где находится вход в вашу компанию.
Заполните контактные данные: номера телефонов и адреса в интернете. Обратите внимание: номер, по которому с вами будет связываться представитель Яндекса, должен стоять на первом месте.
Укажите время работы. Если вы работаете без перерыва, оставьте значение 00:00 — 00:00. Вы можете установить несколько рабочих интервалов для отдельных дней недели.
Добавление организации: телефон, сайт и режим работы
Укажите специфику вашей организации: начните заполнять поле, и Яндекс предложит вам варианты.
Виды деятельности компании. Можно указать не более трех видов
После заполнения в течение 10 минут (в загруженное время — до часа) с вами свяжется представитель Яндекса, чтобы подтвердить информацию.
Компания добавлена! На Яндекс картах она появится в ближайшее время — от нескольких минут до 2 — 3 дней.
Проверьте, как отображается метка вашей организации на Яндекс.Карте
Как добавить филиалы и объединить их в одну сеть
Если у вас есть филиалы, добавьте каждый из них как отдельную организацию, а потом отправьте в Яндекс форму, чтобы объединить их в сеть.
Форма для объединения филиалов в сеть
В Яндексе есть ограничения по рубрикам, которые не могут быть объединены в единую сеть. К ним относятся »Банки», »Банкоматы» и »Терминалы», но есть и другие ограничения. В Банке SIAB каждый филиал заведен как отдельная организация.
Если в вашей компании более 30 филиалов, вы можете стать партнером Справочника, и данные о вашей компании будут обновляться автоматически во всех сервисах Яндекса.
Отзывы и рейтинг
Яндекс собирает и модерирует отзывы об организациях, которые влияют на рейтинг вашей компании. Владельцы компании могут отвечать на отзывы пользователей — это тоже добавит вам очков в рейтинге.
Отзывы и рейтинг на Яндекс.Картах
Чтобы стать »владельцем организации» для Яндекс.Карт, нужно подтвердить свои права. После этого вы сможете отвечать на отзывы или, если они некорректны, жаловаться на них, тогда модераторы их удалят.
Чтобы не пропустить отзыв, настройте уведомления на email. Помните, что пользователи не могут отвечать вам, поэтому Яндекс рекомендует оставлять свои контакты и приглашать клиентов к общению за рамками отзывов.
Если вы подтвердите права на организацию, заполните профиль и загрузите не менее трех фотографий, то получите метку »Информацию подтверждена владельцем». Метка видна пользователям и повышает доверие к компании. Кроме того, вы сможете управлять информацией о вашей организации, которую добавляют люди.
Статистика Яндекс.Карт
Статистика помогает отслеживать эффективность вашего присутствия в Яндекс.Картах. Данные статистики представлены в следующих видах:
Статистика Банка SIAB на Яндекс.Картах. Кликабельность по нашей компании — 8,9%
- тепловая карта запросов по вашей рубрике: в каких районах города спрашивают о вашей сфере деятельности. На этой же карте отражено местоположение ваших конкурентов по рубрике;
- график показов и кликов — показывает динамику интереса к вашей организации, вашу популярность среди пользователей. Если кликов больше, чем показов — вы на правильном пути;
- диаграммы демографических данных — показывает основную информацию о вашей аудитории: пол, возраст, тип устройства.
Информация о целевой аудитории. Абсолютное большинство наших клиентов используют десктопы, а не мобильные устройства: условия банков изучают и сравнивают, а не принимают решение на ходу
Реклама на Картах: приоритетное размещение и реклама в Яндекс.Навигаторе
На Яндекс.Картах существует два рекламных продукта: приоритетное размещение и реклама в навигаторе.
Оба сервиса создают для вашей организации особую метку на карте, отличающуюся от других, позволяют добавить логотип, фотографии, витрины товаров и рекламные объявления.
Для обоих видов рекламы собирается статистика, которая помогает отслеживать эффективность.
Приоритетное размещение
Цена приоритетного размещения рассчитывается по формуле, в которой есть базовая стоимость 1 000 рублей и коэффициенты »город» и »рубрика», увеличивающие итоговую стоимость рекламы. Стоимость приоритетного размещения не зависит от показов или кликов, а оплачивается на период от 90 дней. Длительность периода размещения рекламы тоже влияет на цену.
Клуб »Папанин» пользуется приоритетным размещением: у него зеленая метка и первая позиция в выдаче по запросу »Где поесть»
Заказать приоритетное размещение можно в кабинете с вашими организациями.
Реклама в Яндекс.Навигаторе
Реклама в Яндекс.Навигаторе оплачивается за показы. На 29 августа 2018 стоимость рекламы в Навигаторе составляет 59 рублей с НДС за 1 000 показов во всех рубриках, кроме автосалонов и недвижимости — там цена выше: 118 рублей и 177 рублей с НДС соответственно.
Единовременно в Навигаторе может работать только одна рекламная кампания, причем ее нельзя редактировать. Если нужно внести правки, придется создать новую рекламную кампанию и запустить ее вместо старой.
Создать и оплатить рекламную кампанию в Яндекс.Навигаторе можно здесь.
Реклама в Яндекс.Картах дешевле и проще, чем контекстная реклама в Яндекс.Директе. Для компаний, которые продают товары и предоставляют услуги офлайн, это актуальный способ привлечь к себе клиентов.
Как добавить карту на сайт
Есть несколько способов добавить карту на сайт: виджет и конструктор карт. Еще на сайте — везде, где есть упоминание адреса — можно разместить геоссылку.
Виджет
Зайдите на Карты и найдите вашу компанию по адресу. Вы можете проложить маршрут от метро, указать филиалы организации. Нажмите »Поделиться». Скопируйте код для сайта и добавьте его на страницу »Контакты» на вашем сайте.
Пример карты с проложенным маршрутом. Нажмите на кнопку меню »=» и выберите »Поделиться»
Виджет с картой на сайте Банка SIAB
Конструктор карт
Конструктор карт — это визуальный редактор, в котором вы можете создать свою карту для размещения на сайте и в социальных сетях. В отличие от возможностей виджета, в Конструкторе можно создать несколько объектов и проложить маршрут между ними.
Путь в головной офис Банка от метро »Московские ворота» в Конструкторе Яндекс.Карт
В Конструкторе карт объекты задаются с помощью меток: описание, цвет и иконку можно выбрать. С помощью »Многоугольников» выделяйте области и подсвечивайте их разными цветами. Можно включить режим »Пробки» и выбрать слои: схему, спутник или гибрид. Выбранный вариант будет отображаться на вашем сайте в актуальном состоянии.
Такие карты можно создавать не только для сайта, но и для других рабочих и личных целей. Допустим, вы выступаете на конференции и делаете об этом новость. Покажите с помощью карты в Конструкторе, как добраться до места проведения мероприятия, . Если вы проводите экскурсии — создайте маршрут и расставьте метки для интересных мест. Ставите задачу найти офис или другое коммерческое помещение — очертите области поиска в карте и снабдите ей своего менеджера по развитию.
В Конструкторе можно сохранять объекты, чтобы использовать их регулярно для разных карт.
Сохраните готовую карту и выберите тип применения: интерактивная или для печати. Настройте размеры карты (в пикселях) или установите флажок »Растянуть по ширине», чтобы карта отображалась по ширине экрана. Яндекс сгенерирует ссылку — ее можно использовать в социальных сетях — и предложит получить код для размещения карты на сайте.
Сохранение карты из Конструктора, управление размерами, ссылка и код
Все созданные вами карты сохраняются в вашем кабинете в Конструкторе. Если вам понадобится изменить карту — она будет доступна для редактирования в Конструкторе. Изменения отобразятся на сайте автоматически, менять код не придется.
Геоссылка
Геоссылка — это выделенный текст определенного типа, при клике на который появляется всплывающее окно с картой. Ее уместно использовать на разных страницах сайта, а не только в Контактах.
Пример геоссылки с адресом. Кнопка »Подробнее о месте» адресует пользователя к Яндекс.Картам, »Как добраться» — к Картам с включенной опцией построения маршрута
Геоссылка создается с помощью специальных тегов в коде сайта, но обернуть ею можно только:
- адрес: Черниговская, д. 8;
- название компании: Банк SIAB;
- географические координаты: [30.320917,59.893917];
- топоним: »река Нева».
Если попробовать сделать геоссылку на текст другой категории, карта не отобразится и выдаст ошибку »Ничего не найдено».
Шпаргалка по Яндекс.Картам
-
через Яндекс.Справочник и заполните профиль: добавьте логотип, фотографии, опишите сферу деятельности, укажите свой график работы, номера телефонов и e-mail;
- Пройдите процедуру верификации, чтобы получить метку »Информация подтверждена владельцем» и возможность отвечать на отзывы пользователей о вашей организации;
- Настройте уведомления, чтобы оперативно реагировать на отзывы и повышать рейтинг. Помните, что пользователи не могут отвечать вам в отзывах
- Если у вас есть филиалы, объедините их в сеть. Если у вас 30 и более филиалов, станьте партнером Справочника
- Используйте рекламу в Яндекс.Картах: приоритетное размещение в Яндекс.Картах и рекламу в Яндекс.Навигаторе;
- Анализируйте эффективность вашего присутствия в Картах и применения рекламных продуктов: приоритетного размещения и рекламы в Навигаторе с помощью сервисов статистики;
- Используйте виджет или Конструктор карт для размещения карты на страницах вашего сайта: прокладывайте маршрут до вашей компании, ставьте метки ориентиров и филиалов;
- Поставьте геоссылки на адреса, название вашей компании на разных страницах вашего сайта.
© 1995–2023, ПАО БАНК «СИАБ». Универсальная лицензия № 3245 от 09.11.2022.
196 084, г. Санкт-Петербург, Черниговская ул.,
д.8, лит. А, пом. 1-Н
Как добавить карту Google, Яндекс и 2ГИС на сайт: просто по шагам
Если у вашей компании есть адрес, куда приходят клиенты, вы можете лишний раз позаботиться о них. Избавьте пользователей от необходимости копировать адрес, открывать карты и искать, где вы находитесь.
На сайт можно вставить карту Google, Яндекс или 2ГИС с нужной меткой, чтобы пользователи могли сразу понять, куда им предстоит ехать. И дольше оставались на сайте, рассматривая карту и увеличивая время визита, что важно для поведенческих факторов и SEO. ��
В статье:
- Как создать карту для сайта:
Выбрать можно любую карту, какая вам больше нравится.
Как вставить Яндекс карту на сайт
Первый вариант: встроить Карту с уже существующей меткой
Откройте Яндекс.Карты, найдите компанию и скопируйте код для вставки:
Карта с меткой и информацией из Яндекс.Карт будет выглядеть так:
Организация на карте Яндекса
Найдите нужный адрес.
В правом верхнем углу нажмите на кнопку с тремя точками, выберите Поделиться.
Выберите виджет с картой и скопируйте код для вставки. Можете сначала включить предпросмотр, чтобы увидеть, как она будет выглядеть.
Второй вариант: создать свою метку
Карта, которую мы сделали, выглядит так: у нее есть маркер с иконкой, которую мы выбрали, и отображается линия с пояснением для удобства.
Карта, созданная в конструкторе Яндекса
Создание карты пошагово:
Найдите адрес, выберите цвет и вид маркера.
Сохраните метку и добавьте еще адреса, если вы хотите отметить несколько филиалов.
При желании добавьте линии и нарисуйте фигуры, чтобы сделать маршрут понятнее. Линии можно изменять по изгибам улиц.
Интерактивная полезнее, ее можно двигать и масштабировать. Для вставки на сайт советуем ее.
Статическая будет выглядеть как картинка, ее можно распечатывать.
Задайте размер карты: можно ввести пиксели в окошке размера или растянуть карту вручную.
Если выбрать «Растянуть по ширине», у карты появится параметр width = 100%, то есть потом при вставке карты на сайт она займет всю ширину блока.
У кода iframe есть ограничения: пользователь не сможет переключать виды карты, то есть доступен только вид Схема, и она будет отображаться только на крупных масштабах.
Код JavaScript можно модифицировать с помощью API: добавить панораму, маршруты, поиск. Чтобы они появились, нужно получить API-ключ в Кабинете разработчика для продукта «JavaScript API и HTTP Геокодер» и добавить его в код.
Если вам нужно поменять язык топонимов, измените параметр lang в скопированном коде. Сейчас там lang=ru_RU, но можно поставить другой язык с помощью кода языка в формате ISO 639-1 и кода региона в формате ISO 3166-1: uk_UA — украинский для Украины, tr_TR — турецкий для Турции. Для пользователей из России и Украины регион и язык подстроится под настройки паспорта пользователя.
Вставьте код с картой Яндекса на сайт через редактор страницы.
Как вставить Google карту на сайт
Первый вариант: вставить карту из Google Maps с существующей меткой
Откройте Google Maps, найдите компанию и скопируйте код для вставки:
Карта будет выглядеть так:
Найдите компанию на картах, нажмите на «Поделиться».
Нажмите «Встраивание карт» и выберите размер из предложенных или выберите «Другой размер» и укажите свои параметры.
Скопируйте получившийся HTML-код и вставьте его в код своего сайта в то место, где вы хотите разместить карту.
Второй вариант: создать свою метку в Google Maps
Так выглядит созданная нами метка в режиме предпросмотра: на ней есть описание, которое мы ввели, фотография и информация из Google Maps.
Карта с меткой компании
Пошаговое создание метки на Google картах:
Введите адрес или название компании.
Укажите название, добавьте описание организации, фотографии, выберите цвет и стиль значка.
Созданную карту вы можете посмотреть в Предпросмотре. Нажмите кнопку с тремя вертикальными точками и выберите «Добавить на сайт».
Скопируйте полученный код и вставьте его в код страницы, куда вы хотите добавить карту.
Как вставить карту 2ГИС на сайт
Встроить карту через API
Установить интерактивную карту 2ГИС можно через JS API — это версия API для простых задач.
Карта 2ГИС
Перейдите на страницу и выберите город.
Найдите компанию по названию.
Установите нужный размер карты в правом нижнем углу.
Нажмите «Далее», прочитайте Лицензионное соглашение и примите условия.
Нажмите «Получить код» и скопируйте его для вставки на сайт.
Создать в Конструкторе карту со своими метками
В 2ГИС есть бесплатный Конструктор карт, с его помощью можно создать карту со своей разметкой — добавить метки, описания, отобразить маршруты, графически выделить области.
Пошагово как сделать карту в Конструкторе 2ГИС:
Введите адрес и найдите нужное здание.
Настройте цвет метки, введите название.
Добавьте описание, можно вставить картинку с помощью разметки HTML или Markdown.
С помощью линий и выделения областей помогите клиентам сориентироваться по маршруту.
Выберите нужный размер карты.
Скопируйте код для вставки на сайт или в мобильное приложение.
Как настроить отложенную загрузку карты на сайте
Карты громоздкие, они влияют на загрузку сайта и могут тормозить отображение страницы.
Проверить скорость загрузки конкретной страницы можно в этом инструменте. Он бесплатно измеряет скорость загрузки в соответствии с показателем Google Core Web Vitals, оценивает разные этапы загрузки и дает рекомендации:
Фрагмент проверки
Минимизировать влияние карты на скорость загрузки страницы поможет отложенная или Lazy-load загрузка.
Загрузка карты по доскроллу до нее
Если карта находится внизу страницы далеко в футере или в поп-апе, можно настроить, чтобы она загружалась не сразу при переходе на страницу, а только когда пользователь до нее доскроллит.
Пользователь Хабра iefedorov для этого советует изменить код карты, который Google предлагает вставить на сайт.
Пример исходного кода:
Его нужно изменить вот так:
Браузер будет получать src = «», когда читателю понадобится карта.
Пошаговая настройка lazy-loading карты от Максима Васяновича (MaxGraph):
Загрузка карты после наведения курсора
Другой пользователь Хабра Dionisvl предлагает такой способ оптимизировать карту Яндекса, чтобы она подгружалась только при наведении на нее курсора мыши.
При создании карты в конструкторе Яндекса с использованием API-ключа получился примерно такой код:
На сайте нужно написать контейнер для блока с картой:
Также нужны стили для статичной картинки, подойдет скриншот.
Нужен JavaScript-код, который будет отслеживать события — наведение курсора мыши на карту или тап по карте на экране смартфона — и подменять статичное изображение на интерактивную карту:
Готово, теперь карта должна загружаться по наведении курсора или тапа на экран, если пользователь смотрит сайт с мобильного.
Проверить весь сайт на ошибки поможет сервис Анализ сайта: у него есть 70 тестов для анализа ваших и конкурентных проектов. Можно проверить не только главную, но и внутренние страницы. Оценит оптимизацию контента, ссылочную массу, технические параметры и другое.
Фрагмент проверки сайта
Расскажите в комментариях, как вы сделали карту для вашего сайта и как оптимизируете ее, чтобы она не сильно тормозила загрузку?
Как добавить организацию и ее адрес на Яндекс.Карты: пошаговая инструкция
В этой статье рассмотрим, что такое Яндекс.Карты и почему вашему бизнесу обязательно надо на них присутствовать. А еще расскажем, как добавить ГЕО точку вашей организации на Яндекс Карты и осуществить ее регистрацию в сервисе.
- Зачем добавляться в Яндекс.Карты
- Яндекс.Карта
- Поисковик
- Мобильные приложения Яндекс.Навигатор/Транспорт/Такси
- Авторизуйтесь в Яндекс.Бизнес
- Добавьте организацию в Яндекс.Справочник
- Заполняем раздел «Как называется ваша компания?»
- Заполняем раздел «Чем занимается ваша компания?»
- Заполняем раздел «Где находится офис?»
- Заполняем раздел «Как с вами связаться?»
- Заполняем раздел «Основные»
- Заполняем раздел «Особенности»
- Заполняем раздел «Реквизиты»
- Фотография в карточке компании
- Как удалить фото в Справочнике
- Подраздел «Основная»
- Подраздел «На картах»
- Подраздел «Геовизор»
Зачем добавляться в Яндекс.Карты
Каждый из нас хоть раз, но пользоваться Яндекс.Картами: при поиске нужного места, при вызове такси, при ожидании автобуса на остановке. Чтобы людям было проще добраться до вашего офлайн бизнеса, добавьте его на Яндекс.Карты.
Согласно данным Яндекс.Радар, ежедневно поисково-информационными картографическими сервисами Яндекса пользуется 7,4 млн человек, Не теряйте этих потенциальных клиентов!
Яндекс.Карта
Пользователи Яндекс.Карты – юзеры мобильного приложения и десктопной версии. На площадке можно разместить информацию об организации, даже если у нее нет официального сайта. Введите любой запрос, и сервис предоставит результаты соответствующие ему.
К примеру, вы ищите кафе для вечерних посиделок, делаете запрос в Я.Картах «кафе» и нажимаете поиск. По итогу вы увидите результаты удовлетворяющие запрос. Нужные вам места будут отмечены синими точками на карте и приведены списком под поисковой строкой.
Поисковик
Введите любой запрос в поисковой строке Яндекса и либо над результатами выдачи, либо справа подгрузится – «Колдунчик» или «Адресный сниппет». Это или карточка конкретной организации, или перечень карточек. В SERP показываются те организации, которые подошли под ваш запрос.
Также конкретно под запрос предлагаются фильтры. В нашем случае фильтры связанные с едой: рядом со мной, кухня, рейтинг, еда в машину и другие.
Мобильные приложения Яндекс.Навигатор/Транспорт/Такси
Данные сервисы позволяют добраться до финальной точки, не зная точного адреса. Пользователь может ввести точный адрес организации: БЦ, остановка или конкретный запрос. И добраться до этих адресов.