Добавить карту яндекс на сайт


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

Обычно карта проезда помещается на странице контактов под указанными данными для связи. Вставляется она с помощью специального программного кода (скрипта). Самыми простыми способами получения такого скрипта, является использование готовых API-решений от Google или Яндекс. Для вставки карты на сайт нет никакой необходимости в знании программирования, следуя изложенным ниже инструкциям, вы получите наглядную и удобную карту.

Вставка карты с помощью Яндекс Карт

1. На данный момент (начало 2013 года) конструктор карт от Яндекс доступен в версии 2.0, очень удобный и логически понятный. Для создания карты даже не требуется быть авторизованным пользователем. Первым делом необходимо создать саму карту с адресом. Для этого переходим по ссылке  и в нижнем поле ввода прописываем адрес компании. После нажатия кнопки "найти" система выдаст варианты найденных адресов.


Конструктор Яндекс Карт

 

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

Настройка карты

 

3. Далее переходим на вкладку просмотр. Здесь можно выбрать, статической будет ваша карта или интерактивной. Лучше выбирать второй вариант, так пользователь сможет сам просмотреть близлежащий район и сориентироваться. 

Интерактивность карты

 

4. Вкладка "Код для вставки" предлагает прочесть пользовательское соглашение. После его подтверждения вам откроется код для вставки. Его можно немного отредактировать, например, убрать ссылку на Яндекс, подогнать по размерам точнее, однако существенных изменений лучше не делать.


Код схемы проезда

 

5. Копируем данный код и вставляем на страницу контактов через HTML-редактор после текста. 

Вставка кода

 

6. Сохраняем внесенные изменения и проверяем полученный результат на странице сайта.

Вид карт на сайте

Вставка карты с помощью Google Maps

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


Вставка карты Google

 

2. При выборе редактирования откроется дополнительное окно, где можно скорректировать ее размеры. 

Настройка карты Google

 

3. Копируем полученный код и вставляем его через html-редактор на страницу сайта. Выглядеть она будет абсолютно так же, как при предварительном просмотре. В отличие от карт Яндекса, карты Google всегда только интерактивные, здесь меньше возможностей редактировать саму карту, однако можно посмотреть на местность со спутника, рельеф с названиями объектов и 3D карту.

Вернуться назад

www.kasper.by

Поиск по Yandex Maps, народная карта и Яндекс.Справочник

Сам сервис онлайн карт от Яндекса (читайте про то, что такое сейчас Яндекс и почему он так называется) появился в 2004 году и с тех пор продолжает усилено развиваться, тем более, что у него есть очень мощный конкурент в лице Google maps. Жители многих крупных городов России, Украины, Казахстана или Белоруссии пользуются такими расширенным возможностями, как Пробки или Панорамы.

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


Добавить карту яндекс на сайт

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

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

Добавить карту яндекс на сайт

Про сервис Пробок и говорить не стоит. В Москве и других крупных городах на мобильниках у 90 водителей установлено приложение с Yandex Maps, хотя последнее время оно уже не помогает объехать пробки, а просто говорит о том, что стоять еще очень долго и остается только смириться и не питать радужных надежд.

Сервис Яндекс Карт предназначен прежде всего для поиска:

  1. Конкретных адресов или населенных пунктов
  2. Достопримечательностей
  3. Различных объектов
  4. Организаций

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

В ответ он получает, как правило, несколько вариантов, которые отображаются как в текстовом виде (в левой колонке), так и виде меток на карте.

Добавить карту яндекс на сайт

