Приветствую вас, друзья и коллеги. Недавно я рассказывал про банковские карты Яндекс Денег (хорошая штука), сегодня речь снова пойдет о сервисе от Яндекса и снова про карты, только не про пластиковые и не про игральные, а про карты местности.
Возможность помочь клиентам добраться в нужное место – это весомый вклад в развитие бизнеса, чем больше людей дойдет куда надо, тем выше будут доходы и прибыль. Так что, если ваш бизнес как-то привязан к объектам на местности, то вставить хорошую карту на сайт надо обязательно.
Зачем нужна интерактивная карта
- Удобно для клиента — легко планируется маршрут с учетом всех актуальных изменений, так как Яндекс оперативно вносит данные о ремонтах и новых застройках на свои карты.
- Удобно владельцу сайта — все корректировки вносятся на карту автоматически, достаточно один раз вставить карту на сайт, потом обновления подгружаются из базы Яндекса сами.
- Поднимает авторитет и уровень доверия к организации. Хотя такую примочку может сделать любая шараж-монтаж контора, на подсознательном уровне сайт с интерактивной картой воспринимается лучше.
В былые времена адреса офисов, маршруты прохода и проезда, различные интересные объекты и т.д. отмечали на картинках, изображающих карту, и выкладывали на сайт обычным jpg или png файлом. Проблема была в том, что они не могли учесть временные ремонты, пробки или другие изменения местности, не имели возможности подсказать индивидуальных маршрут с разных направлений.
С развитием интернет сервисов, таких как Яндекс Карты и Google Maps, появилась возможность сделать карты живыми – интерактивными. Такие можно вертеть в разные стороны, менять масштаб, маршруты с разных точек задавать, планировать свое перемещение с учетом пробок и многое другое.
Наличие удобной схемы проезда на странице контактов в наше время является правилом хорошего тона для любой компании.
И для того, чтобы помочь вам сделать свой веб ресурс более приветливым к людям я расскажу, как добавить Яндекс карту на сайт, делается это очень легко с помощью специального конструктора (не сложнее чем вставка видео с Youtube).
Конструктор карт Яндекс
Если у вас нет аккаунта в Яндексе, то надо будет его завести, так как без этого сконструировать ничего не получится, сервис попросит вас залогиниться или пройти регистрацию. Пугаться не нужно, регистрация – это создание почтового ящика на Yandex. Даже если он вам не нужен для работы с электронной почтой, пригодится для других сервисов поисковика, например, для Яндекс Метрики или Яндекс Вебмастер.
Начинается процедура с этой странички — tech.yandex.ru/maps/tools/constructor/
Так как вы читаете эту статью, значит, вы входите первый раз и сохраненных ранее карт у вас нет, остается выбрать левую желтую кнопку «Создать новую карту». С этого момента начинается формирование индивидуальных настроек карты на нужной местности.
Фишка в том, что вы сможете вставить не просто Яндекс карту с точным адресом, а карту с любым количеством объектов выделенных разными маркерами и цветами – объектами, точками, маршрутами.
Все настройки производятся в визуальном конструкторе, никакие коды править не придется, работа по адаптации мало отличается от обычного использования Яндекс карт пользователем. Начнем с добавления объектов.
Добавление объектов
Первым инструментом послужит форма поиска, которая находится в верхней части карты. С ее помощью мы можем отыскать нужную точку по адресу, координатам или названию. Вводим в поле данные запроса, пример с адресом «Москва, Красная площадь»:
После нажатия на кнопку найти на местности появится точка, соответствующая расположению заданного объекта. Вставить можно много объектов. Пример с Кремлем:
Каждую точку можно настроить так, чтобы она отличалась от других объектов и была на карте легко различима – меняется цвет и форма, а также, внутри можно добавить уникальный значок, если ткнуть в выпадающее меню «Контент». Это удобно, если объектов на создаваемой карте много и их можно классифицировать по разным группам.
Слева наполняется список всех отмеченных на карте адресов.
Изменение масштаба и положения
С помощью клавиш «+» и «-», находящихся в левой верхней части макета устанавливается оптимальный масштаб. Полная карта России не нужна, чтобы перемещаться по центру Москвы и, если вы указываете точечный объект в каком-то городе, лучше настроить масштаб на уровне, когда различимы названия улиц и окружающих домов.
Для перемещения карты в разные стороны нужно захватить ее нажатием левой кнопки мыши и двигать куда нужно.
Контуры объектов (многоугольники) и линии
При необходимости выделить очертания какого-либо элемента на карты, когда указания точкой недостаточно, используем инструмент «Многоугольники». Устанавливая одну точку за другой, мы получаем периметр, залитый внутри определенным цветом.
Точек может быть сколько угодно, поэтому, фигура, закрашенная на карте, допускает любую степень сложности. Завершить построение контура можно кликом мыши по последней установленной точке или переключением на любую другую кнопку конструктора (например, на линии). Я выделил контуры Московского Кремля по его стене:
Начертание линий осуществляется кнопкой «Линии». Все действия аналогичны предыдущему инструменту, только пространство между точками не закрашивается. С помощью линий на Яндекс карте можно рисовать маршруты движения (прохода, проезда).
Таким способом можно показать оптимальный маршрут осмотра достопримечательностей.
Конечную точку подтверждаем повторным ее нажатием мышью, там будет меню «Удалить»/«Завершить». После выбора завершения открывается поле для подписи к конечной точке и настройки параметров линии (толщина, цвет, прозрачность).
Завершаем маршрут нажатием на «Готово».
Вид карты и наложение пробок
Последний штрих, который позволяет придать карте особые свойства – это наложение пробок, для этого есть отдельная кнопка. Честно сказать, я сомневаюсь, что подобная опция будет часто востребована для карт, вставляемых на сайт, так как для движения на машине люди чаще пользуются навигаторами, чем встроенными картами.
А вот переключение режимов между схемой, спутником и гибридом может пригодиться.
Вид со спутника придает окружающим объектам их реальный облик и узнать их на такой карте проще, чем схематичные прямоугольники схемы.
Название и описание
Для того, чтобы в будущем мы могли возвращаться к созданной карте для ее корректировки или для повторного получения кода вставки надо придумать ей название и описание, после чего сохранить.
Код карты для вставки на сайт
Наша карта уже готова и теперь надо получить ее код для вставки на сайт, Яндекс дает возможность сделать:
- интерактивную карту (о которой я говорил с самого начала);
- статическую – обычная картинка, только с мудреным кодом, ничего двигать в ней нельзя, в добавок еще и максимальное число объектов ограничено;
- печатную — файл-изображение высокого качества, поддерживаются не все страны, в основном СНГ и Турция, не поддерживаются спутниковая и гибридная версия.
Выбор между ними будет выведен сразу после сохранения.
В этом же меню задается итоговый размер в пикселях. Задать его можно вручную или двигая за уголки рамку вокруг выделенной области справа. Галочка «Растянуть по ширине» заставляет карту занимать все пространство на сайте упираясь в края того блока, где она выводится.
На этом этапе есть возможность вернуться к редактированию карты, в левой верхней части окна есть соответствующая надпись со стрелкой.
Итоговый код появляется после нажатия на кнопку «Получить код карты», мой выглядит вот так:
При выборе печатной карты добавится выбор формата файла — png или jpg, и кода, соответственно, не будет — кнопка скачивания вместо него появится. Такой файл тоже можно вставить на сайт, только надо будет закачивать его на хостинг и, при отсутствии визуального редактора у вашего сайта, надо будет выписать изображение в HTML теги (src)
Как вставить карту Яндекс на сайт
Код мы получили, теперь необходимо перенести его на наш веб ресурс. Для размещения подойдет любое место, главное, чтобы размеры вписывались. Если вы пользуетесь конструкторами или визуальными редакторами, то не забудьте при вставке кода переключить их в текстовых (HTML) режим. Вот так:
Карта, которую я сделал
Вот что получилось у меня после всех проведенных настроек:
Удобен сей элемент всем — и объекты нужные подсвечены и масштаб подобран как положено. Кроме того, сервис Яндекса позволяет пользователю определить свое местоположение (стрелочка в верхнем левом углу) и проложить индивидуальный маршрут в нужную точку.
Раскрыть карту на весь экран позволяет кнопка в правом верхнем углу в виде двух расходящихся в разные стороны стрелок. Теперь про плагины.
Плагины для WordPress и других CMS
Раньше делать карты было сложнее и многие пользовались для этих целей специальными плагинами, например, для WordPress был такой — Yandex Maps for WordPress. Сейчас не нужны никакие API и любой пользователь с минимальными знаниями разберется как все настроить, поэтому смысла в плагинах я не вижу. Названный выше плагин тому подтверждение — не обновляется более 2-х лет, видимо спроса нет.
Из относительно актуальных я нашел Yandex Maps API (обновлен 4 месяца назад) и Oi Yandex.Maps for WordPress (5 месяцев назад). Если у вас есть желание поиграть в плагины, то их найдете в репозитории Вордпресс поиском, а как устанавливать плагины смотрите тут.
Вы сами убедились, что подготовить карту и разместить ее на своем ресурсе получается гораздо быстрее, чем прочитать эту инструкцию, теперь каждый ваш ресурс будет радовать своих посетителей такой удобной фишкой.
biznessystem.ru
Для того что бы разместить карту на сайте, для начала нужно получить сам код для встраивания для вашего сайта.
Для получения кода карты от Google:
- Зайдите на сайт Google maps.
- Используя поисковую строку, найдите нужное местоположение на карте.
- Нажмите на пиктограмму шестеренки в правом нижнем углу экрана и выберите «Поделитесь с друзьями или получите код карты»
- На вкладке «код» мы можем скопировать код созданной вами карты, с расположением которое вы искали.
Для получения кода карты от Яндекса:
- Зайдите на сайт Яндекс.Карты.
- Используя поисковую строку, введите нужное местоположение и нажмите «найти». Из предложенных вариантов выберете тот, который вам больше всего подошел.
- Дальше у вас есть возможность, вставить описание для метки на карте, выбрать цвет маркера, указать номер. После того как вы все сделали, жмете «ок».
- Дальше вам нужно получить сам код карты, если вы вошли в систему вы сможете сохранить карту у себя в аккаунте. Для этого вам нужно придумать название карты, прочесть пользовательское соглашение, и если оно вас устроило нажать «Сохранить и получить код» (код карты можно получить, даже без аккаунта Яндекса)
- Далее вы вбираете один из двух видов представление карты, «статическая» или «интерактивная». И копируете сам код.
Как вставить код карты на сайт?
- На странице, на которой вы хотите разместить карту, нужно вставить блок для html-кодов. Он 4-й слева на панели управления, при редактировании страницы.
- Вот так выглядят заполнение блоки для обеих сервисов:
- По умолчанию ширина карты 600 пикселей, но мы рекомендуем установить значение width равным 876 пикселям (значение меняется в коде карты, который вы уже вставили на Базиум). Так карты будут смотреться намного круче.
bazium.ru
1. Регистрируемся на Яндексе и получаем ключ
Вставка карты Яндекс на сайт производится при условии обязательной регистрации на их сервисе и получении специального ключа. Для того, чтобы пройти регистрацию, необходимо зайти на http://api.yandex.ru/maps/ и залогиниться под своей учетной записью на Яндексе (если вы никогда не регистрировались на Яндексе — тогда будет нужно предварительно зарегистрироваться — процесс занимает не более одной минуты).
После этого нужно кликнуть на ссылку «Получить API-ключ» в разделе «Разработчикам»:
На следующей странице Вам будет предложено ввести адрес вашего проекта и принять пользовательское соглашение — заполняем и нажимаем кнопку «Получить API-ключ».
Следующая страница выдает желанный результат: указан Ваш ключ (который служит в качестве уникального идентификатора) и заботливый Яндекс даже сразу предлагает Вам пример html-кода, который нужно вставить на страничку для того, чтобы карта начала показываться:
Ключ:
BB21NWVEBAAAAPwvKTAIA0hsUOvbe4BCoxOUzvhVFRTmlOmsAAAAAAAAAAADPY7DBQ78niNkhgt2sLHhTZL2pVQ==
Пример кода, предложенный Яндексом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Примеры. Знакомство с JavaScript API. Простой вызов карты.</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://api-maps.yandex.ru/1.1/index.xml?key=BB2NWVEBAAAAPwvKTAIA0hsUOvbe4BCoxOUzvhVFRTmlOmsAAAAAAAAAAADPY7DBQ78niNkhgt2sLHhTZL2pVQ==" type="text/javascript"></script> <script type="text/javascript"> window.onload = function () { var map = new YMaps.Map(document.getElementById("YMapsID")); map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10); } </script> </head> <body> <div id="YMapsID" style="width:600px;height:400px"></div> </body> </html>
2. Создаем собственную карту
Предложенный выше код будет добавлять на ваш проект обычную карту Яндекса. Теперь давайте разберемся, как вставить карту на сайт, отвечающую именно вашим потребностям — например, показывающую расположение вашего магазина или офиса. Для этого перейдем в раздел «Конструктор карт»:
Открывается достаточно понятный и простой интерфейс:
Предположим, наш офис находится по адресу Ленинградский пр., дом 10. Укажем этот адрес в поле «Найти место на карте» и нажмем кнопку найти:
Нажимаем кнопку «ОК», выбираем нужный нам масштаб и вид карты («Интерактивная» — пользователи смогут ее масштабировать и перемещаться по ней или «Статическая» — будет неподвижной) и нажимаем кнопку «Получить код».
В качестве результата получаем следующее:
<script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=7UXGfpfzOI0mK6VKESxAMdk08M4kyvtr&width=600&height=450"></script>
Копируем этот код, вставляем на страницу своего сайта и радуемся жизни!
Кстати говоря, сам конструктор обладает и другими дополнительными функциями — можно нарисовать схему проезда, выделить какую-то область прямоугольником, разместить на карте не один, а несколько объектов, изменить размер карты — все достаточно просто делается с помощью кнопок в том же самом интерфейсе.
3. Решение для WordPress
Добавить добавить карту на сайт, выполненный на движке WordPress (речь идет о географическом инструменте, карта сайта для WordPress со ссылками на страницы — это совсем из другой области) , можно также с помощью специального плагина, который называется Yandex Maps for WordPress и доступен для скачивания на официальном сайте WP.
Этот плагин не имеет большого смысла, если вам нужно только один раз добавить карту, так как для него все равно требуется получать API-ключ от Яндекса, а если вы получили ключ, то Вам не сложно тогда и сконструировать нужную Вам карту без установки ради этого плагина — так как каждый плагин хоть немного, но замедляет работу вашего ресурса.
Тем не менее, если вам потребуется производить такую вставку на каждой странице (например, у вас на сайте имеется каталог фирм и вы хотели бы наглядно показать расположение каждой из них), то тогда данное решение имеет смысл: плагин добавляет в админку в раздел с созданием записи новую панель, прямо в которой вы можете заполнить все нужные вам параметры — это значительно сэкономит вам время.
www.runcms.org
Вставка карты с помощью Яндекс Карт
1. На данный момент (начало 2013 года) конструктор карт от Яндекс доступен в версии 2.0, очень удобный и логически понятный. Для создания карты даже не требуется быть авторизованным пользователем. Первым делом необходимо создать саму карту с адресом. Для этого переходим по ссылке и в нижнем поле ввода прописываем адрес компании. После нажатия кнопки "найти" система выдаст варианты найденных адресов.
2. Ставим точку по нужному адресу и в поле описание указываем название организации. Цвет точки лучше выбрать исходя из стиля сайта, на котором будет расположена карта. Конструктор также позволяет пометить другие ориентиры на карте, например, крупные известные объекты, растянуть карту до нужного размера, провести маршрут от остановки транспорта с помощью инструмента рисования линий, редактировать масштаб.
3. Далее переходим на вкладку просмотр. Здесь можно выбрать, статической будет ваша карта или интерактивной. Лучше выбирать второй вариант, так пользователь сможет сам просмотреть близлежащий район и сориентироваться.
4. Вкладка "Код для вставки" предлагает прочесть пользовательское соглашение. После его подтверждения вам откроется код для вставки. Его можно немного отредактировать, например, убрать ссылку на Яндекс, подогнать по размерам точнее, однако существенных изменений лучше не делать.
5. Копируем данный код и вставляем на страницу контактов через HTML-редактор после текста.
6. Сохраняем внесенные изменения и проверяем полученный результат на странице сайта.
Вставка карты с помощью Google Maps
1. Алгоритм действий схож с описанным выше. Переходим по ссылке и вводим в строке поиска адрес организации. Можно также посмотреть, как это выглядит со спутника. Далее для получения кода нажимаем на знак ссылки слева. Можно скопировать имеющийся код, а можно нажать ссылку "настройка и предварительный просмотр встроенной карты".
2. При выборе редактирования откроется дополнительное окно, где можно скорректировать ее размеры.
3. Копируем полученный код и вставляем его через html-редактор на страницу сайта. Выглядеть она будет абсолютно так же, как при предварительном просмотре. В отличие от карт Яндекса, карты Google всегда только интерактивные, здесь меньше возможностей редактировать саму карту, однако можно посмотреть на местность со спутника, рельеф с названиями объектов и 3D карту.
Вернуться назад
www.kasper.by
Здравствуйте, эту статью хотелось бы начать с небольшой заметки.
Те, кто увлекается не только разработкой, но и продвижением сайтов знают, что требования к площадкам растут с каждым годом, поисковики стараются отсеивать мусорные страницы и оставлять максимально релевантные. Так просматривая последние конференции по продвижению коммерческих сайтов, заметил один похожий во всех случаях факт – это оформление страницы контактов. Прошли те времена, когда эта страница содержала только несколько телефонов и форму обратной связи. Сейчас нужно максимально информативно предоставлять контактные данный. В этом случае вам просто не обойтись без динамической карты расположения вашего офиса. Она стала неотъемлемой частью любой контактной страницы коммерческого сайта.
Яндекс предоставил разработчика собственное решение в этом направлении – а именно «Конструктор Яндекс карт», который позволяет вебмастерам без проблем добавить любую карту на свой сайт.
Итак, теперь перейдем непосредственно к действиям.
1.) Для начала переходим в сам конструктор карт — http://api.yandex.ru/maps/tools/constructor/.
Перед вами появиться карта и поле, где вы можете указать нужный вам адрес.
Вы можете создать карту проезда, даже без авторизации в Яндекс.
2.) Вводите нужный вам адрес, после чего вам высветлится подсказка с полным названием улицы, города и номера дома.
3.) После выбора адреса вы можете указать описание метки, а также выбрать ее цвет. Осле настроек нажимаем кнопку «Ok». И спускаемся вниз страницы.
4.) Нажимаем кнопку «Получить код без авторизации», если вы зарегистрированы, то сможете сразу увидеть поле кода.
5.) Копируем предоставленный код и вставляем в нужное нам место на сайте.
Несколько заметок
— данный метод вставки карты Яндекс на сайт подойдет для любых CMS: Joomla, Opencart, WordPress и прочих.
— часто, визуальный редактор, например в joomla, режет код. Так что работать со страницей контактов желательно без редактора. Либо вставлять карту проезда на сайт после всех визуальных правок.
Скопируйте код созданной карты в текстовый файл, и при правке страницы контактов, при искажении кода, вы всегда сможете его восстановить.
На этом сегодня все, в следующих статьях я продолжу выкладывать шпаргалки по технической работе с сайтами.
webprovincia.com
Совсем недавно столкнулся с проблемой размещения Яндекс.Карт на сайте для раздела Контакты. Вообще, я считаю, просто незаменимая возможность, потому как невероятно удобно скоординировать путь до какого-нибудь магазина или офиса, если под рукой есть такой удобный инструмент.
Например, я живу в Смоленске уже около 5 лет и до сих пор не знаю большую часть небольших улочек, поэтому понять, где находится суши бар, рекламку которого запихнули в почтовый ящик почти невозможно. Или даже разыгрался геморрой и куда идти, если на сайте медицинской клиники нет возможности проследить путь от центра города. А если ещё и анализы захочется сдать? Ух, вот и проблема.
Между тем поисковые системы, причём сразу оба конкурента, предлагают нам удобный инструмент – для того, что бы разместить на сайте карту Яндекса или Google Maps нам просто надо установить определённый код. Как получить его – сейчас разберёмся. Для начала заходим на главную страницу Maps.Yandex.ru и видим большую такую карту, которая сама определяет наше местонахождение и показывает центр города. У меня вот сразу показал центр Смоленска. Определяет это Яндекс, конечно же, по IP вашего провайдера. Если же разместить простой код сразу на сайте, то он вам покажет, скорее всего Москву.
Для того, что бы настроить нужную нам позицию для сайта или блога, заходим на API.yandex.ru/maps/ и наблюдаем панель управления для этих самых Яндекс.Карт. Пока рано отмечать нужную позицию, сперва стоит зарегистрировать уникальный API-ключ, который можно получить, перейдя по ссылке ниже или по адресу API.Yandex.ru/maps/form.xml – указываем адрес сайта, на котором будет размещаться код карты, соглашаемся с условиями и далее получаем этот самый код. Пока нет необходимости его куда-то копировать или сохранять – это просто наша панелька, которая будет запоминать наши сайты.
Нужные нам инструменты находятся на странице API.Yandex.ru/maps/tools/ – здесь есть Конструктор схем проезда и Определение координат нашей точки на карте. С вторым сервисом всё понятно (он просто нам укажет широту и долготу), мы будет работать именно с API.Yandex.ru/maps/tools/constructor/. Внизу прописываем нашу местность – я буду работать со Смоленском и нам Яндекс.Карты предлагают сразу несколько важных точек: вокзал, центр города, аэропорт и так далее. Где-нибудь в Москве число этих пунктом может быть значительно выше. Тут же можно растянуть карту, определив высоту и ширину окна.
Теперь самая важная и ответственная задача – найти точку, которую необходимо отметить на карте. Искать будем мой университет – Смоленский Гуманитарный Университет. Для этого приближаем или увеличиваем масштаб и перемещаемся по улицам города. Я нашёл, а вы? Теперь отметим здание точкой и подпишем как необходимо.
Теперь прежде чем установить яндекс карту на сайт, нарисуем путь от моего дома до университета. Для этого в Картах есть специальный инструмент Рисование линий. Рисуем линию от одной точки на карте до другой (тут самое интересное, потому как часто сложно догадаться как быстрее добраться до места) и нажимает Закончить.
Можно сменить вид: Схем, Спутник, Гибрид – поэкспериментируйте. Рисунок готов. Для того, что бы посмотреть как это будет выглядеть карта на самом сайте, переходим на ШАГ2, тут же можно выбрать формат: либо для сайта, либо для блога. Во втором случае, Яндекс.Карта будет отображаться в том числе и в RSS ленте. Удобно.
На третьем шаге нам предложат выбрать сайт, на котором будет размещаться код карты (как раз для этого нам и понадобилось его регистрировать в начале) и дадут код карты для размещения на сайте. Теперь уже можно установить Яндекс карту на сайт, только вот не все CMS с радостью примут JavaScript код. Так, например, Joomla просто выведет JS как обычный текст. В таком случае стоит сверстать отдельную страницу для CMS и выбрать как шаблон для страницы Контакты. В WordPress это просто, например. Вот и всё.
lred.ru
Конструктор карт – простой в использовании веб-инструмент, позволяющий создавать различные схемы проезда и отмечать нужные объекты на карте. Данную карту затем можно разместить на своем сайте или в блоге.
Для размещения карты на странице достаточно вставить сформированную конструктором строку кода на ту страницу, где необходимо отобразить карту.
Примечание. Один и тот же код может быть вставлен на одну страницу неограниченное число раз.
С помощью конструктора можно вставить два типа карт: интерактивную и статическую.
Для интерактивной карты конструктор формирует элемент script, который подгружает на страницу JavaScript-код для создания карты.
Как получить код:
- Перейдите в Конструктор Яндекс-карт.
- Введите адрес Вашего офиса или магазина в соответствующее поле и нажмите кнопку «Найти».
- Настройте карту по Вашему усмотрению и нажмите кнопку «Получить код».
- Скопируйте полученный код из соответствующего поля и вставьте его в разметку сайта.
Если Ваш сайт является копией нашего демонстрационного сайта demo.pixlpark.ru и Вы хотите заменить уже имеющуюся карту, например, на странице контактов, то зайдите в панель управления сайтом, откройте раздел CMS «Страницы сайта», найдите страницу «Контакты» и откройте ее для редактирования, затем перейдите в «Расширенные настройки страницы» (см. скриншот ниже) и в поле «Слайдер» вставьте полученный в конструкторе Яндекс-карт код вместо текущего.
Как Вы могли заметить, в коде карты есть параметры, отвечающие за размеры окна карты: width (ширина) и height (высота), – они показаны стрелками на скриншоте. Вы можете установить оптимальные для Вашего сайта значения (на Ваше личное усмотрение). Значения данных параметров указаны в пикселях (px). Если Вы желаете растянуть карту на всю ширину сайта, то парамерт width вместе с его значением надо просто удалить из кода. На скриншоте показана выделением часть кода, которую надо удалить для установки ширины карты, равной ширине сайта.
Яндекс-документация: Как добавить карту на сайт или в блог.
pixlpark.ru
Как вставить Яндекс карту на сайт: выбор очевиден
Если вы создаете сайт-визитку, блог или несложный интернет магазин, то вам будет достаточно базовых возможностей имеющегося конструктора. В таком случае вставить Яндекс карту на сайт благодаря специальному коду сможет пользователь, не имеющий специальных знаний. Если подойти к делу со всей основательностью, правильное составление схемы проезда, либо расчет цены доставки по указанному пользователем месту назначения может значительно улучшить функциональность сайта и сделать посетителя новым покупателем.
Иначе дело обстоит, если вам необходимо выйти за грани конструктора, не просто разместить карту Яндекса на сайте, а создать что-то грандиозное и неповторимое. В таком случае вам понадобится опытный программист, который знаком с работой ДжаваСкриптов.
Скрытые возможности
API Яндекс.Карт позволяет наложить слой с указанием пробок на собственном сайте, однако для реализации подобной задумки возможностей конструктора не хватит. Помимо сохранения созданных вами карт, в API конструкторе отныне не требуется получение ключа для собственного сайта, однако некоторые расширения CMS могут эти ключи попросить.
Получить такой инструмент можно в специальном разделе сайта, введя адрес вашего ресурса. Однако вернемся к вопросу о том, как вставить Яндекс карту на сайт и к конструктору. Все нужное здесь есть.
Организация конструктора
Инструменты, с помощью которых можно нанести метки на карту, находятся на верхней панели, при этом они состоят из 4 кнопок. Первая дает возможность поставить метку в форме большой запятой, ее можно раскрасить разными цветами, дать описание, а также присвоить номер. Метка ставится через активацию данной кнопки, а также клик по нужной области на схеме.
Обозначение всегда можно подвинуть, удержав левую кнопку мышки, или удалить. Прежде чем вставить карту Яндекс, воспользуйтесь возможностями и других инструментов. Далее внимания заслуживает возможность «Рисования линий». Она пригодится для показа пути до офиса вашей компании от станции метро либо остановки транспорта.
Нарисуйте многоугольник
Конструктор включает еще один важный инструмент, который получил имя «Рисование
многоугольника». Необходим он, чтобы подсветить при помощи фоновой заливки те объекты или здания, которые вы желаете пометить на схеме проезда, к ним также будут вести маршруты, описанные выше.
Необходимо активировать инструмент и планомерно обозначить весь объект по углам, далее кликнуть по узловой точке, наконец, выбрать функцию «Завершить». В итоге появится форма, и в ней можно будет задать толщину для линии обводки, прозрачность заливки, цвет, а также ввести описание.
Последняя кнопка, помещенная на панель инструментов, позволяет сделать активными маркеры в нижнем правом углу схемы, дабы изменять ее размер. Кроме того, к вашим услугам выбор способа отображения из 4 вариантов: народная, спутник, гибрид, схема; форма ввода точного места, нуждающегося в создании схемы; инструмент для изменения масштаба.
О картах и кодах
После того, как будет выполнено все вышеописанное, вам останется подарить схеме название, а также нажать кнопку, предлагающую сохранение и получение кода. Предусмотрен код для вставки карт на сайт двух видов. Первый вариант – интерактивная карта.
Такой код вставляется в качестве вызова скрипта, это может вызвать затруднения у новичков, зато посетители вашего сайта смогут выбирать вариант отображения, перемещаться по карте, менять масштаб. Карту можно идеально подстроить под размер вашей страницы, поменяв соответствующие цифры в конце кода.
Второй вариант, статическая карта, представляет собой обычную команду вставки картинки в сайт. При его установке не возникнет никаких проблем, однако схемой будет выступать обычная фотография, которую нельзя масштабировать и двигать.
В «Вордпресс» вставить код карты можно напрямую, если вами используется Html редактор во время написания и редактирования публикаций. На странице редактирования статьи нажмите на функцию «Настройки экрана», которая расположена в верхнем правом углу, поставьте галочку в пункте «Произвольные поля». После этого, под статьей возникнет одноименная область, где нужно нажать на пункт «Введите новое» и указать идентификатор для короткого кода (без пробелов, латиницей) в левой части формы. В правом участке нужно вставить код, который был получен в конструкторе Яндекс-карт.
Далее откройте функциональный файл под названием «functions.php». Добавьте особый код, предварительно создав резервную копию сайта. После указанных действий в статическую страницу или статью можно будет добавить код, полученный от конструктора Яндекс карт.
Если необходимо установить схему проезда непосредственно в каркасе блога, скрипт можно вставить напрямую, однако нужно выбрать используемый шаблон темы «Вордпресс», чтобы карта выдавалась в необходимом вам месте.
Особенности работы с Joomla
Чтобы в Joomla вставить Яндекс карту, предусмотрено несколько вариантов. Решить
поставленную задачу можно при помощи компонента и плагина «Yandexmap», особых «Яндекс карт» для Joomla, а также решения «Zh YandexMap». Для того чтобы вставить карты Яндекса, можно использовать модуль произвольного кода Html, однако предварительно необходимо отключить традиционный визуальный редактор.
Его можно снова включить, после того как код будет вставлен. Чтобы добавить схему проезда в публикацию, нужно также вставить код при отключенном визуальном редакторе либо вставить содержимое из модуля, отвечающего за произвольный код, с помощью плагина под названием «Load Module». Модуль, включающий в себя код карты Яндекса, нужно поместить в несуществующей позиции шаблона. Теперь вы знаете ответ на вопрос, как вставить Яндекс карту на сайт, все оказалось весьма несложно. Надеемся, наши советы помогут вам развить свой сайт.
fb.ru