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

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

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

Вот как она будет выглядеть:

Ну а теперь ближе к делу. Создать и установить на сайт динамическую карту от Яндекса довольно просто.

Для этого, в первую очередь необходимо создать учетную запись на Яндексе (если у вас её нет).

Быстрое создание Яндекс карт при помощи конструктора

Идем по адресу: yandex.ru/map-constructor (если потребуется авторизоваться — авторизовываемся там).

После этого перед вами откроется страница «Конструктор карт», в котором необходимо пройти три достаточно простых шага.

Шаг 1. «Создание»

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

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

После того как нажмете готово, можете добавить при необходимости еще объекты, в такой же последовательности

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

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

Шаг 2. «Просмотр»

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

Шаг 3. «Код для вставки»

Жмем на кнопку «Получить код карты», появиться окошко с 2 типами кода для вставки на сайт «JavaScript» и «iframe».

Рекомендую использовать JavaScript и если только он по каким-то причинам не работает выбираем iframe.

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

Остается скопировать код и затем вставить его в нужное место на сайте (например: открыть страницу «контакты» перейти в режим html редактирования и вставить код).

Использование API Яндекс.Карт на сайте

API (Application programming interface) простым языком — это контракт, который предоставляет программа или сервис. «Ко мне можно обращаться так и так, я обязуюсь делать то и это».

Хотите больше возможностей воспользуйтесь API Яндекс.Карт, о том как с ним работать смотрите в видео.

Удачи вам! Если есть у кого-нибудь какие-либо вопросы, например о том как и куда вставить данный код или прочие, задавайте их, не стесняйтесь! Я всегда рад Вам помочь.