Каким же образом осуществляется ранжирование в этой поисковой выдаче?

  1. Во-первых, учитывает релевантность запросу и то место на схеме, которое было открыто в момент ввода запроса (чем ближе к нему территориально расположен объект, тем больше у него шансов стоять первым в левой колонке).
  2. Во-вторых, при поиске организаций существует такое понятие, как платное (приоритетное) размещение в начале списка (оплачивается при добавлении или редактировании организации в Яндекс.Справочнике, о котором речь пойдет чуть ниже). Но в основном все же учитывается географическая близость искомого объекта от того места, где вы находитесь, и только если там найдется фирма оплатившая первое место в списке, то она потеснит остальных.

    В случае, когда фирм оплативших показ в Яндекс Картах будет несколько, то они будут по очереди показываться на первом месте, чтобы никому не было обидно. Если кому-то интересно, то плата за первое место в Yandex Maps взимается по такой тарифной сетке:

    Добавить карту яндекс на сайт


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

Откуда же берет Яндекс информацию, по которой осуществляет поиск и формирует выдачу? Ну, во-первых, их собственная картографическая служба, которая, кстати, относительно недавно осилила карту всего мира, что уже само по себе является достижением. Теперь для прокладки маршрута между Улан-Удэ и Лос-Анджелесом не нужно открывать Google Maps.

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

Народная карта

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


Добавить карту яндекс на сайт

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

Если сами захотите внести свою лепту, то изучите сначала простые принципы работы с редактором Народных карт и посмотрите пример выполнения простейшей операции в нем:

Добавить карту яндекс на сайт

Яндекс Справочник — как добавить свой сайт или фирму на карту

В-третьих, источником поиска по организациям является сервис Яндекс.Справочник. Знали про такой? Если у вас есть свой бизнес, то вы, наверняка, уже добавили свои реквизиты туда (адрес, телефоны, сайт и т.п.). Еще не добавили? Ну, как же вы так оплошали?

Такую ситуацию нужно немедленно исправить, ибо в сам справочник пользователь вряд ли полезет, а вот поиск на карте его запросто может заинтересовать, особенно если вы продвигаетесь по геозависимым поисковым запросам. Даже в обычной выдаче при явной географической привязке запроса на нулевом месте будет показана Yandex Maps с ответами:


Добавить карту яндекс на сайт

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

Если вашей фирмы там нет, то воспользуйтесь формой добавления новой организации в Справочник, кнопка вызова которой появится с правой стороны под формой проверки:

Добавить карту яндекс на сайт

Далее следуйте инструкциям в приведенном ниже ролике (указанные данные, такие как, например, телефон или адрес, потребуется подтвердить, поэтому они не должны быть фейковыми, иначе добавиться на карту не получится):

Добавить карту яндекс на сайт

При этом нужно быть авторизованным на Yandex и лучше всего, если это будет не ваш личный аккаунт, ибо может понадобиться отредактировать данные добавленные на карту (или заказать приоритетное размещение), а доверять свой аккаунт сотруднику будет не всегда правильно. Чтобы получить новый Яндекс Паспорт достаточно будет следовать приведенным инструкциям.

Чем еще привлекателен поиск по Yandex Maps для пользователей, так это тем, что они могут почитать и при желании оставить отзыв об организации. Причем отзывы модерируются (не владельцами фирмы, естественно, а сотрудниками зеркала рунета) и явный спам или бред отсеивается.

Добавить карту яндекс на сайт

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


Создание карт в Яндексе, маршруты и мобильные приложения

Это мы описали три основных источника, откуда Яндекс черпает информацию при поиске по географическим объектам. Но есть еще и четвертый. Это так называемые метки, которые пользователь оставляет на так называемых «Моих картах», сохраняя их с возможностью публичного доступа к ним. Понимаете о чем я говорю? Если нет, то буквально в паре абзацах попробую уложиться с разъяснениями.

В левой колонке есть вкладка «Мои карты». Суть ее заключается в том, что здесь вы можете сохранить все те метки, выделения, проложенные маршруты и другие вещи, которые вы сотворили на Yandex Maps. Лично я таким образом отмечал места, куда мне удалось доехать на велосипеде в окрестностях моего местожительства.

Добавить карту яндекс на сайт

Однако, вы можете поставить метку, выделить любое здание (проложить маршрут) и написать, что там находится ваша фирма, добавив в описание метки нужные ключевые слова (в этом случае подтверждать информацию будет не нужно), ибо есть вероятность учета этой информации при поиске по Yandex Maps. В таком случае карту лучше будет сохранять как публичную (пометка «всем») на приведенном выше скриншоте.


Подробности читайте в статье про получение бесплатного коммерческого трафика с Яндекс Карт, которую опубликовал автор блога Мистерия Онлайн. Там описаны некоторые хитрости, которые работали, во всяком случае, на момент написания той заметки.

Хотя, возможность сохранения созданных меток и разметок может пригодиться, как я и упоминал, просто в личных целях. В этом случае лучше всего будет сохранять карты, предварительно авторизовавшись на Яндексе, чтобы потом можно было их редактировать, сохранять их неограниченное число штук, а так же помечать их как личные (только мне) или как узконаправленные (только по ссылке, которые вы кому-то сообщите, а при просмотре списка ваших творений другим пользователем она видна не будет).

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

Раз уж речь зашла о прокладке маршрута на Yandex Maps, то и об этом скажу пару слов. Удобная штука. Когда не было машины, то актуально было прокладывать маршрут движения на общественном транспорте в незнакомое место.

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

Добавить карту яндекс на сайт

К тому же, Yandex Maps предупреждает и про время, предположительно необходимое на совершение данного паломничества и даже альтернативные маршруты предлагает к вашему рассмотрению.

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

Добавить карту яндекс на сайт

Далее достаточно нажать кнопку «Проложить» и увидеть результат на карте Яндекса, а в левой колонке почитать текстовое описание совершаемых поворотов и прочих маневров, если это необходимо.

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

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

Но маршруты и пробки прокладывать дома, конечно же, интересно, однако чаще всего мы с вами пользуемся именно мобильными приложениями Яндекса (Карты, Навигатор или Метро). Первая программа, думаю, установлена на 90% телефонов в крупных городах России, где имеют привычку собираться огромные пробки. Оно и понятно, ибо удобно, оперативно и достоверно. Меня эта шняга пока серьезно не подводила.

Мобильные приложения можно будет совершенно бесплатно скачать с официального сайта или же распознать приведенный QR код, со ссылкой на закачку файла по мобильному телефону (на нем у вас должна стоять какая-нибудь программа, помогающая расшифровать этот QR код):

  1. Карты и Пробки Добавить карту яндекс на сайт
  2. Яндекс Навигатор Добавить карту яндекс на сайт

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

Добавить карту яндекс на сайт

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

Api Яндекс карт и конструктор для их создания

Ну, вот с общими вопросами покончили, теперь пора переходить к практике, а именно к тому, как создать в конструкторе и вставить на свой сайт карту от Яндекса. На самом деле это и легко, и сложно одновременно.

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

Собственно, есть очень хороший ролик, который поможет вам принять решение о необходимости со всем этим заморачиваться — Как улучшить сайт с помощью API Яндекс.Карт (в примерах):

Добавить карту яндекс на сайт

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

Подробности смотрите в ролике, где рассказывается как улучшить интернет-магазин с помощью карт:

Добавить карту яндекс на сайт

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

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

Да, сам термин API (application programming interface) означает получение возможности использовать какое-то программное обеспечение, не зная вообще как оно работает, но имея описание тех инструментов (ручек), которые необходимы для его подключения и реализации тех или иных возможностей. Штука эта распространенная и довольно часто используется.

Апи Yandex Maps описано по приведенной чуть выше ссылке, но также имеется и простой конструктор, который вам позволит оперативно создать карту нужного вам района, поставить на ней необходимые метки с описаниями, выделить нужные объекты и показать путь, по которому к ним проще всего добраться, например, от ближайшей станции метро.

Конструктор карт в Яндексе

Живет API конструктор Яндекс карт по приведенному адресу и представляет из себя довольно-таки приглядную картину:

Добавить карту яндекс на сайт

Равно как и при добавлении организации в справочник Яндекса, при работе с этим конструктором лучше всего будет завести отдельный аккаунт в зеркале рунета (корпоративный, например), ибо созданные в нем карты можно будет потом редактировать (не меняя кода, который вы вставили на свой сайт), но вот перенести их в другой аккаунт не получится.

Кроме сохранения созданных карт, в новом API конструкторе теперь не требуется получать ключ API для своего сайта, хотя некоторые расширения для используемых вами CMS (движков сайтов) могут этот ключи попросить. На всякий случай упомяну, что получить API-ключ можно на странице по приведенной ссылке, просто введя адрес своего ресурса:

Добавить карту яндекс на сайт

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

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

Добавить карту яндекс на сайт

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

Второй инструмент в API-конструкторе Яндекс карт называется «Рисование линий» и может пригодиться при показе пути движения до вашего офиса, например, от ближайшей станции метро или остановки общественного транспорта. Рисуется она так. Кликаете в месте начала маршрута, потом кликаете в месте первого поворота и так далее вплоть до конечной точки.

Добавить карту яндекс на сайт

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

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

Добавить карту яндекс на сайт

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

Ваша задача состоит в том, чтобы активировав этот инструмент в API конструкторе, планомерно обкликать все здание по углам, после чего кликнуть по любой узловой точке и выбрать «Завершить».

Добавить карту яндекс на сайт

В результате появится форма, в которую так же, как и в случае с маршрутом, можно будет ввести описание, задать цвет и прозрачность заливки, а также толщину линии обводки.

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

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

Добавить карту яндекс на сайт

После всех этих непосильных трудов вам только останется дать схеме название и нажать кнопку «Сохранить и получить код». Однако, вам на выбор будет предложено два варианта кода для вставки карты на свой сайт:

Добавить карту яндекс на сайт

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

    Полученный код интерактивной карты Яндекса можно будет подогнать по размеру под ширину вашей страницы, просто поменяв цифирьки в его конце (715 пикселей, в моем случае):

    <script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=CFQ6uGHTgEElnjIHeZkCt8ySKv9DEJkG&width=715&height=450"></script>
  2. Статическая — код API будет представлять из себя обычный тег IMG для вставки картинки на сайт, который не вызовет проблем ни при каких обстоятельствах, но зато схема будет представлять из себя просто фотку, которую нельзя ни масштабировать, ни двигать. Ширину и высоту статической схемы проезда опять же можно будет изменять прямо в коде.
    <img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=8dq0AuCy924rvk5YN8zIpJuHRg2dPybP&width=600&height=443" alt=""/>

    Добавить карту яндекс на сайт

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

В Вордпрессе вставить код интерактивной карты на сайт можно будет напрямую (в тексте статьи), если вы используете Html редактор при написании и редактировании публикаций (у меня, например, визуальный вообще не работает).

Правда, если вы переключитесь в визуальный, то он этот самый код со скриптом может потереть, поэтому будьте осторожнее, либо используйте для вставки карт от Яндекса короткие коды (или произвольные поля), как — опишу чуть ниже.

Итак, для начала на странице написания или редактирования статьи в Вордпрессе нажмите на расположенную в правом верхнем углу кнопку «Настройки экрана» и поставьте галочку напротив пункта «Произвольные поля»:

Добавить карту яндекс на сайт

Под статьей появится область с одноименным названием, где вам нужно будет нажать на «Введите новое», после чего указать в левой форме идентификатор короткого кода (латиницей и без пробелов), в правую вставить код полученный в конструкторе Yandex Maps:

Добавить карту яндекс на сайт

Теперь открываете ваш функциональный файл functions.php (живет он в папке с используемой темой оформления, а подробнее про его возможности читайте по приведенной ссылке).

