вставляем карту на свой сайт

Вставляем карту на свой сайт

Как же вставить карту своего местоположения? Да ещё задать ей размеры по высоте и ширине, чтобы она славно вписалась в дизайн странички? Да ещё сделать её интерактивной, чтобы посетитель мог её подвигать, просмотреть чуть дальше и точно определить, как же и откуда ему лучше заехать или пройти к объекту?

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

Я подскажу, как найти данную услугу. Для начала задаём поиск услуги. Тут окажется, что её предлагают многие. Есть как платные, так и бесплатные варианты и ещё есть условно бесплатные… Тогда выбираем тех, кому больше доверяем. Далее, идём по подсказкам: выбираем желаемую ссылку: если хотим просто кусочек карты, где и так очень понятно видно Ваше местоположение, то выббираем статическую карту, если хочется дать больше информации для посетителей, то интерактивную.

Дальше будут ещё подсказки. Для статической карты возможно выбрать вставку без указания размеров или с указанием необходимых размеров, обычно в пикселях или процентах, смотря по дизайну Вашего сайта. Она вставляется на страничку, как рисунок или фото (с помощью элемента img), параметры карты могут быть заданы в атрибуте src. Обязательный параметр для карты это — идентификатор — um, он будет сформирован конструктором карт на том сайте, куда Вы обратились, а sid уже является устаревшим. Конструктор карт — это такой веб-инструмент с помощью которого мы сами можем создавать схемы проезда и отмечать нужные объекты на нужном нам участке карты. Сформированный кусочек потом можно вставить на свой сайт столько раз сколько это будет нужно, на одной странице или на каждой странице Вашего сайта. Это здорово, правда?! Можно формировать разные карты по нужным Вам областям или районам, округам или странам, а чтобы разместить их на странице, нужно вставить на эту страницу код виджета карты, сформированный в конструкторе .

Width это будет ширина Вашей карты в пикселях или ширина той области карты, что Вы укажете. Height — это будет высоа в пикселях или высота той области карты, что Вам нужна для вставки на сайт. После указания нужной области на карте Вы получите код для вставки этого кусочка. Нужно помнить, что этот код может быть вставлен только в элемент «body» на странице.

Для интерактивной карты возможны четыре варианта:

  • Вставка интерактивной карты без указания размеров
  • Вставка интерактивной карты с указанием размеров
  • Вставка интерактивной карты в определенный контейнер
  • Вставка интерактивной карты в контейнер с заданными размерами

Тут выбор диктует дизайн Вашего сайта. Интерактивная карта вставляется на страницу элементом script. В атрибуте src будет задан параметр um — это обязательный идентификатор карты, а sid уже устарел и, если вам предлагается код для вставки карты с этим параметром, то это может не сработать.

Здесь также width — это ширина карты в пикселях или процентах. Если параметр не задан, карта растягивается по всей ширине родительского контейнера;
height — высота карты в пикселях или процентах. Если параметр не будет Вами задан, то карта растягивается по всей высоте родительского контейнера. Если параметр указан в процентах, то Вам необходимо выставить высоту для родительского контейнера, иначе карта не отобразится на Вашем сайте. Помните, что id — это идентификатор элемента DOM, в который нужно вставить карту.

Важно, что виджет карты может быть добавлен как в элемент «body», так и в элемент «head». Если один и тот же код с одинаковым id вставлен на страницу несколько раз, то в элемент DOM с указанным id будут вставлены все карты. Нужно помнить, что ключ API от лицензии для платного варианта карты нужно будет передать, если карта будет использоваться в коммерческих целях (например, вы захотите установить к себе на сайт такую карту с конструктором для своих посетителей).

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

Можно поступить и по-другому. Если Вам нужна статическая карта, то можете найти любую подходящую Вам карту местности в магазине или библиотеке и просто сфотографировать ту область, которая вам нужна или сделать фото с экрана или увеличить на экране карту до нужного Вам размера и сделать снимок экрана (еще это называют «скриншот»). Можно даже сфотографировать карту города с уже нанесённой транспортной схемой или без неё, можно обработать в фото-редакторе, увеличить или уменьшить, а можно самим указать объект вырезанной из бумаги или полупрозрачного пластика стрелкой или красивой канцелярской кнопкой или подрисовать или выделить цветом, маркером, краской, да чем хотите! Тут та-а-а-кой простор для Вашей фантазии, а если вдруг она ещё не проснулась, то загляните сюда, а если хочется красоты, то Вам сюда. Главное здесь, чтобы фото было хорошего качества и выполняло свою функцию: видно и понятно ГДЕ находится цель и КАК можно добраться. И для продвижения сайта важно, что это будет Ваше уникальное фото!

Получить код для вставки карты можно здесь.

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

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

2 × два =