Как сделать интересную интерактивную карту для своего сайта? Карта для сайта


Интерактивная карта для сайта - как сделать?

Приветствую вас, друзья! Заходя в раздел «Контакты» на сайтах различных компаний, часто хочется не только прочитать адрес, но и посмотреть, где эта компания располагается на карте. Наглядное изображение помогает спланировать пути проезда, прикинуть расстояние до места назначения, посмотреть наличие парковки (актуально для автовладельцев).

Согласитесь, что наличие такой карты на самом сайте значительно ускоряет процесс изучения схемы проезда. В противном случае, когда она отсутствует, приходится использовать сторонние сервисы (например, приложение 2GIS).

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

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

Преимущества интерактива

Интерактивная карта для сайта позволяет не просто просматривать схему местности, но и управлять ею:

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

Думаю, не нужно рассказывать вам о том, что такая визуализация создаёт дополнительные удобства для пользователя. Он может:

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

Статическая схема не даёт таких возможностей, так как не позволяет выйти за свои границы.

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

Если вы думаете, что для создания интерактивной карты вам нужно будет изучать HTML или PHP, то вы ошибаетесь. Благодаря специальным сервисам, этот процесс настолько упростился, что стал под силу любому пользователю Интернета. Попробуйте сами!

Есть два сервиса, которых вам хватит за глаза для создания красивой и удобной интерактивной схемы для своего сайта на WordPress, Joomla или иной системе управления – это Яндекс и Google карты. Использовать что-то стороннее я не вижу смысла, так как Яндекс и Google предоставляют все необходимые инструменты.

Яндекс

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

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

Как видите, нужная точка добавилась. Теперь вам нужно привести карту к тому виду, в каком она будет отображаться на сайте. Сейчас масштаб достаточно мелкий, поэтому целесообразно его увеличить — до такого вида, когда уже видно здание. Далее нажмите кнопку «Сохранить и продолжить».

После этого выберите «Интерактивная», введите размеры в пикселях (можно указать «растянуть по ширине» — тогда карта будет автоматически подстраиваться под ширину веб-страницы) и нажмите «Получить код».

Сервис сгенерирует вам два вида кода – JavaScript и iframe. Вам останется лишь выбрать нужный, скопировать его и вставить в то место на вашем сайте, где вы хотите видеть карту. Рекомендую в большинстве случаев выбирать JavaScript код, так как iframe имеет некоторые ограничения и не всегда удобен.

Небольшое пояснение по вставке кода на сайты с CMS. Если вы хотите установить схему на страницу «Контакты», откройте эту страницу для редактирования, перейдите в режим HTML и в нужном месте, например, в самом конце, вставьте JavaScript код. Сохраните изменения и любуйтесь результатом.

Google

Создание и установка интерактивной карты от Гугла происходит аналогичным образом.

Перейдите на сервис «Google Карты» и в поиске введите требуемый адрес.

Удобство здесь в том, что Google сразу масштабирует карту до того размера, когда видно здание. Если метка указана верно, то далее нажмите на кнопку «Поделиться».

В открывшемся окне перейдите на вкладку «Код», выберите предустановленный размер (или задайте произвольный) и скопируйте сгенерированный код (Гугл предлагает только iframe).

Этот код вы можете разместить в любом месте на вашем сайте.

Какой сервис лучше?

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

К примеру, на карте Яндекса можно линиями нарисовать схему проезда. В Google такая возможность отсутствует.

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

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

Остались вопросы? Готов на них ответить.

С уважением, Сергей Чесноков

on-www.ru

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

Привет, друзьям блога 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. Делается это в два счета.

Просто переходим по ссылке — 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

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

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

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

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

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

 

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

 

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

 

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

 

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

Вставка кода

 

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

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

 

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

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

 

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

 

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

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

Статьи по теме:

www.kasper.by

Карта сайта sitemap.xml и .html: полный обзор

Задумались о создании  «Карты сайта»? Попробуем разобраться в том, как правильно ее сделать.

Что такое карта сайта?

Карта сайта – это отдельная страница, на которой перечислены все разделы, подразделы, статьи. Это что-то вроде каталога, в котором зафиксированы все статьи сайта со ссылками на эти самые статьи.

Для чего нужна карта сайта? XML или HTML: какая карта лучше?

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

А карта сайта в формате xml просто необходима для поисковых систем  – чтобы поисковый робот увидел все ссылки, которые есть на сайте и лучше индексировал сам сайт.

Итого лучше создать 2 отдельные карты сайта: sitemap.XML для роботов и .HTML для посетителей.

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

Формат xml разберем позднее, сначала попробуем разобраться с форматом html, т.е. с привычной для нас картой, которую мы видим практически на каждом портале.

Карта сайта HTML – 7 железных правил

  1. Размещайте её на отдельной странице, попасть на которую можно из главного меню. То есть ссылка на карту сайта должна быть видна с любой страницы сайта.

  2. Структура карты должна отражать иерархию страниц сайта; в структуре должно чётко прослеживаться – где основные разделы, а где подразделы.

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

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

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

  6. Старайтесь в описаниях разделов придерживаться правила: краткость – сестра таланта. Заголовки разделов должны быть ёмкими, чёткими и понятными. Можно добавить краткое описание раздела, например:

    «- О компанииВ этом разделе кратко описаны главные принципы работы нашей компании, история её возникновения и развития, а также наши стремления и чаянья в долгосрочной перспективе.»

  7. Следите за актуальностью карты сайта. Если из структуры удаляются какие-то страницы или, наоборот, добавляются новые, не забудьте отразить это в карте.

Соблюдайте эти 7 правил, и карта сайта станет отличным навигатором для ваших посетителей.

Карта сайта sitemap.xml: зачем нужна и как ее самостоятельно сделать

Карта сайта XML – это файл, размещенный в корневой директории сайта, с информацией для поисковых систем (таких как Яндекс, Google, Rambler, Bing и других) о страницах вашего сайта. Файл этот нужен для того, чтобы поисковым системам было легче индексировать ваш сайт.

Как работает sitemap.xml?

Заходя на сайт, поисковый робот, прежде всего, читает инструкции в файле robots.txt о том, как следует индексировать сайт. И если в нём указать, что есть карта сайта sitemap.xml, то робот перейдет по указанному адресу, где перечислены URL-адреса самых важных страниц сайта, которые подлежат обязательной индексации.

Поэтому не забудьте, что файл sitemap.xml надо не просто разместить у себя на сайте, а указать к нему путь в robots.txt в директиве sitemap.

Пример:

User-agent: YandexAllow: /Sitemap: http://mysite.ru/site_structure/my_sitemaps.xml

Вот так карта сайта sitemap.XML облегчит работу поисковику и обеспечит качественную индексацию вашему сайту.

Карта сайта sitemap.xml для Яндекса

Яндекс поддерживает протокол Sitemap. Чтобы передать информацию, используйте следующие элементы:

  • loc — адрес страницы;
  • lastmod — дата последнего обновления страницы;

  • changefreq — частота изменения страницы;

  • priority — значимость страницы. Робот загружает страницы поочередно с учетом наличия и значения коэфициента от 0.0 до 1.0. Укажите коэффициент для тех URL, которые наиболее важны для сайта.

ВАЖНО ЗНАТЬ! Поиск Яндекса не поддерживает передачу информации об изображениях, RSS и Atom-фидов с помощью файла Sitemap, однако, можно передать информацию о видео, для этого в файле Sitemap укажите ссылки на XML-фиды.

Как сделать карту сайта sitemap.XML самостоятельно и бесплатно?

Это не трудно. В сети есть несколько бесплатных программ и сайтов, которые сгенерируют вам такую карту автоматически. Вот некоторые из них: sitemapgenerator.ru, xml-sitemaps.com, cy-pr.com/tools/sitemap/

Рассмотрим создание карты сайта на примере xml-sitemaps.com:

  1. Вводим адрес сайта в первую строку, сразу после http:// . Выглядеть должно примерно так: http://1ps.ru/

  2. Во второй строке выбираем частоту обновления страниц сайта. Возможные значения – каждый час («Hourly»), день («Daily»), раз в неделю («Weekly»), раз в месяц («Monthly»), раз в год («Yearly»). Если выбрать «None», частота обновления не будет прописана в Sitemap. Рекомендуем выбирать Weekly или Daily.

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

  4. Выставляем приоритет для страниц сайта: «None» – означает, что приоритет не принципиален, «Automatically Calculated Priority» – программа автоматически определит приоритетные страницы и составит карту сайта с их учётом.

  5. Жмём кнопку «Start».

    Генерирование карты займёт некоторое время, после появится вот такой текст:

    Он сообщает вам о том, что карта успешно создана, и всё, что вам осталось сделать, это:

    1. Загрузить файл с картой в корневую директорию вашего сайта (скачать файл можно по ссылке here).

    2. После размещения проверить наличие карты по адресу http://ваш_сайт/sitemap.xml, добавить её в robots.txt и в панели вебмастеров Яндекса и Гугла, чтобы поисковые роботы начали ориентироваться на неё. Также рекомендуем проверить карту на ошибки в вебмастере Яндекса.

    Всё, дело сделано – карта xml готова! Только помните, что карта xml – для поисковых роботов. А для пользователей стоит создать обычную карту сайта в формате HTML. Для оптимизации, кстати, она тоже лишней не будет.

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

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

Понравилась статья?

84 15

Сожалеем, что не оправдали ваши ожидания ((Возможно, вам понравятся другие статьи блога.

Понравилось? Поделись!

1ps.ru

Сервисы для создания интерактивных карт / Полезное в сети / Постовой

Полезное в сети: Сервисы для создания интерактивных карт

Несомненно, Google Maps — ведущий картографический сервис на рынке, предоставляющий услуги GPS-трекинга и навигации. Но сегодня сфера применения карт постоянно расширяется и уже вышла за рамки традиционных прокладки маршрута и поиска объектов.

Мы часто встречаем карты, отображающие загрязненность окружающей среды, карты движения городского транспорта или самолетов (вспомните известный www.flightradar24.com). В бизнесе карты могут использоваться для отображения и анализа местоположения заказчиков или сети розничной торговли. Туристические компании могут использовать карты для информирования своих клиентов о маршруте путешествия и туристических объектов (достопримечательностей, заведений общественного питания, гостиниц и хостелов.

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

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

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

Смотрите также: 15 лучших Google Map Плагинов для WordPress

Итак, давайте перейдем к рассмотрению наиболее популярных картографических сервисов.

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

Стоимость: бесплатно, $99 и $199

Полезное в сети: 10 онлайн для создания интерактивных карт Google

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

Стоимость: бесплатно

Полезное в сети: 10 онлайн для создания интерактивных карт Google

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

Стоимость: $39 в месяц

Полезное в сети: 10 онлайн для создания интерактивных карт Google

Zee Maps
Zee Maps — онлайн-сервис для создания и публикации карт с целым набором современных и уникальных инструментов — механизмом поиска, личными картами, более 30 всевозможных маркеров и возможностью выделения целых областей, трехуровневым доступом (обычные посетители, члены группы и администраторы). Кроме того имеется возможность привязывать к маркеру различный медиаматериал — фотографии, аудио- и видеозаписи и сохранять карты в PDF и PNG формате для брошюр и презентаций.

Стоимость: бесплатно (до 5 карт) и платно, в зависимости от тарифного плана.

Полезное в сети: 10 онлайн для создания интерактивных карт Google

Scribble Maps
Еще один мощный и многофункциональный сервис для создания и публикации различных карт. Также предлагает возможность добавлять маркеры, заметки, собственные виджеты, сохранят карты в виде PDF или изображений. Кроме того есть инструменты для измерения расстояний, площадей, а также механизмы интеграции в десктопные и мобильные приложения. Имеется плагин для интеграции с Wordpress.

Стоимость: бесплатно

Полезное в сети: 10 онлайн для создания интерактивных карт Google

GmapGIS
Эффективный инструмент для создания различных статических карт — спутниковых, гибридных, уличных. Имеется набор инструментов, для установки маркеров и добавлении различной информации, а также экспорта их в KML формат для просмотра в Google Earth.

Стоимость: бесплатно

Полезное в сети: 10 онлайн для создания интерактивных карт Google

Heatmap Tool
Heatmap Tools использует всю мощь Google Maps API для визуализации различных геоинформационных данных и создания так называемых «картограмм»(они же heatmaps). Можно настраивать различные параметры отображения, такие как радиус маркеров, цвет, прозрачность и др. Поддерживается импорт данных через формат CSV.

Стоимость: бесплатно (с водяными знаками и ограничениями на количество объектов и просмотров) и платно в зависимости от тарифного плана.

Полезное в сети: 10 онлайн для создания интерактивных карт Google

MapTiler
Использование MapTiler просто, как раз-два-три. Раз — отсканировать бумажную карту или создать ее с помощью GIS-системы (например, AutoCAD MAP 3D). Два — обработать ее MapTiler. Три — опубликовать в интернете, встроив, например, на страницу вашего сайта. При этом обеспечивается интеграция с такими популярными хостингами как Dropbox, Google Drive и Amazon S3.

Стоимость: имеются как бесплатный, так и платные тарифные планы

Полезное в сети: Сервисы для создания интерактивных карт

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

Стоимость: имеются как бесплатный, так и платные тарифные планы

Полезное в сети: Сервисы для создания интерактивных карт

postovoy.net

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

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

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

От статики к динамике

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

Изменить ситуацию удалось с помощью Google Maps а также Яндекс.Карты, имеющие огромные преимущества, среди которых стоит отметить:

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

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

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

Продвижение проекта с помощью схемы проезда

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

    • Использование простой карты без указания организации, пригодно только для некоммерческих целей и лишь для информации, к примеру, можно встроить карту в блог, чтобы поделиться с друзьями местом для проведения вечеринки, для чего можно просто указать нужное место отметкой и использовать полученный код для дальнейшей вставки. Такая карта не привязана к остальным сервисам поисковика и ее создание не составит никакого труда.
    • Использование карты с привязкой к конкретной организации необходимо для всех интернет-маркетологов, SEO-оптимизаторов и продвигающих свой проект в сети людей. Так как картографические сервисы систем Яндекс и Google являются неотъемлемыми частями огромных поисковиков, то они напрямую влияют на процесс отображения поисковых запросов и предоставляют пользователям другие «бонусы».

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

Преимущества карт с привязкой к компании

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

01.Yandex_Restoran_Moskva02.Yandex_Restoran_Moskva

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

03.Google_Restoran

  • Во время скроллинга карта остается на месте.

04.Google_Restoran-02

  • К тому же, к каждому найденному адресу авторизованные пользователи поисковой системы Google могут оставлять отзывы и комментарии, аналогично сервису  «Яндекс.Маркет».

05.Google_callback

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

Технические вопросы

Для начала необходимо определиться с выбором конкретного сервиса: либо Google Maps либо «Яндекс.Карты». Нужно иметь в виду, что карты разных систем отличаются по виду  HTML-кода для встраивания в сайт. Google ведет работу своих карт с помощью <iframe>, таким образом он всегда правильно отображается, так как полностью использует код страниц Google. Но не все сайты имеют возможность вставки подобного объекта, в особенности на блогоплатформах. Особенностью же кода карт «Яндекса» является возможность их вставки блочно, с помощью элементов JavaScript и <div>, что ставит его в зависимость от применяемых на сайте стилей.  Кроме того, Яндексом были разработаны плагины для популярных CMS.

Также, «Яндекс» может сохранять карту в образе статической картинки с простым кодом для ее вставки. Выбор стоит делать исходя из возможностей и особенностей сайта, на чьей странице нужно разместить карту. Так как «Яндекс» является российской компанией, то и его карты точнее и понятнее для русскоговорящей аудитории, чем карты Google. Некоторые надписи на гугловских картах выполнены в виде транслита, что затрудняет восприятие информации и ориентирование на местности.

Так даже Google карты центра Москвы до сих пор содержат некоторые неточности в названиях, на них не обозначены трамвайные пути и другие особенности, полезные в описании встраиваемой на сайте карты. К тому же, стоит отметить, что техподдержка «Яндекса» гораздо более оперативна, чем у Google, и реакция на обращения довольно быстрая.

На чем остановить свой выбор: Google Maps или «Яндекс.Карты»?

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

Оптимальнее будет использовать карты обеих поисковых систем — и Google, и «Яндекс», так как заранее не известно, пользователи какого поисковика будут посетителями вашего сайта. Можно одну из карт изобразить в виде фотоснимка со спутника, а другую — как схему проезда. Так же не стоит забывать и о словесном описании карты для удобства ориентации пользователей, с указанием основных ориентиров на местности, остановок транспорта и т.д.

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

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

Легкий способ установки Google карты на сайт

Для создания и возможности редактирования карты в Google Maps необходимо быть авторизованным пользователем системы Google, для чего нужно иметь аккаунт в данном поисковике. Откройте на главной странице системы Google в верхней строчке ссылку «Карты», таким образом вы перейдете на страницу Google Maps.

06.Google_map_01

  • Для создания своей карты вам потребуется нажать на ссылку «Мои карты» и кликнуть мышкой пункт меню «Создать карту».

06.Google_map_02

  • Выбираем желаемый тип отображения карты. Под строкой поиска доступна кнопка «Добавить метку» а также меню для рисования линий, которыми следует пользоваться для создания карты. Для удобства редактирования можно использовать линейку изменения масштаба карты.

06.Google_map_04

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

06.Google_map_05

  • Для возможности свободного доступа к карте ее нужно настроить соответствующим образом.

06.Google_map_06

  • Устанавливаем соответствующие права доступа.

06.Google_map_07

  • Определенным пользователям можем дать права на редактирование карты.

06.Google_map_08

  • Для получения HTML-кода следует нажать в правом верхнем углу крайнюю правую кнопку «Поделиться».

06.Google_map_share

  • Вводим название

07.Google_map_01

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

07.Google_map_02  

  • Выбираем пункт меню «Добавить на сайт»

07.Google_map_03

  • В коде карты будет содержаться элемент <iframe>, так что вам необходимо убедиться в поддержке вставки подобных объектов на вашем сайте, странице соцсети или блоге.

07.Google_map_04

Легкий способ установки «Яндекс» карты на сайт

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

08.Yandex_map_06

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

08.Yandex_map_02

 

  • В новой версии Яндекс.Карты размещение их объектов на сайте доступно через API сервиса.  Ссылка на это API находится в левом сайдбаре.

08.Yandex_map_03

 

  • Вот так выглядит текущая версия сервиса, предоставляющего API Яндекс.Карты.

08.Yandex_map_07

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

08.Yandex_map_04

Следующим шагом будет просмотр внешнего вида вашей карты. Всё ли на ней верно? Если ошибок не обнаружено, то следует отметить тип сайта, на котором планируется дальнейшее размещение этой карты (блоги используют статические карты, а сайты — динамические, интерактивные). По завершению данного этапа следует перейти к третьему шагу — получению кода для вставки карты. Перед вами откроется страничка с кодом для вставки, который необходимо скопировать и вставить в то место на страничке вашего веб-сайта, где нужно разместить карту.

08.Yandex_map_05

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

Вывод

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

Читайте также:

apanshin.ru

Карта для сайта

Карта для сайта. Сегодня я хочу показать Вам как сделать карту сайта, которая реально работает и которая реально полезна посетителям Вашего сайта.

 

Я когда то уже давал материал по этой теме, есть и видео, посмотреть его можно в этом выпуске рассылки.

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

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

Вот например карта моего блога.

ну что много она Вам дала!?!

Людям эти карты для сайта, до одного места.

Вот признайтесь честно пользовались ли Вы сами хоть раз этими картами, даже теми, что создавались в HTML формате!?

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

Я предлагаю вам сделать, что то на подобии карты сайта.

 

Это отдельная страница или страницы со ссылками на самые лучшие посты Вашего проекта.

На моем блоге это страницы Лучшие видео уроки и Лучшие статьи

Если Вам лень читать, зачем это нужно и как это сделать Вы можете посмотреть видео внизу этого выпуска.

А для самых дотошных, давайте разберем, что дают нам эти страницы, заменители карты сайта.

Итак карта для сайта и для людей!

1. Убирают лишнюю нагрузку на блог

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

3. Дополнительный инструмент для посетителей, им проще и удобнее находить нужный материал.

4. Как правило, посетители находят, какую то дополнительную информацию, что повышает авторитет Вашего блога.

5. Создаётся дополнительная внутренняя перелинковка релевантными ссылками.

6. При добавлении нового материала на сайт, вы сразу делаете на него релевантную ссылку.

7. У вас появляется лишняя страница с полезным контентом, а контент-король.

8. Вы можете продвигать эту страничку в поиске и тем самым продвигать все полезные материалы блога.

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

Для того что материал был понятней я снял небольшое видео.

 

1P/S. после поста о продаже некоторых моих сайтов, я получил много писем и звонков с вопросам .

Люди интересовались, зачем я продаю и не бросаю ли я инфобизнес.

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

Чтоб ответить одним махом и успокоить, напишу эти строки.

Нет, бизнес я не бросаю и даже наоборот, в планах запуск новых проектов и развитие старых.

Буквально в конце этой недели подписчики получат возможность скачать полноценный курс “WordPress-функционал”

 

Сейчас ведутся работы по компиляции курса.

Так же на подходе 3 версия комплекта “Создание инфопродукта”, он станет намного больше и добавится DVD-версия.

Вообще намерен  больше уделять внимание  “Мастерской Инфобизнеса” и Издательству DVDkurs.info поэтому решил распродать свои старые сайты. Есть еще несколько проектов и скоро их так же выставлю на продажу.

От души надеюсь что в новых руках они получат второе дыхание!

Вы прочитали мою статью " Карта для сайта, которая работает. Как сделать рабочую карту сайта"  Хотел бы прочитать Ваше мнение в комментариях.И конечно же буду ОЧЕНЬ признателен Вам за рекомендацию в Ваших социальных аккаунтах!

Стоит обратить внимание на эти материалы!

Подарки за первый комментарии на нашем сайте:
За первый комментарий на нашем сайте мы дарим полезные подарки, плюс участие в конкурсе комментаторов с денежными призами

info-m.pro