Если вы желаете вставить хорошую карту на сайт с указанием на ней месторасположения, например, вашего офиса, склада, то воспользуйтесь такими известными веб-инструментами, как карта для сайта от Яндекса или карта для сайта от Google .
В этой статье мы расскажем для чего и как вставить карту Яндекса на сайт.
Вот так, к примеру, выглядит карта Яндекса, которую мы вставили на сайте торгового центра. Она могла быть подробнее, с изображениями домов на схеме, но в данном случае важнее было указать месторасположение торгового центра относительно ближайших поселков, поэтому был выбран мелкий масштаб.
Для чего нужна карта на сайте?
Вы, возможно, улыбнетесь, прочитав этот, казалось бы, риторический вопрос. "Карта нужна, чтобы посетители знали, где мы находимся", - это простой ответ слишком прост для понимания роли карты особенно для коммерческого сайта. Вот некоторые важные аспекты наличия карты на сайте:
- Обратите особое внимание: наличие карты в значительной степени повышает степень доверия к вашей ресурсу. Визуальное отображение месторасположения компании, офиса, магазина, подсознательно раскрепощает потенциального клиента (избавляет от опасений, вроде: "а вдруг обманут и исчезнут?"), а значит увеличивает вероятность того, что посетитель сайта станет реальным вашим клиентом.
- Наличие интерактивной карты (в отличие от карты-изображения) позволяет пользователю лучше сориентироваться на местности, посмотреть ближайшее метро, автомобилистам - проверить маршрут на дальних подступах к объекту. Кроме того, интерактивная карта позволяет посмотреть на местность из космоса.
- Ну, и конечно же, карта на сайте нужна для того, чтобы посетители и клиенты сайта знали месторасположение вашего магазина, офиса, склада.
Как вставить карту Яндекса на сайт (пошаговая инструкция)
Следует воспользоваться конструктором API Яндекс.Карт .
В этой статье мы приводим примерную пошаговую инструкцию, которая, как мы надеемся, поможет вставить карту Яндекс на ваш сайт:
Шаг 1. Начальная настройка Яндекс карты для сайта:
- Откройте страницу конструктора Яндекс.Карт для сайта .
- Найдите на карте необходимое географическое место по адресу или вручную (с помощью масштабирования ползунком и перемещения карты мышью).
- Выберите удобный для работы масштаб. Окончательный масштаб лучше установить в конце работы. Рисовать будем метки на карте, линии (подъездные пути) и контуры зданий или территорий.
- Укажите в соответствующем поле название будущей карте.
- Перейдем к инструментарию сервиса: кнопки для рисования точек (меток на карте), линий, многоугольников (контуров) и размеров карты.
Шаг 2. Рисование на карте точек (меток):
- Кликаем по кнопке рисования точек.
- Ставим метку (точку) в нужном нам месте. Например, на здании вашего офиса. Карта для сайта от Яндекса позволяет вставить не одну, а несколько меток (к примеру, если у вас несколько магазинов, складов или офисов).
- Переходим к настройке свойств установленной метки (вставка текста, выбор цвета и т.п.).
Шаг 3. Настройка свойств установленной на карте метки:
- Кликаем непосредственно по нарисованной нами метке.
- В открывшемся окошке выбираем нужные нам свойства (цвет, номер метки на карте), пишем по желанию текст (в последствии текст будет виден пользователю при клике по метке).
- Любую метку можно удалить в соответствующем окошке свойств.
- Итак мы вставили на Яндекс-карте для сайта метку вашего офиса, настроили её свойства, теперь переходим к рисованию линий. К примеру, линии подъездного пути к офису.
Шаг 4. Рисование линий на карте:
- Кликаем по кнопке рисования линий.
- Кликая по карте, мы получаем ломаную линию любой траектории. Ею можно оконтурить любой обект или прочертить маршрут подъезда к объекту.
- Передвигая квадратные и круглые маркеры, можно редактировать форму линии.
- По аналогии с метками, если кликнуть по линии, появится окно свойств, в котором можно установить цвет, толщину, прозрачность линии, а так же внести текст, который будет показываться пользователю.
- Переходим теперь к рисованию многоугольников.
Шаг 5. Рисование многоугольников, заполненных цветом контуров:
- Кликаем по кнопке рисования многоугольников.
- В отличии от линий, которыми можно так же очертить любой многоугольник, данные многоугольники являются контурами с залитой цветом серединой.
- Кликая мышкой по карте можно нарисовать любой заполненный многоугольник. Методика рисования, редактирования и установка свойств аналогична методике рисования линий.
- Переходим теперь к изменению размеров карты.
Шаг 6. Изменение размеров карты для сайта:
- Кликаем по кнопке изменения размеров.
- Перемещая квадратные маркеры по контуру карты, можно изменить размер до необходимого. Всё просто.
- Переходим к финалу создания карты.
Шаг 7. Получение кода карты для сайта (Яндекс):
- Придаем карте окончательный вид, установив финальный масштаб карты и окончательную позицию (координаты).
- На этом этапе создание карты для сайта (Яндекс) можно считать законченным. Нажимаем на большую желтую кнопку "Сохранить и получить код".
- Даже после сохранения карты всегда можно вернуться к редактированию.
- Обратите внимание на то, что карта может быть не только схемой, но и фотоснимком из космоса, гибридом или элементом "Народной карты".
- Кроме того, вы вольны сделать карту интерактивной или простым изображением. Интерактивная карта интересней, функциональней, но может загружаться дольше простого изображения. Выбор за вами.
- Вставить карту Яндекса на сайт можно, разместив html-код карты в нужном вам месте страницы.
Спасибо всем читателям, заинтересовавшимся нашей пошаговой инструкцией.
Создание карты для сайта от Яндекса - это нетрудоемкое, не требующее специальных знаний и навыков действие на фоне куда более сложных проблем сайтостроительства. Если при создании вашего сайта вы столкнулись с более серьёзными трудностями, обращайтесь к нам. Мы постараемся решить ваши проблемы!
Если вам понравилась наша инструкция, можете порекомендовать её своим друзьям и знакомым. "Социальные кнопки" находятся справа. Такова наша маленькая корысть .
Сегодня офлайновому бизнесу важна не вывеска, а блоки с информацией о заведении в правой части выдачи Google и Яндекс. Поговорим о том, как добавить данные о компании на карты.
Как добавить компанию на карты Google
Необходимо создать страницу в сервисе Google Мой бизнес .
Что это даёт? В первую очередь — возможности:
- информировать пользователей о ценах, времени работы, событиях и новостях организации;
- следить за отзывами и быстро реагировать на них;
- анализировать просмотры информации о бизнесе (количество просмотров данных о компании, просмотры фото, видеозаписей);
- общаться с потенциальными клиентами с помощью Hangouts;
- прикреплять карты с маршрутом к организации;
- укреплять репутацию благодаря оценкам пользователей.
Блок Google Мой Бизнес в поисковой выдаче
Алгоритм добавления компании.
Если вы не получите письмо в течение 3-4 недель, смело пишите в техподдержку: «Письмо не пришло, что мне делать?». Google предложит пройти процедуру подтверждения вручную.
Для этого нужно будет отправить несколько фотографий:
9. После этого вы попадете в личный кабинет своей компании:
На странице «Информация» необходимо предоставить наиболее полную информацию о вашей компании:
- добавьте дополнительные категории, которые соответствуют вашей деятельности;
- добавьте описание вашей компании;
- укажите часы работы;
- способы оплаты товаров и услуг;
- добавьте фотографии и видео;
- а также дополнительные сведения.
В описании компании постарайтесь как можно точнее написать, в чем конкретно заключается ваш бизнес: какие товары или услуги вы предлагаете.
Чем полнее и качественнее будет представлена информация о вашей компании, тем больше вероятность, что её увидят пользователи Google.
Использование интерактивных карт на веб-страницах — это отличный и удобный способ показать клиенту, где именно располагается ваша организация. При использовании «Яндекса» можно не только расположить модуль с картой, но и поставить по нужному адресу метку, которая поможет посетителям легко сориентироваться при поиске.
Конструктор карт от «Яндекса»
Самый простой способ того, как поставить метку на карте «Яндекс» — это воспользоваться конструктором карт, который можно найти на официальном сайте «Яндекса». Для того чтобы выложить на сайт карту с заданной отметкой, достаточно выполнить ряд несложных действий. Интерфейс интуитивно понятен для любого пользователя.
Все действия производятся в визуальном редакторе, где можно пошагово настроить расположение необходимой метки.
После того как карта с отметкой будет сгенерирована, достаточно скопировать код и вставить его в нужное место на странице, либо воспользоваться виджетом. Присутствует возможность получить файл для распечатки бумажного варианта карты.
Настройка метки
Чтобы было понятнее, как поставить метку организации на карте «Яндекс», разберем этот процесс по пунктам:
- В интерфейсе работы с картой слева в окне введите название и описание организации, как показано на скриншоте ниже.
- Сверху нажмите на кнопку «Метки» и левой кнопкой мыши выберете необходимое место карты.
- Появится значок, который будет отмечать нужное место, а в левой части окна вы увидите список добавленных объектов. Конструктор дает возможность не только разобраться, как поставить метку на карте «Яндекс», но и поможет ее отредактировать по своему вкусу.
- При выборе места, в меню слева откроется интерактивное диалоговое окно, в котором можно вписать данные об организации, выбрать цвет и тип иконки, а также пиктограмму, указывающую на направленность работы организации.
- Нажав кнопку «Готово», вы сформируете метку на карте.
Чтобы понять, как поставить несколько меток на карте «Яндекс», просто нажмите еще раз на другой нужный адрес левой кнопкой мыши при выбранном пункте «Метки» сверху, и вы увидите, что другая метка также появилась. Ее можно редактировать аналогичным образом. Если метку требуется удалить, нужно выбрать ее в меню слева и нажать на соответствующую кнопку в диалоговом окне.
Как только редактирование завершено, нажмите «Сохранить и продолжить». В открывшемся окне можно задать необходимый размер для карты — его вы можете выбрать, исходя из требований сайта, на котором он будет расположен. Рекомендуется располагать метку в центре карты, а масштаб сделать такой, чтобы были видны названия близлежащих улиц. Так информация воспринимается гораздо лучше.
Как только получилось поставить на карте «Яндекс» метку по адресу расположения организации, можно выбрать более предпочтительный вариант размещения — динамический или статический. Первый гораздо удобнее, потому что предполагает возможность интерактивного взаимодействия пользователя с картой, а второй хорошо подойдет для случаев, когда требуется снизить нагрузку на сайт.
Получение кода для размещения
После того как вы смогли поставить метку на карте «Яндекс», можно приступать к размещению последней на сайте:
Обратите внимание, что в этом же окне можно выбрать вариант для распечатки карты на бумажном носителе, получить на нее активную ссылку, а также задать размер: фиксированный на ширину экрана. Если вы выбрали вариант для распечатывания, можно задать соответствующие параметры — формат, качество и размер. Сохранить файл рекомендуется на компьютере или на сервисе «Яндекс.Диск».
Вы можете в любой момент вернуться к редактированию полученной метки, нажав на кнопку в левом верхнем углу. Метки можно добавлять в любом количестве, перемещать, удалять и менять их оформление.
В заключение
Наличие на веб-странице интерактивной карты — хороший способ показать заботу о клиенте. Также ее можно использовать в любых других целях для собственного удобства. При помощи этой статьи вы смогли узнать, как поставить метку на карте «Яндекс», и в дальнейшем вы избежите проблем с указанием расположения вашей организации и схемы проезда к ней.
Использование интерактивных карт на веб-страницах — это отличный и удобный способ показать клиенту, где именно располагается ваша организация. При использовании "Яндекса" можно не только расположить модуль с картой, но и поставить по нужному адресу метку, которая поможет посетителям легко сориентироваться при поиске.
Конструктор карт от "Яндекса"
Самый простой способ того, как поставить метку на карте "Яндекс" — это воспользоваться конструктором карт, который можно найти на официальном сайте "Яндекса". Для того чтобы выложить на сайт карту с заданной отметкой, достаточно выполнить ряд несложных действий. Интерфейс интуитивно понятен для любого пользователя.
Все действия производятся в визуальном редакторе, где можно пошагово настроить расположение необходимой метки.
После того как карта с отметкой будет сгенерирована, достаточно скопировать код и вставить его в нужное место на странице, либо воспользоваться виджетом. Присутствует возможность получить файл для распечатки бумажного варианта карты.
Настройка метки
Чтобы было понятнее, как поставить метку организации на карте "Яндекс", разберем этот процесс по пунктам:
- В интерфейсе работы с картой слева в окне введите название и описание организации, как показано на скриншоте ниже.
- Сверху нажмите на кнопку "Метки" и левой кнопкой мыши выберете необходимое место карты.
- Появится значок, который будет отмечать нужное место, а в левой части окна вы увидите список добавленных объектов. Конструктор дает возможность не только разобраться, как поставить метку на карте "Яндекс", но и поможет ее отредактировать по своему вкусу.
- При выборе места, в меню слева откроется интерактивное диалоговое окно, в котором можно вписать данные об организации, выбрать цвет и тип иконки, а также пиктограмму, указывающую на направленность работы организации.
- Нажав кнопку "Готово", вы сформируете метку на карте.
Чтобы понять, как поставить несколько меток на карте "Яндекс", просто нажмите еще раз на другой нужный адрес левой кнопкой мыши при выбранном пункте "Метки" сверху, и вы увидите, что другая метка также появилась. Ее можно редактировать аналогичным образом. Если метку требуется удалить, нужно выбрать ее в меню слева и нажать на соответствующую кнопку в диалоговом окне.
Как только редактирование завершено, нажмите "Сохранить и продолжить". В открывшемся окне можно задать необходимый размер для карты — его вы можете выбрать, исходя из требований сайта, на котором он будет расположен. Рекомендуется располагать метку в центре карты, а масштаб сделать такой, чтобы были видны названия близлежащих улиц. Так информация воспринимается гораздо лучше.
Как только получилось поставить на карте "Яндекс" метку по адресу расположения организации, можно выбрать более предпочтительный вариант размещения — динамический или статический. Первый гораздо удобнее, потому что предполагает возможность интерактивного взаимодействия пользователя с картой, а второй хорошо подойдет для случаев, когда требуется снизить нагрузку на сайт.
Получение кода для размещения
После того как вы смогли поставить метку на карте "Яндекс", можно приступать к размещению последней на сайте:
- Для этого необходимо получить код. Нажмите на соответствующую кнопку слева, откроется диалоговое окно.
- Данный код вставляется в нужное место на вашем сайте, и после обновления страницы интерактивная карта с расположенной на ней меткой, которая указывает на вашу организацию, начнет работать.
Обратите внимание, что в этом же окне можно выбрать вариант для распечатки карты на бумажном носителе, получить на нее активную ссылку, а также задать размер: фиксированный на ширину экрана. Если вы выбрали вариант для распечатывания, можно задать соответствующие параметры — формат, качество и размер. Сохранить файл рекомендуется на компьютере или на сервисе "Яндекс.Диск".
Вы можете в любой момент вернуться к редактированию полученной метки, нажав на кнопку в левом верхнем углу. Метки можно добавлять в любом количестве, перемещать, удалять и менять их оформление.
В заключение
Наличие на веб-странице интерактивной карты — хороший способ показать заботу о клиенте. Также ее можно использовать в любых других целях для собственного удобства. При помощи этой статьи вы смогли узнать, как поставить метку на карте "Яндекс", и в дальнейшем вы избежите проблем с указанием расположения вашей организации и схемы проезда к ней.
Визуально спланировать маршрут будущего путешествия или отметить метками места, где уже были — всё это может выполнить в Google Maps, при этом построить маршруты и рассчитать расстояние. А так же отмечать маршруты поездок, пеших походов. В общем, идеальный способ связать путешествия с картами, чтобы всё было интерактивно и познавательно.
Давайте попробуем разобраться с этим полезнейшим для путешественников сервисом, а так же познакомимся со скретч картами, которые можно повесить дома на стену и помечать посещённые государства.
Не знаю как у вас, но во мне Гугл Мапс всегда вызывал какой-то ступор, я всегда думал, что им очень тяжело пользоваться и просто не решался сесть и разобраться. Но, как сказал Че Гевара: «Давайте будем реалистами и совершим невозможное», и я пересилил свою фобию перед Google Maps, и выбрал день чтобы полностью в нём разобраться. И вновь убедился, что всё, что поначалу кажется сложным, получается в итоге простым и понятным.
Тем более, что ранее у нас с Вами уже был опыт работы c сервисом , когда мы научились планировать дела и путешествия.
Идеально сервис работает в родном для Google браузере — Ghrome, в Опере вообще не важно отображается и подтормаживает. Во время работы с картами советую пользоваться Хромом или Мозилой.
Создание своего маршрута / карты путешествия в google maps
Так, давайте создадим свои метки на карте. Первым делом зайдите на google maps и перейдите в раздел «Мои маршруты», здесь надо будет кликнуть на ссылку «Создать»:
На созданной карте вы увидите слой, он чем-то напоминает слои в Фотошопе. Под формой поиска находится панель инструментов, которая доступна для работы. А именно:
Поэтому берём инструмент и для начала расставим маркеры по тем локациям, в которых мы уже были:
Все метки месторасположения будут добавляться в один слой, который автоматически был создан с новой картой.
Добавление к меткам на карте фотографий и видео
После того как расставили необходимые маркеры по карте, можно начать их наполнять описанием, видео или фотографиями.
Для этого выбираем инструмент , выделяем необходимый для редактирования маркер и кликаем по иконке с фотоаппаратом:
Далее откроется окно для загрузки и прикрепления контента к маркеру. Это могут быть фото загруженное где-нибудь в интернете, либо видео с Youtube. Изображение так же можно найти поиском Google по картинкам. Напрямую загрузить фотографию с компьютера в Google Maps нельзя.
Если вы не знаете куда загрузить вашу фотографию в интернете, чтобы была прямая ссылка для вставки, то советую сервис ipic.su либо пользуйтесь облачным сервисом хранения файлов dropbox .
Как измерить расстояние пути и проложить маршрут?
Для измерения расстояния существует два способа — с помощью инструмента «линейка» и «линия». Сейчас подробнее рассмотрим работу каждого из них.
Пример работы инструмента «Линейка»
1. Линейка подойдёт для измерения расстояния по прямой, от пункта А к пункту Б. Если начертить какую-то замкнутую фигуру с помощью «линейки», то можно будет увидеть площадь этой фигуры.
2. С помощью лини можно нарисовать какую-нибудь замкнутую фигуру, к примеру, территорию по которой вы сейчас путешествуете. Так же как с линейкой, по замкнутой фигуре вам будет доступная информация по её площади и расстояния по границам.
Прокладывания маршрута на карте для автомобиля выполняется так же с помощью линии. Вы ставите точку A, а затем точку B и сервис просчитывает расстояние и путь по официальным автодорогам.
Слева на фото выделенная область «Линией», справа проложенный маршрут
Маршрут создается на новом слое. Чтобы получить детальную статистика, зайдите в меню слоя с проложенным маршрутом и кликните по ссылке «Детали маршрута», чтобы осмотреть весь путь подробнее:
У маршрута можно изменять средство передвижения, это может быть велосипед или пеший путь. Но это актуально больше для Европы, Америки, где существуют велосипедные дороги и их добавляют к картам.
Как отметить координаты на карте?
Если вы знаете координаты определённой местности, то в поисковой строке Google Maps вбиваете широту и долготу через пробел. Важно именно в такой последовательности! Разделитель между градусами и десятичными минутами — точка.
Варианты записи:
Давайте для примера найдём координаты затонувшего судна Британия из книги «Дети капитана Гранта», Жюль Верна.
— «Там, — продолжал Гарри Грант, — постоянно терпя жестокие лишения, они бросили этот документ под сто пятьдесят третьим градусом долготы и тридцать седьмым градусом одиннадцатой минутой широты. Окажите им помощь, или они погибнут».
По сюжету книги известно, что южное полушарие и западная часть. Пересчитаем минуты в десятичные и получим координаты для карты:
Если вы отметили точку и хотите её показать друзьям. То, как уже описано выше, создаёте новую карту, добавляете на слой эту точку и теперь можете делиться ссылкой с любым человеком.
лучшие посты
Кому удобен и ближе Яндекс, предлагаю посмотреть подобную статью про фиксирование . Возможности печати более расширены!
Работа со слоями на карте
Пользу слоёв я увидел в том, чтобы разделять места и маршруты по их назначению. К примеру, я на одном слое выставляю маркеры мест где я уже был, а на втором слое отмечаю те страны и города, в которых я хочу побывать в будущем. И все выставленные метки по каждого слоя будут одновременно отображаться на одной карте.
Можно будет наслаивать слои друг на друга и уже редактировать каждый отдельно. «Редактировать» сильно сказано, ведь на самом деле мы сможем не так уж и много, а именно: изменять стиль слоя, редактировать таблицу с данными, отключать и включать его отображение.
Отмеченный маршрут путешествия на карте (кликабельно)
В примере карты, которую я делаю для этой статья, цвет маркеров (меток) выставляю разным, чтобы было визуальное различие. Кроме маркеров в меню можно редактировать стиль отображения, а так же и для маршрутов с линиями.
Импортирование посещенных мест из Excel в Google Maps
Если у вас много мест, которые вы хотите отметить на карте, то можно будет подготовить таблицу в Excel, которую затем импортировать в карту. Очень удобно и экономит время.
Базовая таблица будет состоять из трёх столбцов:
- Месторасположение маркера. Это могут быть как точные координаты (широта и долгота), так и просто название местности. Я использую название города в котором был и через запятую указываю страну. Страну надо указывать потому, что некоторые названия городов повторяются и программа может расставить много ненужных маркеров. Так же старайтесь писать названия без ошибок;
- Второй столбец это название маркера, которое будет отображаться в заголовке и в меню;
- Третий столбец будет отвечать за описание, в котором можно указать любую информацию касающуюся этой местности.
Пример импортируемого файла Excel:
В произвольной форме можно указывать ещё столбцы, это могут быть номера телефонов, сайты, название отелей и всё что угодно. Вся информация из дополнительных колонок будет находиться в описании к отметке.
Теперь, чтобы добавить все данные на карту, создайте новый слой, после чего нажмите на кнопку «Импорт». В открывшемся меню выберите ваш xls файл или таблицу с Google Drive.
В открывшемся окне сервис предложит выбрать столбцы, отвечающие за месторасположение и названия маркеров, после этого нажимайте «Готово». Через несколько секунд вся таблица с данными будет загружена на карту и доступна для редактирования.
Пример оформленной карты добавленной на сайт:
Карта на которой можно отмечать места наклейками либо стирать
Это так называемые Скретч карты, которые в свою очередь делятся на два подтипа — c заклеиванием или стиранием посещённых мест. Посмотреть и купить такие карты, вы можете в книжном магазине Лабиринт .
Очень просто отметить на карте места где был, достаточно взять монетку и аккуратно стереть позолоченный слой. По аналогии с лотерейными билетами. Страны на скретч картах раскрашены разными цветами, а у больших государств, вроде США, России и Канады, ещё есть внутренние разделения по штатам, республиками и т.д.
