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

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

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

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

Обычно карту на сайте размещают:

• На странице «Контакты»;
• В подвале (футере) сайта;
• Реже – на главной странице или странице «Доставка и оплата» (в основном, если речь идет о самовывозе).

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

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

Рассмотрим, как вставить карту на сайте WordPress на страницу «Контакты». У нас на этой странице уже написан наш адрес, телефон, а внизу под всем контентом будет размещаться карта.

Заходим в административную панель сайта. Переходим в раздел «Страницы»:

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

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

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

Отредактировать ширину и высоту можно прямо в коде, который дал Яндекс (теги width, height – задаем нужное числовое значение в кавычках).

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

На WordPress отредактировать футер можно через админпанель. Зайдите Внешний вид – Редактор – Подвал:

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

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

Плагины Яндекс.Карт

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

Например:

• Для 1С Битрикс: «Ваша сеть офисов на карте» и «Яндекс.Карта объектов инфоблока»;
• Для Drupal: «Geofield Yandex Maps»;
• Для WordPress: «Yandex Maps API»;
• Для Joomla!: «Яндекс.Карты для Joomla» и другие.

Полный список плагинов вы можете посмотреть в Справке Яндекса.

Как видите, сделать и встроить карту Яндекс на сайт не так и сложно, и с базовым знанием HTML это вполне можно сделать самостоятельно.

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

Другие методы прокладки маршрута

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как построить маршрут в Яндекс Навигаторе пешком и на автомобиле

При пользовании приложением нужно знать, как построить путь в Яндекс Навигаторе пешком и при движении на машине.

Общий подход по заданию пути на авто имеет такой вид:

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

При отсутствии Интернета Яндекс Навигатор продолжает указывать дорогу. Это актуально, если пользователь заранее скачал нужные карты.

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

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

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

Как установить режим пешехода

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

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

Для прокладки курса нужно:

1. Зайти в приложение и поставить на карте точку начала пути. Ее не потребуется ставить, если местоположение пешехода совпадает с этой меткой;
2. Определить точку пункта назначения. Это можно сделать на карте, ввести адрес вручную или с помощью голосового помощника. Затем кликнуть по клавише «Выбрать точку».
3. Выполнить переключение на пешеходный режим. Для этого на нижней панели есть значок с логотипом человека. Выбрать оптимальный маршрут. Программа начнет свою работу после активирования кнопки «Начать». Все, можно отправляться по маршруту.

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

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

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

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

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

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

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

Как пользоваться расчетом расстояний?

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

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

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

Как измерить прямое расстояние между двумя объектами на карте

На Google Картах можно измерить расстояние между несколькими точками, например двумя городами.

Как измерить прямое расстояние между двумя объектами на карте на компьютере

Откройте Google Карты на компьютере. Если для них включён упрощённый режим (обозначается значком молнии в нижней части экрана), то измерить расстояние нельзя.

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

Выберите «Измерить расстояние».

Укажите на карте вторую точку, нажав левую кнопку мыши. Точно так же можно добавить ещё несколько точек.

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

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

Когда закончите, нажмите на значок Закрыть.

Как измерить прямое расстояние между двумя объектами на карте на Android

Шаг 1. Добавьте стартовую точку

1. Откройте приложение «Google Карты» Google Карты на устройстве Android.
2. Коснитесь нужного места на карте и удерживайте его. Появится красный маркер.
3. Нажмите на название места в нижней части экрана.

1. Прокрутите страницу места вниз и выберите «Измерить расстояние».

Шаг 2. Добавьте остальные точки

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

1. В правом нижнем углу экрана нажмите на значок Добавить.
2. Добавьте остальные точки.

Шаг 3. Посмотрите расстояние

1. Общее расстояние в километрах или милях будет показано внизу страницы.

Необязательно: Чтобы удалить последнюю точку, нажмите Отменить. Чтобы очистить все точки, в правом верхнем углу экрана выберите Ещё → Очистить.

1. Когда закончите, нажмите на стрелку в левом верхнем углу экрана.

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

Как измерить прямое расстояние между двумя объектами на карте на iOS (iPhone или iPad)

Шаг 1. Добавьте стартовую точку

1. Откройте приложение «Google Карты» Google Карты на iPhone или iPad.
2. Коснитесь нужного места на карте и удерживайте его. Появится красный маркер.
3. Нажмите на название места в нижней части экрана.
4. Прокрутите страницу места вниз и выберите Измерить расстояние.

Шаг 2. Добавьте остальные точки

1. Переместите карту таким образом, чтобы чёрный кружок (крестик) оказался в точке, расстояние до которой нужно измерить.
2. В правом нижнем углу экрана нажмите на значок Добавить.
3. Добавьте остальные точки.

Шаг 3. Посмотрите расстояние

1. Общее расстояние в километрах или милях будет показано внизу страницы.

Необязательно: Чтобы удалить последнюю точку, нажмите Отменить. Чтобы очистить все точки, в правом верхнем углу экрана нажмите Ещё → Очистить.

1. Когда закончите, нажмите на стрелку в левом верхнем углу экрана.

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

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

Yandex.Maps

Конструктор карт Яндекс — один из самых доступных, простых в использовании и популярных конструкторов карт в России.

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

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

• ярлыки — входы, места для встреч и т д
• линии — дороги, маршруты, границы и т д
• многоугольники (в том числе с внутренним контуром) — дома, коттеджные поселки, озера и т д

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

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

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

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

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

Goolge Maps

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

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

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

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

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

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

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

Mapbox

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

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

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

Zeemaps

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

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

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

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

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

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

Метки

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

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

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

Линии

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

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

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

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

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

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

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

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

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

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

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

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

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

Пробки и слои

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

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

«Я иду домой» — приложение, которое построит пеший маршрут

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

Он тут же поправит, если вы друг собьётесь и направитесь не в ту сторону. Преимущество на лицо — в пути ваши руки будут свободны, так как смартфон можно положить в карман. А глаза будут сосредоточены на пути.

Свой последний маршрут можно сохранить и пользоваться им в любое другое время. Большинство пользователей уже оценили его высоким баллом в Play Market. Они довольны программой и её возможностями. Создатели ЯИД предлагают облегчённую версию, так как предыдущая была перегружена большинством ненужных функций, таких как отправка СМС, языковыми голосовыми пакетами и прочим. Если понадобился другой язык, вы можете скачать его в настройках приложения.