Блог Дмитрия Худякова
Энциклопедия начинающих блоггеров

Как в два счета подключить к сайту интерактивные Яндекс карты?

Рубрика: На заметку

Доброго времени суток, дорогие читатели! С вами на связи Худяков Дмитрий и проект, который наверняка уже известен многим – «Блогосфера от А до Я». Как ваше настроение, коллеги, как успехи в создании собственных ресурсов?

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

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

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

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

Инструментарий API карт

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

  • Конструктор (инструмент для выделения объектов и установки маршрутов);
  • API конструктора (расширение для предыдущего решения, дополнительные функции);
  • YMapsML (специальный язык для формирования описаний данных географического типа);
  • Поиск по организациям (API для отыскивания топонимов);
  • StaticAPI (изображения статичного типа, которые отправляются Яндексом по http-запросу);
  • Геокодер (перевод адреса в геогр. координаты и наоборот, для обращения к нему пишется специальный скрипт);
  • Платный API (лицензированная версия интерфейса для установки в закрытых системах);
  • JSAPI (совокупность кода для подключения интерактивной версии).

Как видите, список довольно обширен. Разбираться во всех тонкостях мы не будем, цель статьи совсем другая. Мы с вами детально рассмотрим только Конструктор карт, создание собственной версии и варианты размещения ее на сайте. Давайте приступим!

Как создать свою карту?

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

Переходим на страницу сервиса Yandexmaps и отыскиваем ссылку «Создать карту.»

Появится окно, в котором нужно повторить действие, нажать кнопку с таким же названием.

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

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

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

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

  • приближение и удаление объектов с помощью зума (элементы управления: колесико мышки — чаще всего отключают из-за неудобств при прокрутке страницы сайта, ползунок «выше/ниже» или кнопки «плюс/минус»);
  • определение местоположения пользователя;
  • встроенный поиск по адресам;
  • построение маршрута по двум указанным точкам;
  • виджет «пробки» с настройками отображения статистики по дням;
  • слои (схема, спутник и гибрид);
  • увеличение изображения на весь экран;
  • кнопка для открытия адреса на странице Яндекс карт.

Статический вариант — это обычная картинка с картой (сохраняется в формате HTML). Печатный — подготовленное для печати изображение, для которого можно выбрать настройки:

  • размер;
  • формат файла (png, jpg);
  • качество в DPI (96 или 300).

Сохраняется печатный вариант в формате «PNG» на Яндекс диске.

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

Готовый код вставляется в выбранное место страницы и проверяется на работоспособность после сохранения. Как видите, друзья, процесс создания карты крайне прост. Разобраться с ним можно за пару минут.

Ну а если у вас что-то не получилось, или вам не удается установить карту на страницы своего проекта, не стесняйтесь и смело описывайте проблему в комментариях к материалу, постараюсь помочь каждому!

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

Хороший вопрос, вам не кажется? Давайте поговорим и об этом! На сайт без движка скрипт добавляется напрямую в код в то место, где он должен отобразиться. Особых премудростей здесь нет.

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

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

Либо через менеджер контактов для отображения на странице отдельного пользователя. Также есть возможность воспользоваться специальными модулями.

Для некоторых CMS существуют готовые решения, которые избавляют от необходимости собственноручно работать с API. Один из распространенных примеров — плагин OiYandex.Maps для WordPress.

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

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

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

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

Рекомендую

Друзья, ну что ж, по виртуальным картам мы с вами попутешествовали, что скажете, если теперь мы с вами переключимся на реальные, а? Что я имею ввиду?

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

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

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

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

Ну что, коллеги, на сегодня у меня все! Если у вас возникли вопросы по настройке Яндекс инструмента, о котором мы говорили в данной статье, смело задавайте их в комментариях.

Искренне надеюсь, что у вас все получится, и новая интерактивная географическая визуализация скоро появится на вашем блоге, в интернет-магазине, новостном портале. Делитесь статьей с друзьями и до новых встреч! Берегите себя!

С уважением Дмитрий Худяков!

1 звезда2 звезды3 звезды4 звезды5 звезд (Нет голосов)
Загрузка...
Этот блог читают 4 578 человек, присоединяйся и ты
Комментариев 6
  • сергей

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

    26.12.2016 | 23:50
    • Дмитрий

      Сергей, в основном да! Но вы можете придумать и другое применение ей)

      26.12.2016 | 23:50
  • Иннокентий

    Познавательно, Давно задумываюсь о контактах — но конкретики писать пока не решились — а так — очень даже примечательный вариант с картами ;)

    26.12.2016 | 23:50
  • Алёна

    У нас этого нет, просто нет в этом необходимости...

    26.12.2016 | 23:50
  • land_driver

    Я плагином обычным пользуюсь — быстро и без всяких заморочек

    26.12.2016 | 23:50
  • Хуторная

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

    26.12.2016 | 23:50
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: