Как вставить карту Яндекс, Google или карту метро на сайт?
Привет, друзьям блога nazyrov.ru!
Сегодня замечательный пост, который многим может пригодиться. А точнее, я расскажу, как вставить карту на сайт. Нет, это не XML или HTML карта, которые обязательно должны быть на любом блоге, о них я уже рассказывал здесь.
Я расскажу, как вставить обычную графическую карту, или карту проезда, можно назвать как угодно. Такую карту можно позаимствовать с Яндекс карты или Google maps. Зачем же ее нужно ставить на сайт, спросите вы. Это интересное дополнение сайта и улучшение удобства пользования. На тревел блогах, благодаря таким картам, можно указывать маршрут и отмечать какие-то интересные места. Для сайтов визиток, это указание как до них добраться. Идей применения такой карты предостаточно, стоит только включить фантазию.
Быстрая навигация:
Вставить Яндекс карты на сайт
Вставить карту Гугл на сайт
Как установить карту проезда на сайт
Карта метро на сайт
Вставить Яндекс карты на сайт
Вставить Яндекс карту на свой сайт можно несколькими способами:
- Использование возможностей конструктора;
- При помощи плагинов и модулей;
- API от Яндекс;
Использование возможностей конструктора.
Если ваш сайт создан при помощи какого-то конструктора, вроде uCoz или WIX. Проверьте, поддерживает ли конструктор эту возможность. На многих конструкторах эта идея продумана и порой достаточно вставить виджет в необходимое место, и можно любоваться картой от Яндекс на сайте.
Карта при помощи плагинов и модулей.
Для большинства CMS разработаны различные плагины и модули. Если у вас сайт на WordPress и вы не умеете или не любите возиться с кодами, вставить Яндекс карту на сайт можно при помощи плагина Oi Yandex.Maps for WordPress.
Установка и настройка плагина стандартная. После того, как вы активируете плагин, в визуальном редакторе появится кнопка «Яндекс карта», нажав на которую вы сможете вписать населенный путь, и плагин при помощи шорткода выведет карту. Эта карта ничем не будет отличаться от той, к которой вы привыкли, просматривая пробки в Яндекс. Карту можно передвигать, менять масштаб, переключаться на вид со спутника и прочие фишки, которые есть в стандартных Яндекс картах.
Выглядит такая карта вот так:
Благодаря плагину, на карте можно сделать отметку любого адреса, вставить всплывающий текст (описание местоположения – «кабак у дяди Васи»).
Плагин Oi Yandex.Maps for WordPress очень легок и прост, но не без минусов. Если вам необходимо указать какой-то мелкий, никому не известный населенный пункт, придется сначала узнать его координаты, иначе Он может быть просто не найден, или найден «тезка» вашего городишки. Но в целом оценка 5 баллов!
Нашел еще несколько аналогичных плагинов, принцип работы схож, поэтому смысла не вижу их описывать.
API от Яндекс.
Третий способ вставить Яндекс карту на сайт, это использование API (Интерфейс Программирования приложений) от Яндекс. Не пугайтесь умных словечек, вам не нужно быть программистом, чтобы добавить Яндекс карту на сайт при помощи API. Делается это в два счета.
Просто переходим по ссылке — [aspan]http://tech.yandex.ru/maps/tools/constructor[/aspan] . На этой странице можно сконструировать карту Яндекса любого размера, при этом проложив маршрут и сделав пометку об объекте. Затем нужно скопировать предоставленный код и вставить на свой сайт.
Процесс конструирования Яндекс карты опишу чуть ниже. Да и на странице конструктора карт тоже имеются все необходимые подсказки.
Результат будет примерно такой:
Как вставить карту гугл на сайт
Не знаю, пользуетесь ли вы картами от гугл. Лично я ими перестал пользоваться после одного не совсем приятного случая, который произошел со мной около полугода назад.
Поехали мы с ребятами в Москву по делам на своей машине, и чтобы не заблудиться, скачали навигатор (уже не помню какой) на планшет. Навигатор использовал технологии Google Maps, предупреждал о камерах на дороге и прочие навороты. Как оказалось, Москва строится семимильными шагами, и в гугл картах это не учитывалось. Карты просто устарели, в одном месте построили новую развязку, в другом идет стройка новой высотки и переулок перекрыли, отправляя машины в объезд.
Результат работы навигатора нас не порадовал. Дали мы километров 12 круга по утренней Москве, а могли просто свернуть в небольшой переулок, который появился недавно. Бывало едешь в каком-нибудь тоннеле, навигатор говорит: «Поверните направо», а поворачивать некуда, справа стена 🙂
Но у гугл карт есть и большие плюсы. В отличие от Яндекса, который ориентирован в основном на Россию и ближнее зарубежье, Google Maps может показать самые отдаленные уголки нашей планеты.
Вставить карту от гугл (Google Maps) на сайт можно так же как в предыдущем способе.
- С использованием виджета конструктора, если таковой поддерживает ваш конструктор сайта;
- При помощи плагина;
- С использованием API;
Использование виджета конструктора для вставки гугл карты (Google Maps) на сайт.
Я не любитель конструкторов. Поддерживает ли ваш конструктор эту технологию, можно узнать у тех поддержки. На uCoz такой виджет присутствует, это знаю точно.
Вставка карты Гугл на сайт WordPress при помощи плагина.
Вывести карту от гугл (Google Maps) на сайт WordPress можно при помощи плагина MapPress Easy Google Maps. После установки и активации плагина, на экране добавления новой статьи, появиться раздел «MapPress».
Для создания новой карты, нужно кликнуть по кнопке «New Map».
И в появившемся окне заполнить информацию – название карты, размер и маркер. К тому же есть возможность вставки своей картинки, которая будет появляться при клике по маркеру.
Вот пример, как будет выглядеть карта от гугл, выводимая плагином MapPress Easy Google Maps:
Добавление карты Гугл на сайт при помощи Google Maps.
Это еще один способ добавить карту Гугл на сайт. Для этого находим в Гугл картах необходимый населенный пункт, затем нажимаем на значок шестеренки в правом нижнем углу, и во всплывшем окне выберете раздел «Поделитесь с друзьями или получите код карты».
Затем необходимо скопировать код и вставить на сайт.
Выглядеть такая карта будет вот так:
Как установить карту проезда на сайт?
Для реализации этой цели, больше всего мне понравился конструктор Яндекс Карты. Как я уже упомянул выше, на странице конструктора есть инструкция по созданию и добавлению карты проезда на сайт. Но все же давайте вкратце опишу сам процесс.
Страница конструктора карт от Яндекс доступна по ссылке — http://tech.yandex.ru/maps/tools/constructor.
Для создания карты проезда, введите в поисковую строку название населенного пункта. Конструктор сам найдет нужное место. Наша задача только немного отредактировать карту и задать схему проезда.
При необходимости сразу измените масштаб карты.
Теперь воспользуемся панелью инструментов. Можно отметить несколько точек (маркеров), изменить их цвет и задать описание.
При помощи инструмента «рисование линий», нужно нарисовать маршрут проезда к объекту.
Инструмент «Рисование многоугольников» позволит отметить какую-то область на карте.
При помощи инструмента «Изменение размеров карты» можно подогнать ее под размер вашей web страницы.
И в заключение нужно ввести название карты проезда, сохранить ее и получить код, который можно вставить на сайт.
Как видите все очень просто.
Карта метро на сайт
Вставить карту метро на сайт можно двумя способами.
Первый способ вставить статичную карту метро на сайт — просто сделать скриншот, затем в фотошопе сделать необходимые пометки, если таковые имеются и вставить картинку на сайт.
Второй способ вставить интерактивную карту метро на сайт – вывести ее во фрейме с сервиса Яндекс Метро.
Буду признателен, если кто-то подскажет другой способ!
Загрузка...
Интересно, теперь надо придумать зачем ее вставлять 🙂 Но тем не менее, спасибо за информацию.
Андрей, я ведь в статье написал, что карта нужна преимущественно для сайтов визиток и мелких компаний.
Для блогов про путешествия тоже необходимая вещь… Часто встречаю интересную статью, а вот как добраться и точки на карте нету.
Это точно ))
Привет. А я частенько вставляю карты. Когда показываю маршрут как добраться.
Но пользуюсь Гуглами, они мне больше нравятся. Знают такие места на Урали, о которых Яндекс не подозревает 🙂
Привет. Это точно )) Я сам тоже это заметил. Если бы гугл еще регулярно обновлял карты мегаполисов, вообще цены бы ему не было.
А я пока еще не встречался с затруднениями. Мегаполисы меня не особо интересуют, а вот места отдаленные от цивилизации он показывает хорошо. Даже встречал 3 вида маршрута — автомобиль, велосипед и пешком 🙂
Согласен, у Google хорошая спутниковая топографическая съемка. Ради интереса смотрел город в котором я родился (в Киргизии), Яндекс показывает только в виде схемы, никаких отметок улиц и тем более съемок со спутника. А при помощи Google карт увидел даже крышу дома своего ))
Сложность видимости города в том, что он расположен в ущелье горной местности.
У Гугла, видимо, хорошие спутники))
Ну уж получше чем у Яндекса 🙂
Да, на Яндекс.Карте не обнаружила здание, которое построено еще в 50-х годах прошлого века. Пришлось карту от Гугла ставить.
Андрей, оказывается все так просто, как «дважды два»! Как раз, в скором времени буду делать для подруги сайт-визитку, так там нужна будет карта проезда. Очень и очень помогли! Спасибо!
Пожалуйста, Татьяна!
Андрей, не описан статичный способ установки, когда карта является изображением.
Да, Максим. Спасибо за дополнение.
Когда-то еще на CMS Drupal делал сайт-визитку и использовал API Яндекса. Все было достаточно просто.
Для обычных блогов это конечно не нужно, но для визиток и тревел блогов и правда будет полезно.
Андрей, чем делал рейтинг статей?
Плагином WordPress Related Posts. В Google сниппет стал заметно выделяться ))
Довольно часто пользовался вставкой карт, когда были у меня три сайта туристической тематики. А недочеты есть и гугловских карт и у яндекса, так что прежде чем ставить нужно убедиться в том что нет ошибок
У любого сервиса есть свои плюсы и минусы. Думаю исходя из этого и нужно выбирать то, что подходит именно вам.
Помню когда по Бали путешествовал, несколько раз по таким картам отправлялся совсем в другую сторону. Координаты в статье правильно напишут, а точку на карте отметят криво или ошибки какие-то.
О прикольная штука, Андрей! Я как раз не знала как это делать, очень удобно, особенно при объяснении карты проезда. Спасибо, буду знать.
Пожалуйста!
Полезная штука для магазинов и сайтов визиток. Вопрос, как сильно такая карта грузит сайт? Андрей, ты случайна не проверял этот момент?
Нет не проверял, но думаю не больше чем видеоролик вставленный с ютуб.
По сути API карта это обычный виджет, и нагрузка от него не сильно отличается от виджета группы соц. сети. Плагин конечно немного тяжелее.
Классная статья! Думаю стоит взять её на вооружение)) Кстати, это первый пост, который я встречал в сети на такую тему, так что Андрей, первые позиции в поисковых системах обеспечены! 🙂
Спасибо, Жень.
Надеюсь на первые позиции 🙂 По одному НЧ запросу на эту статью уже есть трафик с ПС.
Гугловская больше нравиться.Заметил. что яндекс копирует все примочки, которые вводит гугл. сначала гугл изменит тон карты.потом яндекс сделал тоже самое.
не так давно гугл ввёл меню в виде небольших иконок. Через некоторое время аналогичное появилось и у яндекса.
Сам не раз замечал, что Яндекс повторяет за «старшим братом». Это касается всех сервисов — карты, поиск, картинки, фильтры и т. д.
Пожалуй буду использовать 3 способ( API от Яндекс).Теперь осталось вникнуть. А идея очень даже….Спасибо, Андрей.
Правильно сделаете )) API это лучшее решение!
Я на свой сайт не смог вставить две карты, т.к. два пункта выдачи товара! Может вы подскажете, как вставить две карты сразу и возможно это вообще?
Конечно возможно. Сколько угодно маркеров (точек на карте).
Очень красиво выглядит на сайте трехмерная карта, показывающая трек, записанный в GPS. Вот только для планшетов она не работает, софта нет. Получается вид с высоты птичьего поета!
Здравствуйте. а как вот сделать подобное подскажите http://www.vodokanal.spb.ru/dev/map/
Это реализовано при помощи API Google карт.
Спасибо! Надо взять на заметку. Может, когда-нибудь пригодится.