Добавьте в него приведенный чуть ниже код (но с умом и предварительно сделайте бекап, а работу эту проводите не из админки Вордпресса, а подключившись к сайту по ФТП и открыв этот файлик в Нотепаде с плюсами):

function customscript_shortcode($atts, $text) { global $post; return get_post_meta($post->ID, $text, true); } @add_shortcode('customscript','customscript_shortcode');

После этого в статью или статическую страницу можно будет вставлять код, полученный в конструкторе Яндекс карт, с помощью такой вот конструкции, где вместо «yandexmap» вставьте используемый вами идентификатор:

Добавить карту яндекс на сайт

Теперь вам не страшен визуальный редактор, который готов порезать все, что отличается от Html кода. Ура. Если нужно вставить схему проезда в каркас блога (хедер, сайдбар или футер), то скрипт туда можно вставлять напрямую, но нужно будет выбрать нужный шаблон темы Вордпресса, чтобы карта выводилась там, где вы хотите. Про назначение шаблонов читайте по приведенной ссылке.

Для вставки API карты с Яндекса на сайт под управление Joomla можно будет использовать все тот же модуль произвольного Html кода, но предварительно отключить визуальный редактор, чтобы код опять же не порезался им. После вставки редактор можно включить взад.

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

В этом случае модуль с кодом карты от Яндекса нужно расположить в несуществующую позицию шаблона (банально набрать в поле выбора позиции в настройках модуля произвольного Html кода что-нибудь типа: yandex-karta). А затем, уже при написании или редактировании статей, вы сможете вставить в нужном месте конструкцию:

{loadposition yandex-karta}

Кстати, если вдруг этот способ у вас не работает, то зайдите в менеджер плагинов (из админки Joomla, выберете пункты меню «Расширения» — «Менеджер плагинов») и найдите, а затем активируйте «Content — Load Module». Он входит в стандартный комплект поставки Joomla, поэтому он у вас должен быть в обязательном порядке.

Вот, еще стоит сказать, что выдернуть схему и вставить ее на свой сайт можно и из упомянутых чуть выше «Моих карт». Помните, я там говорил, что можно получить ссылку на сохраненную схему, кроме этого можно было получить еще и YMapsML-файл, который запросто можно прикрутить к сайту, подключив предварительно к нему API.

Добавить карту яндекс на сайт

Для подключения Апи Яндекса достаточно будет разместить между тегов head (найти их в случае Joomla или Вордпресс можно так же, как это было описано с статье про добавление фавикона на сайт) следующий вызов скрипта:

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>

Ну, а в нужном месте (где должна вставляться и выводиться схема проезда) достаточно будет вставить:

<script type="text/javascript">? ymaps.ready(function () {? var map = new ymaps.Map('YMapsID', {? center: [55.7, 37.5],? zoom: 9,?  behaviors: ['scrollZoom', 'drag']? });?? //Необходимо подставить свой URL.?  ymaps.geoXml.load("скопированная ссылка на YMapsML-файл")? .then(function (res) {? // Добавление загруженных из YMapsML-файла объектов на карту.? map.geoObjects.add(res.geoObjects);?  });? });?</script>

Будем считать, что с созданием простейшей схемы проезда и вставкой ее на свой сайт, мы кое-как разобрались. Что же дальше? Наверное, стоит сказать пару слов о более сложных вариантах API Яндекс Карт, которые уже не подвластны упомянутому конструктору, но зато вполне по силам человеку знакомому с языком ДжаваСкрипт.

В этом случае перед вами открываются все возможности API Yandex Maps, которые описаны по приведенной ссылке. Там имеется вся необходимая документация, а девушка из этого ролика введет вас в курс дела:

Добавить карту яндекс на сайт

Отлично, передайте эти материалы вашему программисту и он вам сварганит что-нибудь похожее на это (если в этом есть необходимость):

Добавить карту яндекс на сайт

ktonanovenkogo.ru

Почему именно ставить карту от Яндекса?

Ответ на этот вопрос должен найти каждый вебмастер, так как это сродни вероисповеданию. У меня, к примеру, был выбор между картами от Google, от Yandex и картами от 2GIS. Возможно выбор сервисов намного шире, но мне хватило рассмотрения этих трех. Можете полистать форум о компьютерном железе, может там есть какая-нибудь информация по этому вопросу.

Я очень хорошо отношусь к Google, но вот что-то с их картами у меня как-то сразу не заладилось. Поэтому по собственным соображениям я пока ни на один сайт карты от Google не внедрял.

Карты от 2GIS – это просто шикарные карты, но для доступа к их API необходимо написать официальную заявку, которую будут несколько дней мурыжить и в итоге так и не понятно – дадут возможность использования их или нет. У кого много времени или есть дотошный заказчик – велком в тех. поддержку 2GIS.

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

Как добавить Яндекс.Карты на свой сайт?

Все просто. Давайте по-порядку.

  1. Нужно зайти на сайт http://api.yandex.ru/maps/tools/constructor/ и зарегистрироваться. Эта общая регистрация для всех дополнительных сервисов, таких как Яндекс.Вебмасте, Яндекс.Директ и так далее. Если Вы уже зарегистрированы, то дополнительно делать ничего не нужно. Хотелось бы немного дополнить: если вы добавляете карты не для себя, а для заказчика, то будет честнее и проще вам в будущем создать новый аккаунт для заказчика.
  2. Далее в поиске ниже ищем нужный вам регион, ищем улицу. После того, как вы нажали найти, метка будет стоять на том здании, которое вам нужно. Если здание не найдено или не обозначено на карте, то можно просто подвинуть метку как надо. Жмем во всплывающем окне ОК и ставим свою метку. Можно как выделить некоторую область, так и просто поставить метку в виде точки. Добавляем текстовое описание и если нужно меняем стиль оформления.
    Как добавить карту от Яндекс на свой сайт?
  3. Далее переходим к 3 шагу Код для вставки и вводим доменное имя, где будет красоваться карта, ставим галку, что согласны с условиями размещения карты. Давим на Получить код карты.
    Как добавить карту от Яндекс на свой сайт?

Это все! Далее Вам будет предложено скопировать html-код на страницу своего сайта и лицезреть красивую карту с вашей меткой.

P.S. Для того, чтобы валидатор W3C не ругался на вставленную вами карту, необходимо все символы амперсанда – & заменить на XML-обозначение – &#38;. Почему этого не делает сам Yandex, не понятно.

adminway.ru

Вставить Яндекс карты на сайт

Вставить Яндекс карту на свой сайт можно несколькими способами:

  • Использование возможностей конструктора;
  • При помощи плагинов и модулей;
  • API от Яндекс;

Использование возможностей конструктора.

Если ваш сайт создан при помощи какого-то конструктора, вроде uCoz или WIX. Проверьте, поддерживает ли конструктор эту возможность. На многих конструкторах эта идея продумана и порой достаточно вставить виджет в необходимое место, и можно любоваться картой от Яндекс на сайте.

Карта при помощи плагинов и модулей.

Для большинства CMS разработаны различные плагины и модули. Если у вас сайт на WordPress и вы не умеете или не любите возиться с кодами, вставить Яндекс карту на сайт можно при помощи плагина Oi Yandex.Maps for WordPress.

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

Выглядит такая карта вот так:

карта яндекс плагин

Благодаря плагину, на карте можно сделать отметку любого адреса, вставить всплывающий текст (описание местоположения – «кабак у дяди Васи»).

Плагин Oi Yandex.Maps for WordPress очень легок и прост, но не без минусов. Если вам необходимо указать какой-то мелкий, никому не известный населенный пункт, придется сначала узнать его координаты, иначе Он может быть просто не найден, или найден «тезка» вашего городишки. Но в целом оценка 5 баллов!

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

API от Яндекс.

Третий способ вставить Яндекс карту на сайт, это использование API (Интерфейс Программирования приложений) от Яндекс. Не пугайтесь умных словечек, вам не нужно быть программистом, чтобы добавить Яндекс карту на сайт при помощи API. Делается это в два счета.

Просто переходим по ссылке — https://tech.yandex.ru/maps/tools/constructor . На этой странице можно сконструировать карту Яндекса любого размера, при этом проложив маршрут и сделав пометку об объекте. Затем нужно скопировать предоставленный код и вставить на свой сайт.

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

Результат будет примерно такой:

конструктор карт Яндекс

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

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

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

Результат работы навигатора нас не порадовал. Дали мы километров 12 круга по утренней Москве, а могли просто свернуть в небольшой переулок, который появился недавно. Бывало едешь в каком-нибудь тоннеле, навигатор говорит: «Поверните направо», а поворачивать некуда, справа стена ?

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

Вставить карту от гугл (Google Maps) на сайт можно так же как в предыдущем способе.

  • С использованием виджета конструктора, если таковой поддерживает ваш конструктор сайта;
  • При помощи плагина;
  • С использованием API;

Использование виджета конструктора для вставки гугл карты (Google Maps) на сайт.

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

Вставка карты Гугл на сайт WordPress при помощи плагина.

Вывести карту от гугл (Google Maps) на сайт WordPress можно при помощи плагина MapPress Easy Google Maps. После установки и активации плагина, на экране добавления новой статьи, появиться раздел «MapPress».

Для создания новой карты, нужно кликнуть по кнопке «New Map».

new map

И в появившемся окне заполнить информацию – название карты, размер и маркер. К тому же есть возможность вставки своей картинки, которая будет появляться при клике по маркеру.

Вот пример, как будет выглядеть карта от гугл, выводимая плагином MapPress Easy Google Maps:

карта гугл плагин

Добавление карты Гугл на сайт при помощи Google Maps.

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

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

Google Maps

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

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

Страница конструктора карт от Яндекс доступна по ссылке — https://tech.yandex.ru/maps/tools/constructor.

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

При необходимости сразу измените масштаб карты.

новая карта

Теперь воспользуемся панелью инструментов. Можно отметить несколько точек (маркеров), изменить их цвет и задать описание.

расстановка маркеров

При помощи инструмента «рисование линий», нужно нарисовать маршрут проезда к объекту.

маршрут на карте

Инструмент «Рисование многоугольников» позволит отметить какую-то область на карте.

отметка отдельной площади

При помощи инструмента «Изменение размеров карты» можно подогнать ее под размер вашей web страницы.

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

код карты Яндекс

Как видите все очень просто.

Карта метро на сайт

Вставить карту метро на сайт можно двумя способами.

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

Второй способ вставить интерактивную карту метро на сайт – вывести ее во фрейме с сервиса Яндекс Метро.

Буду признателен, если кто-то подскажет другой способ!

nazyrov.ru

Бром
Блина ну кото так делает. Вы же рассказываете как сделать!!! Под рукой должен быть ваш примерник, а все ссылки без таржет бланк ((
NMitra
"Под рукой должен быть ваш примерник" — вы про API Яндекс.Карт? Каких именно примеров не хватает?
"все ссылки без таржет бланк" — это не всегда удобно в первую очередь для посетителя.
Штиф Васлер
А как сделать кнопку раскрытия карты на всю страницу? Как на озоне, например
http://www.ozon.ru/context/map/?areaId=2
(в верхнем правом углу)
NMitra
Через IP Карт ( https://tech.yandex.ru/maps/ ) — нужно разбираться в JavaScript, читать документацию, в интерфейсе представлены не все возможности Карт
Штиф Васлер
А Вы не знаете?
Штиф Васлер
о, нашел
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.Container-docpage/#enterFullscreen
только как использовать не понял еще
NMitra
Я не читала, не было необходимости

shpargalkablog.ru

Зачем нужна интерактивная карта

  1. Удобно для клиента — легко планируется маршрут с учетом всех актуальных изменений, так как Яндекс оперативно вносит данные о ремонтах и новых застройках на свои карты.
  2. Удобно владельцу сайта — все корректировки вносятся на карту автоматически, достаточно один раз вставить карту на сайт, потом обновления подгружаются из базы Яндекса сами.
  3. Поднимает авторитет и уровень доверия к организации. Хотя такую примочку может сделать любая шараж-монтаж контора, на подсознательном уровне сайт с интерактивной картой воспринимается лучше.

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

С развитием интернет сервисов, таких как Яндекс Карты и Google Maps, появилась возможность сделать карты живыми – интерактивными. Такие можно вертеть в разные стороны, менять масштаб, маршруты с разных точек задавать, планировать свое перемещение с учетом пробок и многое другое.

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

И для того, чтобы помочь вам сделать свой веб ресурс более приветливым к людям я расскажу, как добавить Яндекс карту на сайт, делается это очень легко с помощью специального конструктора (не сложнее чем вставка видео с Youtube).

Конструктор карт Яндекс

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

Начинается процедура с этой странички — tech.yandex.ru/maps/tools/constructor/

создать карту

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

Фишка в том, что вы сможете вставить не просто Яндекс карту с точным адресом, а карту с любым количеством объектов выделенных разными маркерами и цветами – объектами, точками, маршрутами.

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

Добавление объектов

Первым инструментом послужит форма поиска, которая находится в верхней части карты. С ее помощью мы можем отыскать нужную точку по адресу, координатам или названию. Вводим в поле данные запроса, пример с адресом «Москва, Красная площадь»:

найти объект

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

метки на карте

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

иконки

Слева наполняется список всех отмеченных на карте адресов.

Изменение масштаба и положения

С помощью клавиш «+» и «-», находящихся в левой верхней части макета устанавливается оптимальный масштаб. Полная карта России не нужна, чтобы перемещаться по центру Москвы и, если вы указываете точечный объект в каком-то городе, лучше настроить масштаб на уровне, когда различимы названия улиц и окружающих домов.

масштаб карты

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

Контуры объектов (многоугольники) и линии

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

Точек может быть сколько угодно, поэтому, фигура, закрашенная на карте, допускает любую степень сложности. Завершить построение контура можно кликом мыши по последней установленной точке или переключением на любую другую кнопку конструктора (например, на линии). Я выделил контуры Московского Кремля по его стене:

контуры объекта

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

Таким способом можно показать оптимальный маршрут осмотра достопримечательностей.

Конечную точку подтверждаем повторным ее нажатием мышью, там будет меню «Удалить»/«Завершить». После выбора завершения открывается поле для подписи к конечной точке и настройки параметров линии (толщина, цвет, прозрачность).

линии маршрута

Завершаем маршрут нажатием на «Готово».

Вид карты и наложение пробок

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

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

вид карты

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

карта Яндекс спутник

Название и описание

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

название, описание, сохранить

Код карты для вставки на сайт

Наша карта уже готова и теперь надо получить ее код для вставки на сайт, Яндекс дает возможность сделать:

  • интерактивную карту (о которой я говорил с самого начала);
  • статическую – обычная картинка, только с мудреным кодом, ничего двигать в ней нельзя, в добавок еще и максимальное число объектов ограничено;
  • печатную — файл-изображение высокого качества, поддерживаются не все страны, в основном СНГ и Турция, не поддерживаются спутниковая и гибридная версия.

Выбор между ними будет выведен сразу после сохранения.

код Yandex map

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

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

Итоговый код появляется после нажатия на кнопку «Получить код карты», мой выглядит вот так:

При выборе печатной карты добавится выбор формата файла — 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


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.