Онлайн-карты. Как вставить карту проезда из Google Maps (Yandex Maps) Html код яндекс карты

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

Есть, по меньшей мере три провайдера, обеспечивающие такую возможность: Яндекс, Google и 2ГИС.

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

При этом данная инструкция подходит не только для Вордпресс, а для любого сайта (хоть для “голого” html), поскольку код для вставки универсален.

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

1. Предварительно карту нужно создать. Для этого перейдите по ссылке на страницу конструктора – https://tech.yandex.ru/maps/tools/constructor/ . Для работы в конструкторе у вас должен быть аккаунт в яндексе. Аккаунт у Яндекса единый для всех сервисов: почта, вебмастер, деньги и т.д. Если такого у вас еще нет, необходимо зарегистрироваться.

2. Указываем в строке поиска (выделена на рисунке красным) нужный вам адрес (регион, город, улица, дом). Получаем карту с отметкой и координатами нужного вам адреса.

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

4. Затем указываем название и жмем кнопку “Сохранить и получить код” в нижней части экрана.

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

Если вы добавляете код на страницу в административной панели WordPress, то предварительно переключите режим редактирования страницы на “Текст”.

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

Размер отображения определяется параметрами width и height. При необходимости можете поменять эти значения в полученном коде. Чтобы карта яндекс растягивалась на всю ширину экрана укажите значение width=-1.

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

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

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

Существует несколько способов, для того, чтобы вставить гугл карты на свой сайт, и не важно, работает сайт под CMS WordPress или просто на HTML.

Способ № 1.

Вначале сервис вам скажет, что у вас нет карт. Что ж, нужно создать. Для этого, необходимо нажать на значок «+»

Здесь есть ряд дополнительных элементов: выбрать объекты, добавить маркер, нарисовать линию, добавить маршрут, измерить расстояние или площадь.

Вставив маркер в нужное место, можно вставить название места и его описание.

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

Добавить название и описание карты.

Настроить доступ

И теперь, можно вставить полученный код на сайт, при этом, можно сразу изменить размеры.

И вот что в результате получится

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

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

Зачем добавлять компанию на Яндекс Карты?

Какую пользу получает компания от метки на карте?

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

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

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

Что такое Яндекс Справочник?

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

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

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

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

Убедившись в том, что названия вашего учреждения нет в базе, переходите к процессу самого добавления:

Что запрещено добавлять?

Также есть запреты на добавления определенных объектов на карту. Отказано в регистрации на Яндекс Картах будет следующим организациям:

• Незаконно действующие компании, предлагающие запрещенные услуги или товары, начиная от оружия и наркотиков и заканчивая незаконными полисами техосмотра и водительскими правами.
• Учреждения, занимающиеся деятельностью, подобной финансовым пирамидам.
• Организации, основным направлением которых является сетевой маркетинг.
• СМС-Рассылки.

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

Добавление фотографий компании на Карты Яндекса

Если вы решили добавить магазин в Яндекс Карты, помимо вышеперечисленных действий, необходимо также позаботиться о создании галереи фотографий. Как это сделать?

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

Пользовательские требования к фотографиям компаний

Загружать можно только файлы, имеющие формат jpg, png. Больше 10 МБ файл весить не может. Не допускаются к размещению следующие фотографии:

• Дубликаты;
• Содержащие водные знаки, перекрывающие просмотр основного изображения;
• Не соответствующие самой организации;
• Фотографии плохого качества (размытые, поврежденные, переснятые с экрана монитора и т. д.);
• Имеющие в себе скрытые ссылки;
• Изображения запрещенных товаров (оружие, наркотики и др.);
• Фото эротического характера;
• Фотографии с данными о тех услугах или работах, которые запрещены российским законодательством;
• Коллажи;
• Фото с наличием провокационных сцен, жестокости, насилия, призывам к преступлениям.

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

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

Управление отзывами об организации на Яндекс Картах

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

Большинство из них оставляют пользователи сервиса, часть предоставляется сайтами-партнерами Яндекс Справочника. Каждый отзыв добавляется на сервис только после успешного прохождения модерации. Оставить его можно только один раз. Далее разрешена только редактура. Пишется только на русском языке, другие не рассматриваются. Не публикуют следующие отзывы:

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

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

В этой статье мы расскажем для чего и как вставить карту Яндекса на сайт.

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

Для чего нужна карта на сайте?

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

• Обратите особое внимание: наличие карты в значительной степени повышает степень доверия к вашей ресурсу. Визуальное отображение месторасположения компании, офиса, магазина, подсознательно раскрепощает потенциального клиента (избавляет от опасений, вроде: "а вдруг обманут и исчезнут?"), а значит увеличивает вероятность того, что посетитель сайта станет реальным вашим клиентом.
• Наличие интерактивной карты (в отличие от карты-изображения) позволяет пользователю лучше сориентироваться на местности, посмотреть ближайшее метро, автомобилистам - проверить маршрут на дальних подступах к объекту. Кроме того, интерактивная карта позволяет посмотреть на местность из космоса.
• Ну, и конечно же, карта на сайте нужна для того, чтобы посетители и клиенты сайта знали месторасположение вашего магазина, офиса, склада.

Как вставить карту Яндекса на сайт (пошаговая инструкция)

Следует воспользоваться конструктором API Яндекс.Карт .

В этой статье мы приводим примерную пошаговую инструкцию, которая, как мы надеемся, поможет вставить карту Яндекс на ваш сайт:

Шаг 1. Начальная настройка Яндекс карты для сайта:

• Откройте страницу конструктора Яндекс.Карт для сайта .
• Найдите на карте необходимое географическое место по адресу или вручную (с помощью масштабирования ползунком и перемещения карты мышью).
• Выберите удобный для работы масштаб. Окончательный масштаб лучше установить в конце работы. Рисовать будем метки на карте, линии (подъездные пути) и контуры зданий или территорий.
• Укажите в соответствующем поле название будущей карте.
• Перейдем к инструментарию сервиса: кнопки для рисования точек (меток на карте), линий, многоугольников (контуров) и размеров карты.

Шаг 2. Рисование на карте точек (меток):

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

Шаг 3. Настройка свойств установленной на карте метки:

• Кликаем непосредственно по нарисованной нами метке.
• В открывшемся окошке выбираем нужные нам свойства (цвет, номер метки на карте), пишем по желанию текст (в последствии текст будет виден пользователю при клике по метке).
• Любую метку можно удалить в соответствующем окошке свойств.
• Итак мы вставили на Яндекс-карте для сайта метку вашего офиса, настроили её свойства, теперь переходим к рисованию линий. К примеру, линии подъездного пути к офису.

Шаг 4. Рисование линий на карте:

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

Шаг 5. Рисование многоугольников, заполненных цветом контуров:

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

Шаг 6. Изменение размеров карты для сайта:

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

Шаг 7. Получение кода карты для сайта (Яндекс):

• Придаем карте окончательный вид, установив финальный масштаб карты и окончательную позицию (координаты).
• На этом этапе создание карты для сайта (Яндекс) можно считать законченным. Нажимаем на большую желтую кнопку "Сохранить и получить код".
• Даже после сохранения карты всегда можно вернуться к редактированию.
• Обратите внимание на то, что карта может быть не только схемой, но и фотоснимком из космоса, гибридом или элементом "Народной карты".
• Кроме того, вы вольны сделать карту интерактивной или простым изображением. Интерактивная карта интересней, функциональней, но может загружаться дольше простого изображения. Выбор за вами.
• Вставить карту Яндекса на сайт можно, разместив html-код карты в нужном вам месте страницы.

Спасибо всем читателям, заинтересовавшимся нашей пошаговой инструкцией.

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

Если вам понравилась наша инструкция, можете порекомендовать её своим друзьям и знакомым. "Социальные кнопки" находятся справа. Такова наша маленькая корысть .

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

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

ссылка_на_Яндекс_Карты " target="_blank">адрес_из_конструктора " alt="название_компании "/>

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

Советую посмотреть это видео для вдохновения:

Добавить карту на сайт: две картинки рядом (HTML / CSS)

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