Добавьте интерактивную карту на ваш сайт

Мы работаем с Брентом Вемейером из KC Local Online на новом сайте для Vini Soletta, импортного бизнеса итальянской винодельни Tenute Soletta. Их существующий сайт имеет ограниченное содержание и не очень хорошо подходит для поиска названия своей компании, даже несмотря на то, что они хорошо зарекомендовали себя, предлагая импортные вина для изысканных ресторанов в Лос-Анджелесе более десяти лет. Теперь они намерены перейти на прямые розничные продажи своих вин с помощью электронной торговли, поэтому Brent помогает им улучшить свое присутствие в Интернете.

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

Вариант 1: карта изображения

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

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

Вариант 2: текстовые ссылки

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

Однако, это оставило бы нас с той же проблемой с точки зрения юзабилити. Хотя я мог сделать региональные ярлыки, которые были ссылками, отличными от тех, которые не были, многие посетители все равно ожидали бы, что все ярлыки будут работать одинаково. Мы могли бы добавить инструкции, но другое основное правило веб-дизайна гласит: «Если для этого нужны инструкции, он не очень хорошо разработан». До свидания, вариант № 2.

Вариант 3: встроить интерактивную карту

Мы решили, что лучшим выбором будет встроить интерактивную карту. Мы использовали Карты Гугл , Существуют и другие варианты, в том числе множество специализированного программного обеспечения или создание собственных карт Flash или JQuery, но Google Maps очень прост в использовании.

• Перейдите в Карты Google (нажмите на ссылку выше) и нажмите «Мои места» (обведено на скриншоте ниже). Если вы не вошли в систему, вам будет предложено войти в систему и, при необходимости, создать учетную запись Google.

• Вы увидите большую большую кнопку «Создать карту». Нажмите на нее.

• Теперь вы заполняете форму. Пойдем сверху вниз. Найдите место, которое вы хотите отобразить в строке поиска. Введите заголовок вашей карты в поле «Название», добавьте описание в поле «Описание». Я ввел «Италия» в поле поиска, «Итальянские вина» в поле заголовка и простое описание в окно описания.

• Снизу на снимке экрана вверху вы можете видеть переключатели для выбора статуса «Общий» или «Не в списке» для вашей карты. Если вы хотите добавить к общей карте знания о мире с помощью своей карты, вы можете сделать ее общедоступной, и каждый сможет ее увидеть. Если это частная карта, выберите «Не в списке». Хотя информация о винах Италии может быть полезна для всех, наша карта связана со страницами электронной коммерции. Мы не хотим угонять случайных посетителей и переносить их на рекламную страницу, поэтому мы сделали карту не включенной в список. Если вы просто хотите карту определенной области, вы прошли. Однако вы можете настроить свою карту различными способами.

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

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

• Если вы оглянетесь на диалоговое окно, то увидите, что у вас есть выбор: обычный текст, форматированный текст или HTML. Я хотел, чтобы код был легким, поэтому я использовал html просто для добавления ссылок, но вы можете настроить всплывающее окно, которое открывается при нажатии на метку столько раз, сколько вам нужно. Товарищ Пангея Берил Рейд поменял обычные метки на гроздья винограда, и нам это нравится (спасибо, Берилл!).

• Как вы можете видеть выше, вы также можете сотрудничать и импортировать. Когда вы закончите, нажмите «Готово». Ваша заполненная пользовательская карта будет сохранена в Моих местах, и вы найдете ее, когда вернетесь в Карты Google. Это полезно для планирования маршрута, обмена вашими любимыми подъемами с друзьями или выполнения любых других пользовательских задач на карте.

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

• Первый вариант выше - это веб-адрес вашей карты, на случай, если вы захотите написать в Твиттере или дать ссылку на нее. Второй вариант - код для встраивания карты. Вы должны иметь доступ к HTML на вашем сайте, чтобы встроить это. Ниже кода вы можете увидеть ссылку «Настройка и предварительный просмотр встроенной карты». Это позволяет вам выбрать размер карты на вашей странице - или, конечно, вы можете просто изменить размеры пикселей в html. Если вы добавляете его через CMS или блог, просто вставьте его в представление hmtl, а не в визуальный редактор. Если у вас нет доступа к html, или вы не чувствуете себя комфортно с ним, отправьте его своему веб-мастеру.

Теперь у вас есть собственная карта, встроенная в ваш сайт. Карты Google находятся в фрейме, поэтому вы не получите SEO Преимущества текста на карте. Однако вам также не нужно поддерживать всю карту на вашем веб-сайте (хотя карта все равно будет загружаться медленно, если у вас много текста или HTML), и она будет обновляться автоматически при обновлении карты в Моем места. Его также можно открыть в Google Планета Земля, где он выглядит по-другому: