Матвей Земсков

Заметки веб-мастера

Четверг, 18 октября 2012 14:42

Создаем интерактивную карту на сайте

Оцените материал
(10 голосов)

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

В этой заметке, я расскажу, как это можно реализовать с помощью jQuery.

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

Скачать архив с изображениями

Города будут обозначаться на карте в виде ссылок. Они будут абсолютно позиционированы относительно карты. Чтобы вычислить координаты расположения городов на карте, нужно воспользоваться направляющими в psd-макете.

Позиционируем города на карте

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

HTML

<div id="imap">
  <a href="#" id="klgd">Калининград</a>
  <a href="#" id="spb">Санкт-Петербург</a>
  <a href="#" id="msk">Москва</a>
</div>
<div id="container"></div>

Присвоим css-стили элементам страницы.

CSS

body{
     font-family:arial;
     position:relative;
}
/*контейнер для карты*/
div#imap{
	width:700px;
	height:394px;
	margin:0 auto 10px;
	background:url(images/map_bg.png) no-repeat;
	position:relative;
}
/*города на карте*/
 div#imap a{
	position:absolute;
	text-decoration:none;
	background:url(images/b_sprite.png) no-repeat;
	color:#000;
	font-weight:bold;
	padding-left:14px;
	font-size:.7em;
}
div#imap a:hover{
	background-position:0 -13px;
}
/*всплывающий блок с картой*/
div#container{
	display:none;
	position:absolute;
	margin:0 auto;
	background:#fff;
	padding:10px;
	border:1px solid #999;
	top:50%;
	left:50%;
}
/*город Калининград*/
a#klgd{
	top:75px;
	left:30px;
}
/*город Санкт-Петербург*/
a#spb{
	top:97px;
	left:95px;
}
/*город Москва*/
a#msk{
	top:149px;
	left:81px;
}

В блоке с идентификатором 'imap' будет находиться сама карта, а блок с идентификатором 'container' будет всплывающим – в нем будут располагаться изображения со схемами проезда к филиалам компании. Изначально этот блок будет скрыт, он будет появляться при клике по названию города. Блок будет выровнен по центру экрана. В зависимости от атрибута id ссылки, в блоке-контейнере будет появляться определенная схема проезда.

Теперь нужно «вдохнуть жизнь» в получившуюся страничку, добавив немного кода на jQuery.

jQuery

$(function(){
	// предварительная загрузка изображений
	var klgd = $('<img />').attr('src','images/klngr.png');
	var msk = $('<img />').attr('src','images/msk.png');
	var spb = $('<img />').attr('src','images/spb.png');
	$('div#imap > a').click(function(event){
		var elId = $(this).attr('id');
		switch(elId){
			 case 'klgd' : 
				$('#container:not(:has(img))').append(klgd);
			 break;
			 case 'spb' :
				$('#container:not(:has(img))').append(spb);
			 break; 
			 case 'msk' : 
			 	$('#container:not(:has(img))').append(msk);
			 break;	
			 default: elImgURI = false;
		}	
		// ширина контейнера
		var contwidth = $('#container').width();
		var contheight = $('#container').height();
		var w_mrg = contwidth/2 + "px";
		var h_mrg = contheight/2 + "px";
		$('#container').show();
		$('#container').css({'margin-left':'-'+w_mrg});
		event.preventDefault();
	     });
                 $('div#container').click(function(event){
		$('#container img').remove();
		$('#container').hide();
		event.preventDefault();
	});
  });

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

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

Демонстрация результата

Прочитано 12879 раз
Другие материалы в этой категории:
Фиксируем меню при прокрутке страницы
Добавить комментарий

Комментарии   

 
0 # Алексей 19.02.2014 17:15
Черт побери, занятная тема, надо пробить её, респект если все работает :-)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 26.02.2014 11:18
Пожалуйста, Алексей! Да это работает. Есть примеры в сети.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Серж 13.03.2014 14:37
Как сделать вот такую карту: http://ayagoz.kz/interactive-map
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 16.03.2014 22:25
Это обычная карта изображений. Если интересно, почитайте про html-элемент map. Также там используется jQuery.
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: