Вывод филиалов компании на карту Яндекс.Карты с маркерами

Генерация YML файл Яндекс Маркета на PHP
22.05.2018

HTML - index.html

<!DOCTYPE html>
<html lang="ru">
<head>

	<!-- meta -->
	<meta charset="utf-8">
	<title>Филиалы компании на карте Яндекс.Карты</title>
	<meta name="description" content="">
	<meta name="keywords" content="">

	<!-- css -->
	<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
	<link href="css/custom.css" type="text/css" rel="stylesheet">

	<!-- JS -->
	<script src="//yandex.st/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
	<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU&coordorder=longlat"></script>
 
	<script src="js/group.js" type="text/javascript"></script>
	<script src="js/application.js" type="text/javascript"></script>

</head>
<body>

	<div class="container">
		<h1>Филиалы на карте Яндекс.Карты</h1>
		<div class="col-lg-4">
			<select id="selecttown"></select>
			<div id="shops"></div>
		</div>
		<div class="col-lg-8">
			<div id="map"></div>
		</div>
	</div>

</body>
</html>

JavaScript - group.js

// Группы объектов
var city = [
{
    content: 'Москва',
    center: [54, 73],
    zoom: 9,
    branches: [
    {
        "coordinates": [
        37.59452819824219,
        55.87723681401948
        ],
        "hintContent": 'Московский Центр выдачи 1',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    },
    {
        "coordinates": [
        37.722930908203125,
        55.84294011297761
        ],
        "hintContent": 'Московский Центр выдачи 2',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    },
    {
        "coordinates": [
        37.496337890625,
        55.785454243141885
        ],
        "hintContent": 'Московский Центр выдачи 3',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    },
    {
        "coordinates": [
        37.7874755859375,
        55.7765730186677
        ],
        "hintContent": 'Московский Центр выдачи 4',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    },
    {
        "coordinates": [
        37.640533447265625,
        55.71512134495494
        ],
        "hintContent": 'Московский Центр выдачи 5',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    },
    {
        "coordinates": [
        37.43110656738281,
        55.85566039921106
        ],
        "hintContent": 'Московский Центр выдачи 6',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    },
    {
        "coordinates": [
        37.386474609375,
        55.74566603524846
        ],
        "hintContent": 'Московский Центр выдачи 7',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    },
    {
        "coordinates": [
        37.45925903320312,
        55.65628456619121
        ],
        "hintContent": 'Московский Центр выдачи 8',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    },
    {
        "coordinates": [
        37.56294250488281,
        55.609771925432575
        ],
        "hintContent": 'Московский Центр выдачи 9',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    },
    {
        "coordinates": [
        37.77030944824219,
        55.66325670077184
        ],
        "hintContent": 'Московский Центр выдачи 10',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    },
    {
        "coordinates": [
        37.87879943847656,
        55.72362986221819
        ],
        "hintContent": 'Московский Центр выдачи 11',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    }
    ]
},
{
    content: 'Воронеж',
    center: [55.751574, 37.573856],
    zoom: 9,
    branches: [
    {
        "coordinates": [
          39.18754577636719,
          51.67053242709133
        ],
        "hintContent": 'ТЦ Атмосфера',
        "balloonContent": '<div><b>Адрес:</b> г.Великий Новгород, ул. Большая Санкт-Петербургская, д.39 стр 14, оф.1, СДЭК.</div> <div><b>Телефон:</b> (8162) 22-44-40</div> <div>Заказ будет доставлен в пункт выдачи через 2-4 рабочих дня.</div> <div><b>Время работы:</b> с понедельника по пятницу с 9-00 до 18-00.</div>'
    }
    ]
}
];

JavaScript - application.js

ymaps.ready(init);

var myMap;


function init () {
	// Параметры карты можно задать в конструкторе.
	myMap = new ymaps.Map(
	// ID DOM-элемента, в который будет добавлена карта.
	'map',
	// Параметры карты.
	{
		// Географические координаты центра отображаемой карты.
		center: [55.76, 37.64],
		// Масштаб.
		zoom: 3,
		controls: ['zoomControl', 'fullscreenControl']
	}
	);

	$.each(city, function(index, data) {
		var nameCity = data.content;
		$('#selecttown').append('<option value="' + nameCity + '">' + nameCity + '</option>');
	});

	$("select").change(function () {
		var town = $("#selecttown :selected").val();
		var collection = [];    
		do_search(town);
	}).change();
}


