Чтобы сайт искался на Яндекс.Картах, его нужно зарегистрировать в Яндекс.Справочнике .
Чтобы разместить фрагмент карты у себя на сайте, нужно заполнить пару полей в конструкторе .
Предполагаю, что лучше на HTML страницу установить код статической схемы, со ссылкой на Яндекс.Карты, поскольку скрипт может барахлить на устройствах с медленным интернетом.
Результат:
адрес_из_конструктора
" alt="название_компании
"/>Режим панорамы также можно добавить к себе на сайт
Результат (содержимое можно вертеть, если захватить его участок мышкой, переходить по улицам щёлкая по стрелкам):
Советую посмотреть это видео для вдохновения:
Добавить карту на сайт: две картинки рядом (HTML / CSS)
Можно возле карты поставить изображение организации. При уменьшении окна браузера картинки будут уменьшаться пропорционально.
 |
 |
 |
Скульптура «Родина-мать зовёт!»
Если Вы хотите добавить на свой сайт карту Гугла или Яндекса с собственными метками, то мы расскажем Вам как это сделать.
Думаю, буду прав, если скажу, что развитие современных веб-технологий во многом обязано распространению мобильных платформ (в первую очередь Android и iOS). Начиная с глобального, например, тотального перехода большинства веб-ресурсов на адаптивную вёрстку, и кончая мелочами, вроде кликабельных номеров телефона, которые можно набрать в одно касание.
Но даже мелочи играют, порой, весьма большое значение. Возьмём ситуацию. Есть, к примеру, два сайта, которые предлагают купить что-нибудь недорого. Реальные представительства обеих сайтов находятся в одном и том же городе (скажем, в Москве). Адреса представительств указаны и там, и там. Но на первом сайте адрес просто написан где-нибудь в подвале, а на втором наглядно оформлен в виде карты, по которой пользователь может нажать и сразу же получить координаты... Вопрос знатокам: "Где продажи будут выше"? :)
Современные онлайн-карты идеально решают любые задачи, в которых нужно показать пользователю конкретные места и дать о них краткую справку. Поэтому, если Вы - владелец сайта, который представляет реальный бизнес, то Вам обязательно следует обратить внимание на технологию, о которой мы расскажем в сегодняшней статье.
Способы вставки карт
Технически вставка карты на сайт сводится к добавлению на страницу фрейма, который отображает нужный фрагмент местности напрямую с картографического сервиса (обычно Google или Яндекс). То есть, мы просто делаем своеобразную "дырку" в веб-странице с подложкой под неё карты (кстати, аналогично вставляется видео с YouTube, например).
Гораздо запутаннее выглядит ситуация с добавлением собственных меток. Так, например, ранее Google позволял делать метки в виде красных маячков и снабжать их описанием прямо на основном сервисе. Затем такая возможность реализовалась при помощи JavaScript API. Но с прошлого года API стал платным и единственным официальным способом добавить карту Гугла со своими пометками на сайт стал сервис "Мои карты ".
Яндекс же в этом плане изначально куда более удобен. Он предоставляет не только полноценный API, но и готовый веб-интерфейс ("Конструктор карт ") для визуальной работы с ним без знания JavaScript (фактически аналог "Моих карт")!
Кроме, собственно, Гугла и Яндекса существует ещё ряд сервисов, которые позволяют наносить свои метки на карты. О них мы тоже расскажем, но менее подробно. А сейчас сосредоточимся на том, что нам позволяют делать основные гиганты картографии.
Свои метки на картах Гугла
Для получения координат навигатором, кстати, такая карта подходит, однако, обычный человек вряд ли поймёт, куда ему идти, поскольку нужное место визуально никак не отмечено. Чтобы делать хорошие информативные метки на картах Гугла Вам нужно иметь аккаунт Google и использовать их официальный сервис "Мои карты ".
Этот сервис позволяет пользователю совершать следующие действия:
- добавлять метки с описаниями и фотографиями;
- прокладывать маршруты с возможностью измерения расстояния между его пунктами;
- рисовать произвольные линии с возможностью замера расстояния и площади образованных ими замкнутых фигур.
На стартовой странице сервиса находится список созданных Вами ранее карт (может быть пустым) и кнопка "Создать новую карту" . С неё и начнём работу. После нажатия перед Вами откроется привычная гуглокарта с немного непривычными органами управления. Рассмотрим их внимательно:
В верхней части рабочей области расположены панели инструментов, которые позволяют добавлять на карту свои метки. В левой же части находится большая панель управления слоями. Эта панель напоминает аналогичную в графических редакторах. Вы можете разместить на одном слое неограниченное количество элементов, однако, если понадобиться скрыть один из них, то придётся его только удалять. Если же изначально добавлять каждый элемент на свой слой, то для скрытия достаточно будет просто выключить его видимость.
Стоит также обратить внимание на небольшую кнопку "Базовая карта" на боковой панели. с её помощью Вы можете изменить стиль самой карты (я, например, предпочитаю стиль "Спутник").
Чтобы задать метку выбираем на карте нужную местность и масштаб, в котором мы будем работать, после чего активируем инструмент "Добавить маркер" и жмём в точке, которую следует отметить. Появится небольшой маркер и над ним всплывающее окошко с двумя полями ввода текста: название маркера и краткое описание:
После сохранения введённых первичных данных Ваша метка будет добавлена на текущий активный слой и у Вас появится несколько новых возможностей для её настройки. Во-первых, на боковой панели над самой меткой будет раздел "Индивидуальный стиль" . Нажав по нему, Вы сможете выбрать подпись, которая будет отображаться около маркера. В качестве подписи может выступать название метки или её сокращённое до одной строчки описание.
Во-вторых, новые инструменты появятся и во всплывающем окошке над добавленным маркером. Кроме правки описания, Вы можете изменить внешний вид самого маркера, выбрав одну из стандартных иконок или даже, загрузив любое своё фото (кнопка "Ещё" - "Пользовательский значок"). Также при помощи специальной кнопки свои фотографии Вы можете загрузить и для показа в панели описания. Ну и напоследок, имеется возможность проложить маршрут между добавленной Вами точкой и другим пунктом назначения при помощи предпоследней кнопки. В итоге можно получить нечто подобное:
Хотелось бы немного остановиться на вопросе оптимизации полученного кода:
Дело в том, что по умолчанию вставляемый Вами фрейм с картой имеет чётко заданные размеры. Сегодня же актуально делать везде, где можно, адаптивную вёрстку, которая автоматически подстраивается под размере экрана. По стандартам HTML для фрейма нельзя указывать ширину и высоту в процентах, поэтому в коде эти параметры лучше убрать вовсе, заменив каким-либо CSS-классом, а размеры задать уже через CSS или встроенные стили:
Вариант 1. С классом (более правильно)
Google-map {width:100%; height:480px;}
Вариант 2. Встроенные стили
Вот так можно получить красивую функциональную и валидно вставленную адаптивную карту Гугла на сайт:
Свои метки на картах Яндекса
У Яндекса, как уже говорилось выше, изначально возможностей для редактирования карт было больше. Во-первых, до сих пор существует и развивается сервис "Народная Карта ", где каждый может делать собственные пометки на общей карте. Во-вторых, имеется полноценный API на JavaScript, который позволяет веб-мастерам максимально настроить внешний вид карты и меток на ней. А в-третьих, для тех, кто не знаком с JavaScript, есть визуальный сервис "Конструктор Карт ", который реализует большинство возможностей API! Его и рассмотрим:
Как и в "Моих картах" интерфейс здесь разделён на боковую панель, на которой отображается список добавленных Вами меток и настройки карты, а также функциональные клавиши в верхней части, при помощи которых можно добавлять на карту свои метки. Возможностей здесь, правда, поменьше. Мы можем добавлять лишь стандартные маркеры (причём, если в виде иконок, то только без подписей), рисовать линии (аналог прокладки маршрута) и многоугольники. Единственным новшеством, которого не было у Гугла, является возможность отображать пробки на дорогах. Но это актуально лишь для крупных городов.
Алгоритм действий здесь тот же, что и в "Моих картах". Находим нужный нам участок карты, активируем инструмент "Метки" и добавляем кликом маркер в нужном месте. В появившемся всплывающем окошке можно задать цвет маркера, его тип ("запятая" или "точка"), а также немного приукрасить при помощи добавления текста или нестандартной иконки (но в этом случае текста подписи не будет видно). Кроме подписи, которая будет видна справа от метки, можно добавить и краткое описание, которое будет выводиться по нажатию на маркер.
После добавления меток можно их связать подобием маршрута. Для этого активируем инструмент "Линии" и нарисуем опорные точки будущего маршрута. Для его завершения на последней точке кликните ещё раз и выберите "Завершить" . Как ни странно, у данной функции имеется пара преимуществ перед маршрутами Гугла. Во-первых, прокладывать линии можно даже там, где нет дорог, что позволяет проложить пешеходный путь более точно, а во-вторых, на боковой панели отображается длина готовой линии, что тоже весьма удобно.
В принципе, на этом всё. Чтобы получить код карты с Вашими метками нажмём на кнопку "Сохранить и продолжить" (боковая панель внизу) и в открывшемся окошке отрегулируем размеры видимой части карты. Для адаптивности рекомендую активировать опцию "Растянуть по ширине" , после чего достаточно будет нажать кнопку "Получить код карты" :
В отличие от Гугла, Яндекс отдаёт карту не в виде фрейма, а в виде скрипта, который аналогично вставляется в нужное место на странице Вашего сайта. Если Вы разбираетесь в JavaScript, то, немного переписав скрипт, можете значительно улучшить внешний вид карты, заменив значки меток и добавив картинки к описанию (инструкция или ). Но, в принципе, и без этого смотрится всё довольно прилично:
Другие онлайн-карты
Гугл и Яндекс, безусловно, являются фаворитами в нашей стране. Однако, за рубежом имеется ряд достойных сервисов, использующих те же карты Гугла или свои собственные и позволяющие наносить не только свои метки, но и создавать полноценные презентации маршрутов! Кратко расскажу о некоторых из них.
OpenStreetMap (OSM)
Карты OpenStreetMap больше походят на планы местности. Здесь нет детальной отрисовки ландшафта и домов, но, тем не менее, это единственные онлайн-карты, которые полностью создаются реальными людьми и которые можно править собственноручно. За счёт активности пользователей карты OSM в некоторых местах планеты отображают даже более точную информацию, чем гуглокарты (правда, это далеко не везде)!
Что касается возможностей, то здесь нам доступны установки меток с описаниями и рисование маршрутов. Причём, если у Вас есть GPS-трекер, то данные о маршруте можно экспортировать на карту прямо с него. Есть у карт OpenStreetMap и расширенный режим правки. В этом режиме в качестве основы отображаются карты Bing и Вы можете делать на них любые пометки, рисовать линии и фигуры, аналогично "Моим картам" Гугла. Все сохранённые правки попадут на общую карту, поэтому будьте внимательны при внесении любых изменений, чтобы не вводить в заблуждение других пользователей заведомо неверной информацией!
ScribbleMaps
Если Вы не боитесь англоязычного интерфейса и хотите получить карту с метками в стиле ранних карт Гугла (со всплывающими по клику окошками с описанием, картинками и даже видео), то Вам может понравиться сервис ScribbleMaps :
Данный сервис позволяет в качестве подложки использовать карты большинства популярных ресурсов (в том числе Гугла и OSM), а уже поверх них устанавливать многочисленные метки, фигуры, маршруты и даже просто изображения или текстовые надписи. Словом, если Вам потребуется нанести на карту максимально много собственной информации, то карты ScribbleMaps должны Вам в этом помочь.
Следует, правда, отметить, что есть у данного сервиса и ряд негативных аспектов. Часть функционала доступна лишь на платной основе для так называемых VIP-пользователей. Но, в принципе, для вставки меток и картинок не нужно быть никаким "випом". И даже более того - создать карту и получить код для её вставки на сайт можно даже без регистрации! Вот такая вот противоречивость:)
AniMaps
Если Вы вдруг захотите показать своим посетителям не просто место на карте, а наглядно продемонстрировать путь к нему, то в этом Вам может помочь сервис AniMaps :
AniMaps позволяет добавить на стандартную карту Гугла маршрут и по его ходу отображать определённые изображения или текстовые пояснения. Скорость перемещения по заданному маршруту Вы задаёте самостоятельно при помощи полозка времени над картой. Итогом Вашей работы будет автоматическая презентация маршрута с "остановками" в отмеченных Вами местах.
Создавать маршруты можно и без регистрации, но получить код для вставки на сайт могут только зарегистрированные пользователи.
Выводы
Вставка карты на сайт не составит особого труда, если заранее знать все нужные сервисы для этого. При этом необязательно быть программистом или вообще каким-либо IT-специалистом - всё делается в визуальном режиме! На выходе Вы всегда получите готовый код, который можно просто вставить в текст на странице Вашего сайта без установки каких-либо специализированных плагинов.
Владея же хотя бы базовыми познаниями в сфере веб-технологий, Вы сможете немного улучшить код полученной карты, сделав её адаптивной (как в случае с Гуглом) или добавив дополнительные элементы (как в Яндексе). Воспользовавшись же средствами многочисленных иностранных сервисов онлайн-картографии, Вы сможете удивить своих пользователей даже анимацией на картах! А ведь чем интереснее Ваше предложение, тем больше клиентов оно привлечёт;)
P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.
Довольно часто при создании сайта возникает необходимость вставить на него карту, которая бы указывала местоположение Вашей организации. На самом деле, карта на сайте, это очень удобно: в первую очередь для Ваших пользователей. Они смогут сразу, не покидая Вашего ресурса, увидеть: как можно Вас найти, что находится поблизости и определить насколько далеко расположена Ваша организация от их местоположения. Не все знают, как вставить карту на сайт. А сделать это очень и очень просто!
В этой статье я расскажу и покажу Вам, как, буквально за несколько минут, Вы можете вставить карту с нужным местоположением на страницы Вашего сайта.
Как вставить карту на сайт
Итак, для вставки карты на сайт мы будем использовать сервис от Google.
1. Первое, что нам нужно сделать, это перейти на сайт Google-карты .
2. Сейчас, чтобы произвести все необходимые нам операции, нам лучше всего перейти к «Классическому интерфейсу».
Для того, чтобы это сделать, нажмите на иконку вопросительного знака в правом нижнем углу экрана.
Перед вами откроется небольшая выдвижная панель меню, в которой нужно выбрать «Классический интерфейс».
После этого появится еще одно всплывающее окно, где Вас попросят рассказать, почему Вы хотите пользоваться именно Классическим интерфейсом. Вы можете отметить галочкой один из пунктов, а можете не отмечать, а сразу нажать на голубую ссылку «Классический интерфейс» чуть ниже.
После этого Вы перейдете в классический интерфейс карт Google, где есть все необходимое нам для размещения карты на странице сайта.
3. Теперь в поле для ввода адреса введите необходимый адрес. Не забудьте, что нужно указать страну, город, улицу и дом, то есть полный адрес.
Как результат, Вы получите Ваше местоположение на карте, отмеченное красным маркером.
4. Теперь нам нужно получить код для вставки в нашу веб страницу, а также задать некоторые настройки.
Для того чтобы получить код вставки нам нужно нажать на иконку для получения ссылки или кода (она находится правее иконки с принтером).
5. Здесь нас интересует HTML-код для добавления на веб сайт (второе поле).
Также в этом коде Вы можете увидеть некоторые параметры, которые можно изменить. Это размеры карты, то есть ее высота и ширина. Также вы можете задать для карты рамку. По умолчанию значение рамки равно нулю, но Вы можете это изменить, поставив, например, единицу.
Если Вам необходимо, то поменяйте эти параметры, хотя Вы можете сделать это и из кода веб страницы. Если нет необходимости, то просто скопируйте весь код.
6. Теперь осталось лишь вставить скопированный код в то место Вашей веб страницы, где Вы хотите видеть карту.
Вы можете создать отдельный блок «div» специально для Вашей карты, который Вы в дальнейшем сможете стилизовать через файл таблицы стилей.
Я вставлю мою карту прямо здесь. Смотрите, как она будет выглядеть.
В итоге, пользователь увидит Ваше местоположение, отмеченное маркером. Он сможет передвигать карту, увеличивать и уменьшать ее масштаб.
Также над маркером будет выведено окошко с Вашим адресом. А внизу будет ссылка для просмотра карты в увеличенном масштабе.
Вот так, все очень просто, функционально и удобно.
Пользуйтесь на здоровье!
Буду рада, если этот урок окажется для Вас полезным. В качестве благодарности оставляйте свои комментарии и делитесь статьей при помощи кнопок социальных сетей, которые расположены чуть ниже.
Также подписывайтесь на обновление блога, если Вы еще не подписаны. Обещаю Вам много полезных материалов.
С Вами была Анна Котельникова.
Успехов Вам и до новых встреч.
Карта проезда на сайте с адресом организации является очень удобным ориентиром для пользователей. Согласитесь, очень практично зайти на сайт и увидеть месторасположение компании, не открывая дополнительных вкладок для поиска адреса на карте. Это дополнительный маленький плюсик в копилку лояльности со стороны клиента по отношению к организации.
Обычно карта проезда помещается на странице контактов под указанными данными для связи. Вставляется она с помощью специального программного кода (скрипта). Самыми простыми способами получения такого скрипта, является использование готовых API-решений от Google или Яндекс . Для вставки карты на сайт нет никакой необходимости в знании программирования, следуя изложенным ниже инструкциям, вы получите наглядную и удобную карту.
Вставка карты с помощью Яндекс Карт
1. На данный момент (начало 2013 года) конструктор карт от Яндекс доступен в версии 2.0, очень удобный и логически понятный. Для создания карты даже не требуется быть авторизованным пользователем. Первым делом необходимо создать саму карту с адресом. Для этого переходим по ссылке http://api.yandex.ru/maps/tools/constructor/ и в нижнем поле ввода прописываем адрес компании. После нажатия кнопки "найти" система выдаст варианты найденных адресов.
2. Ставим точку по нужному адресу и в поле описание указываем название организации. Цвет точки лучше выбрать исходя из стиля сайта, на котором будет расположена карта. Конструктор также позволяет пометить другие ориентиры на карте, например, крупные известные объекты, растянуть карту до нужного размера, провести маршрут от остановки транспорта с помощью инструмента рисования линий, редактировать масштаб.
3. Далее переходим на вкладку просмотр. Здесь можно выбрать, статической будет ваша карта или интерактивной. Лучше выбирать второй вариант, так пользователь сможет сам просмотреть близлежащий район и сориентироваться.
4. Вкладка "Код для вставки" предлагает прочесть пользовательское соглашение. После его подтверждения вам откроется код для вставки. Его можно немного отредактировать, например, убрать ссылку на Яндекс, подогнать по размерам точнее, однако существенных изменений лучше не делать.
5. Копируем данный код и вставляем на страницу контактов через HTML-редактор после текста.
6. Сохраняем внесенные изменения и проверяем полученный результат на странице сайта.
Вставка карты с помощью Google Maps
1. Алгоритм действий схож с описанным выше. Переходим по ссылке http://maps.google.ru/maps и вводим в строке поиска адрес организации. Можно также посмотреть, как это выглядит со спутника. Далее для получения кода нажимаем на знак ссылки слева. Можно скопировать имеющийся код, а можно нажать ссылку "настройка и предварительный просмотр встроенной карты".
2. При выборе редактирования откроется дополнительное окно, где можно скорректировать ее размеры.
3. Копируем полученный код и вставляем его через html-редактор на страницу сайта. Выглядеть она будет абсолютно так же, как при предварительном просмотре. В отличие от карт Яндекса, карты Google всегда только интерактивные, здесь меньше возможностей редактировать саму карту, однако можно посмотреть на местность со спутника, рельеф с названиями объектов и 3D карту.
От автора: приветствую вас, друзья! В этой небольшой статье мы с вами узнаем, как вставить Яндекс карту на сайт WordPress. Вопрос добавления карты на любой сайт довольно популярен среди пользователей, что не удивительно. Ведь практически на любом сайте есть страница контактов и, если имеется физический адрес, скажем магазина или студии, тогда его проще и лучше продемонстрировать в понятной для посетителя форме — на Яндекс карте.
Итак, для добавления карты на сайт ее сначала нужно создать. Сделать это можно, воспользовавшись конструктором сайт от сервиса Яндекс. Доступен этот сервис по следующему адресу — https://tech.yandex.ru/maps/tools/constructor/ .
Как видим, нам предлагают выбрать уже готовую карту либо же создать новую. Обратите внимание, для создания карты, впрочем, как и для работы с другими сервисами от Яндекс, вам необходима учетная запись на Яндксе. Если у вас ее нет или вы не авторизованы, тогда Яндекс предложит вам создать свою учетную запись или авторизоваться в уже имеющейся. Итак, нажимаем кнопку Создать новую карту и, скорее всего, вы увидите карту того города, в котором находитесь.
Если это будет не ваш город или вам просто нужен другой город, тогда мы его сможем изменить далее при поиске необходимого адреса или объекта на карте.
В качестве примера давайте создадим карту, на которой будет главная улица Киева — Крещатик. Для этого воспользуемся поисковой строкой вверху карты и наберем интересующий нас адрес.
В результате будет найдена искомая улица или точный адрес, если вы его вводили. Далее можно воспользоваться набором кнопок под строкой поиска, в частности кнопкой Метки, которая позволяет установить метку на нужный объект карты.
Для метки можно задать текст (описание), установить ее цвет и тип. После этого нажимаем кнопку Готово. После этого в левой части страницы найдем кнопку Сохранить карту и получить ссылку и нажмем ее.
После сохранения мы увидим предпросмотр карты, где можно настроить ее размер простым перетаскиванием ползунков по бокам карты.
Изменяя размер Яндекс карты, в левой части страницы мы сразу же будем видеть параметры ее ширины и высоты и это очень удобно. После завершения изменений жмем кнопку Получить код карты.
После нажатия кнопки в тултипе увидим готовый код карты, который остается вставить на нужную страницу WordPress.
У меня уже есть страница контактов на сайте WordPress, на эту страницу я и вставлю скопированный код. Обратите внимание, это код HTML, подключающий скрипт, поэтому данный код обязательно нужно вставлять на страницу не в визуальном режиме а в режиме Текст.
Сохраним страницу и посмотрим изменения в пользовательской части сайта WordPress. Как видим, Яндекс карта успешно появилась на сайте WordPress.
Все крайне просто и весь процесс занял буквально считанные минуты. Что очень удобно, так это то, что мы можем при желании Яндекс карту разместить на любой странице сайта WordPress и даже в любой части сайта. Например, мы вполне можем сформировать миниатюрную карту и вставить ее в сайдбар. Для этого достаточно использовать виджет Текст, который позволяет вставлять код HTML. Ну а у меня на этом все. Удачи!