Не могу добавить карту в яндекс станции

Обновлено: 06.07.2024

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

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

Мы получили код, теперь нам нужно перенести его на наш веб-ресурс. Для размещения подходит любое место, главное, чтобы размер подходил. Если вы используете визуальные конструкторы или редакторы, не забудьте переключиться в текстовый режим (HTML) при вставке кода. Нравится:

Отправка на телефон

Код карты для вставки на сайт

Наша карта готова и теперь нам нужно получить ее код для встраивания на сайт, Яндекс позволяет:

Выбор между ними отобразится сразу после сохранения.

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

На этом этапе можно вернуться к редактированию карты; в левой верхней части окна есть соответствующая надпись со стрелкой.

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

Карта, которую я сделал

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

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

Кнопка в правом верхнем углу в виде двух расходящихся в разные стороны стрелок позволяет развернуть карту на весь экран. Теперь о плагинах.

Как добавить карту на сайт или на страницу контакты

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

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

Обычно карта публикуется на сайте:

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

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

Давайте посмотрим, как вставить карту на сайт WordPress на страницу контактов. Мы уже написали наш адрес и номер телефона на этой странице, и карта будет помещена под всем содержимым.

Затем находим нашу страницу «Контакты» и выбираем «Изменить». Измените редактор с «Визуального» режима на «Текстовый». В конструкторе карты выберите код iframe и скопируйте его:

Внизу после текста введите этот код и обновите страницу.

Теперь наша карта на сайте:

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

Это интересно: виджет обратного звонка для сайта

Как создать карту Яндекс в конструкторе

Чтобы встроить карту Яндекса, вам необходимо:

Создайте карту в конструкторе;
Получить код карты;
Вставьте код на сайт (подходит для сайтов на любой CMS).

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

Попробуем создать карту. Рассмотрим пример: ваш офис находится в 10 минутах ходьбы от метро. Вы хотите показать на карте маршрут от метро до офиса.

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

Затем вы начинаете редактировать карту. На карте вы можете:

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

Как нарисовать схему проезда на Яндекс.Картах

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

Тогда предлагаю поставить еще одну табличку с указанием офиса. Выберите инструмент «Тег» и поставьте отметку, просто щелкнув мышью в нужном месте. Затем установим метку: напишем описание, выберем цвет и тип.

Нажмите «Сохранить и продолжить».

Далее указываем тип карты:

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

Лучше, конечно, использовать интерактивную карту.

Яндекс.Карта с несколькими адресами

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

Точно так же создаем новую карту, называем и пишем описание. Затем выберите инструмент «Места». Ставим отметку в нужном месте и ставим.

Все, карта готова. Его можно сохранить и разместить на сайте. Даже если вы не можете сделать это сейчас по какой-то причине, вы всегда найдете готовые карты в списке карт:

Это интересно: зачем нужны Яндекс.Коллекции

Для чего это нужно?

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

Яндекс.Карты, Google Maps и другие конструкторы

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

Yandex.Maps

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

На карте можно нарисовать:

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

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

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

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

Goolge Maps

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

Этот конструктор позволяет добавлять:

до 10 000 линий, форм или мест;

до 50 000 точек (в линиях и формах);

до 20 000 ячеек таблицы данных.

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

С помощью этого конструктора, как и в случае с Яндексом, вы можете добавить на свой сайт интерактивную карту Google Map, что будет очень удобно для любого потенциального покупателя или вашего друга.

Mapbox

Конструктор карт Mapbox идеально подходит для тех, кто хочет добавить интерактивную карту на свой сайт за пределами России и свободно говорит по-английски. У нее тоже есть свои достоинства и недостатки, о которых стоит написать отдельную статью, но в первую очередь это простота использования и создания этой карты. Создатели карты и сам строитель создали подробные инструкции по каждому из действий.

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

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

Snazzy Maps

Zeemaps

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

Вариант 1: Как сделать схему проезда

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

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

Внизу экрана появится блок. В пустом поле введите описание предмета. Этот текст будет виден, когда вы щелкните пункт назначения на карте. Затем нажмите кнопку «Готово».

Блок слева укажет расстояние от одной точки до другой.

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

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

В левом блоке выберите действие, которое нужно выполнить с карточкой: «Вставить на сайт» или «Распечатать». Также здесь можно получить код для встраивания, ссылку на созданный объект или изменить тип карты.

Если вам нужно экспортировать готовую карту маршрута, нажмите кнопку «Экспорт».

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

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

Вариант 2: С несколькими точками

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

Устанавливаем объект в точное место на карте. Для этого увеличьте его, чтобы были видны номера домов. Аналогичным образом отметьте второй объект на карте.

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

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

Николай, проводятся различные акции с более выгодными предложениями, чем обычная заправка на АЗС (например, при оплате картами MasterCard предоставлялась цистерна на пользователя в 159 литров, где с каждого литра была скидка 2 руб.). Также бывают скидки при заправке (на первую заправку 10%) и промокоды (пока что закончились).

Здравствуйте не могу добавить карту лояльности шелл

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

Николай, функционал добавления карт лояльности АЗС на доработке сейчас. Те, что ранее добавлены действуют штатно, но лучше их не удалять.

функционал добавления карт лояльности АЗС на доработке сейчас.

Юрий Екимов

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

Guest Star

Разобрался. Нужно вводить цифры с обратной стороны карты.

Здравствуйте. Не могу ввести карту лояльности Лукойл. Заправка зелёная, но карта не привязывается. г. Новокузнецк

Небольшой ликбез по добавлению карты лояльности (при условии, что конкретная АЗС есть в списке доступных сетей заправок) в приложении «Яндекс Навигатор».
Для того, чтобы появилась возможность добавить бонусную карту в данном приложении, необходимо в настройках смартфона предоставить постоянный («разрешить всегда») доступ «Яндекс Навигатору» к местоположению (при варианте «разрешено только при использовании» не будет возможности добавить карту лояльности).
Подъехать к АЗС (действует в радиусе нескольких десятков километров), после чего открыть «Яндекс Навигатор» (возможно потребуется нажать стрелку в правом нижнем углу приложения) и перейти в раздел «Скидки и бонусы».
Появится пункт для добавления бонусных карт актуальных для вас.
После можно снова вернуть доступ к местоположению в режим «разрешено только при использовании».

Алексей, все верно. Так сейчас и действует добавление бОльшей части бонусных карт лояльности сетей АЗС в приложении.

Добрый вечер. Карту лояльности АЗС Трасса возможно добавить?

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

Здравствуйте. Можно ли привязать карту лояльности ОРТК? Спасибо.

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

Влад, верно, попробуйте без Гуглпей, а просто привязанной картой.

Если Гуглпей удобней, то перепривяжите карту в Гуглпей, переустановите приложение и заново войдит под своим аккаунтом Я.Заправки. И когда будет оплачивать следующую заправку сети БН, то выберите способ оплаты Гуглпей (перед этим на всякий случай привяжите карту к аккаунту).

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

Кому и зачем нужны карты на сайте

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

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

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

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

А еще карты нужны всем коммерческим сайтам. Дело в ранжировании в поисковых системах — наличие карты повышает шанс попасть в топ, хоть и ненамного.

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

Какие сложности могут быть при добавлении «Яндекс.Карт» на сайт

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

Некорректная работа «Яндекс.Карт». Это может произойти, если не использовать специальный ключ. Получить его можно в кабинете разработчика «Яндекса». Зайти в него могут все, у кого есть аккаунт на «Яндексе».

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

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

Инструкция, как добавить «Яндекс.Карту» на сайт

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

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

Есть два способа сделать это: через HTML-код и плагин. Плагином проще: устанавливаете YaMaps, делаете ключ и вводите его в настройках. А потом добавляете карту в любом месте страницы. Вот видео, в котором пошагово показан процесс:

Сначала нажимаете сюда, чтобы открыть всплывающее окно с кодами Потом копируете виджет с картой

Также можно копировать код в личном кабинете «Яндекс.Справочника», в разделе «Карта на сайт».

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

Выбираете адрес, задаете название и сохраняете объект

Если захотите, можете использовать дополнительные инструменты — например, «Линии». Ими можно отметить путь до вашей компании от ближайшей станции метро или другого объекта. Также на карту можно добавить многоугольники и другие метки.

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

Выбираете тип карты, регулируете масштаб и выбираете растягивание по ширине, если надо

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

Вставлять полученный HTML-код нужно на сайте. Заходите в административную панель, переходите на страницу контактов и выбираете режим отображения «Редактор кода».

Нажмите сюда, чтобы попасть на страницу с HTML-кодом

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

Как добавить карту на сайт на WIX

Вот инструкция от WIX. Если коротко, подобный функционал уже предусмотрен в конструкторе. Чтобы добавить карту на сайт, нужно:

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

Сохраняете изменения, проверяете работоспособность карты — и все.

Как добавить карту на сайт на HTML

Сайты на чистом HTML уже почти не делают. Но если у вас такой, то сначала создайте карту в «Конструкторе» или скопируйте код с личного кабинета «Справочника». А потом просто вставьте код в нужное место страницы, как в случае с добавлением на WordPress.

Как добавить карту на сайт на Bitrix24

Создаете карту в «Конструкторе» или копируете уже готовый код и идете в конструктор сайта от Bitrix24. Заходите на нужную вам страницу и добавляете блок. В списке стандартных блоков выберите HTML и введите в появившемся окне скопированный код.

Укажите код в открывшемся окне

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

Можно добавить карту и как виджет, но только Google Maps. Вот инструкция от Bitrix24, как работать с картами от Google.

Как добавить карту на сайт на Tilda

Tilda работает и с «Яндекс.Картами», и с Google Maps. Вот пошаговая инструкция по добавлению карты. Если коротко, то:

Добавляете блок T143 из категории «Другое» или блоки CN401, CN402, CN402A, CN403, CN404 из категории «Контакты».
В редактировании меняете масштаб, добавляете отметки с помощью адреса.
Сохраняете изменения и проверяете, как все работает.

Подробно процесс показан в отдельном видео:

В других CMS и на конструкторах сайтов процесс схож — можно или установить плагин, или работать с HTML-кодом, или использовать специальные виджеты.

А вы хоть раз использовали карты на сайтах сами? Поделитесь мнением в комментариях!