function diler_map(coor,header,baloon) {
	
	var header = '<div class="ymaps-2-1-35-balloon-content__header">'+header+'</div><div>'+baloon+'</div>';
	
	// Открываем балун на карте (без привязки к геообъекту).
	myMap.balloon.open(coor, header,{

		// Опция: показываем кнопку закрытия.
		closeButton: true
	});

	myMap.setCenter(coor, 16);
}

function do_search(town) {
	$('#shops').empty();

	// Создаем объект коллекции геообъектов и задаем опции.
	var myGeoObjects = new ymaps.GeoObjectCollection({}, {
		preset: "islands#redCircleIcon",
		strokeWidth: 4,
		geodesic: true,
		zoom: 3
	});

	$.each(city, function(index, data) {

		// Удаляем все геообъекты на карте для последующего добавления актуальных
		myMap.geoObjects.removeAll();
		
		// Создаем пустой массив выборки для геоданных
		var collection = [];

		// Если выбран город, то ищем соответствующий подмассив
		if (data.content == town) {

			// Парсинг подмассива
			function processingJSON (){
				$.each(data.branches, function(key, branch){
					
					// Преобразуем координаты, заголовок и контент метки из объектов в строку
					var coor = JSON.stringify(branch.coordinates);
					var header = JSON.stringify(branch.hintContent);
					var baloon = JSON.stringify(branch.balloonContent);

					// Преобразуем заголовок и контент метки из объектов в строку
					header = $.parseJSON(header);
					baloon = $.parseJSON(baloon);

					// Выводим список ПВЗ на фронтенде
					$('#shops').append('<a href="javascript:void(0);" onclick="return diler_map('+ coor+',\''+header+'\',\''+baloon+'\''+')">' + header + '</a>');

					// Формируем коллекцию с геоданными маркеров
					collection.push(branch.coordinates);

					if (data.branches.length == 1 ) {
						// alert(data.branches.length);
						var myPlacemark = new ymaps.Placemark(branch.coordinates, {
							// Формируем заголовки и описание балунов
							balloonContentHeader: header,
							balloonContentBody: baloon,
							hintContent: header
						}, {
							// Опции.
							// Необходимо указать данный тип макета.
							iconLayout: 'default#image',
							// Своё изображение иконки метки.
							iconImageHref: 'http://job.contentim.ru/pin.png',
							// Размеры метки.
							iconImageSize: [31, 37],
							// Смещение левого верхнего угла иконки относительно
							// её "ножки" (точки привязки).
							iconImageOffset: [-12.5, -39]
						});

						// Добавляем метку на карту.
						myMap.geoObjects.add(myPlacemark);
						// Устанавливаем карте центр по метке и масштаб
						myMap.setCenter(branch.coordinates, 16);
					} else {

						// Формируем объект с геоданными маркера
						myGeoObjects.add(new ymaps.Placemark(branch.coordinates, {
							// Формируем заголовки и описание балунов
							balloonContentHeader: header,
							balloonContentBody: baloon,
							hintContent: header
						}, {
							// Опции.
							// Необходимо указать данный тип макета.
							iconLayout: 'default#image',
							// Своё изображение иконки метки.
							iconImageHref: 'http://job.contentim.ru/pin.png',
							// Размеры метки.
							iconImageSize: [31, 37],
							// Смещение левого верхнего угла иконки относительно
							// её "ножки" (точки привязки).
							iconImageOffset: [-12.5, -39] 
						}));

						// Добавляем коллекцию на карту.
						myMap.geoObjects.add(myGeoObjects);

						// Устанавливаем карте центр и масштаб так, чтобы охватить коллекцию целиком.
						myMap.setBounds(myGeoObjects.getBounds());
					}
				});	
			}

			// Вывод на экран результата генерации
			processingJSON ();
			
			return false;
		}
	});
}

CSS- custom.css

h1 {
	font-family: 'Helvetica', 'Arial', 'sans-serif';
	text-align: center;
	font-size: 45px;
}

/* shops list 
======================================*/

#shops {
	padding: 15px 20px;
}
#shops a {
	display: inline-block;
	margin: 5px 0;
	cursor: pointer;
	font-size: 16px;
	color: #000;
	text-decoration: none;
}
#shops a:before {
	content: '✔';
	margin: 0 10px 0 0;
	color: #f15c2b;
}
#shops a:hover {
	color: #f15c2b;
}

/* selecttown
======================================*/

#selecttown {
	padding: 10px 15px;
	width: 100%;
	border: 1px solid #f15c2b;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 18px;
}

/* map object
======================================*/

#map {
	width:100%;
	height:500px;
	padding:0;
	position:relative;
	text-align:center;
}

div[class*="balloon-content__header"] {
	font-weight: bold;
	font-size: 120%;
	margin: 0 0 5px;
}