Контактная информация/карта проезда в стиле веб 2.0

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

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

Возьмем, к примеру, компанию «Phone Line», офис которой расположен по адресу: г.Киев, ул. Васильковская, 14. Идем на сайт Яндекс.Карты. Выбираем интересующую нас карту того или ногов города, в нашем случае это Киев. В строке поиска вводим запрос: «Васильковская». Если название улицы указано правильно, то будет выведена ссылка на ул. Васильковская и адреса, кликаем второе. Перед нами список адресов, находим дом №14 — кликаем и получаем карту с отметкой интересующего нас адреса. Чтобы получить ссылку на этот участок карты найдите пункт «Ссылка на это место» и кликните его. В открывшемся окне Вам будет дана как ссылка, так и html-код (к сожалению) не содержащий «кусочек карты», который можно было бы поместить на страницу сайта.

Если Вы все-таки желаете разместить «кусочек карты» на своем сайте – придется поработать. Делаем Print Screen и открываем имеющийся графический редактор… Остальное думаю пояснять не надо. Обрабатывайте картинку на свое усмотрение и идем дальше.

У нас есть «контактная информация» и «карта проекзда» с ссылкой на сервис Яндекс.Карты. Создадим два слоя (или объекта, называйте как Вам будет удобней):

<div id="contacts">
Адрес: г. Киев, ул. Васильковская, 14<br>
Телефоны: (044) 494-26-48, 496-09-27<br>
E-mail: <a href="mailto:phoneline@bigmir.net">PhoneLine@bigmir.net</a><br>
ICQ: 279740460<br>
см. <a onclick="contacts_map(); return false;" href="#">карту проезда</a>
</div>
<div id="map" style="display: none;">
<a href="http://maps.yandex.ua/map.xml?mapID=1600&mapX=3395410&mapY=6482165
&scale=9&slices=1&descx=3395410&descy=6482165"><img
src="/images/map.png" border="0"></a><br>
см. <a onclick="contacts_map(); return false;"
href="#">контактную информацию</a>
</div>

Первый слой contacts содержит отображаемую контактную информацию и ссылку «см. карту проезда». Второй слой map содержит «кусочек карты» и ссылку «см. контактную информацию». По умолчанию первый слой отображается, а второй скрыт за счет style="display: none;". Именно благодаря этой фишке, управление которой будет осуществляться через JavaScript, мы и будем отображать необходимый слой. Сам JavaScriptможет иметь следующий вид:

<script language="JavaScript">
function contacts_map() {
  var contacts_obj = document.getElementById('contacts');
  var map_obj = document.getElementById('map');
  if ( contacts_obj.style.display == '' ) {
    contacts_obj.style.display = 'none';
    map_obj.style.display = '';
  } else {
    contacts_obj.style.display = '';
    map_obj.style.display = 'none';
  }
}
</script>

Этот скрипт скрывает один из слоев и отображает другой ориентируясь по значению style.display для одного из слоев, в моем примере это contacts. Визуально это может выглядеть следующим образом:

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