Работа с метками в Google Maps

Дата публикации: 2018-01-30

От автора: в данном уроке мы с Вами продолжим говорить о google картах. А именно мы посмотрим, как добавить на карту множество меток и реализовать переключение между ними, с использованием масштабирования. То есть, предположим, что мы разрабатываем сайт, и не просто сайт, а интернет-магазин для компании, у которой есть несколько пунктов выдачи в некотором городе. Пусть это будет Киев.

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

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

Работа с метками в Google Maps

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

Работа с метками в Google Maps

Теперь давайте отобразим на экран карту. Для этого подключаем библиотеку API Google Maps.

<script async="" defer="" src="//maps.googleapis.com/maps/api/js?key=mykey&amp;callback=initMap">
    </script>

1 2	<script async="" defer="" src="//maps.googleapis.com/maps/api/js?key=mykey&callback=initMap"> </script>

Причем mykey – это ключ для доступа к API Google. Параметр callback указывает имя функции, которая будет вызвана на исполнение при подключении библиотеки. А значит, давайте опишем данную функцию.

var map, markers;
	
	function initMap() {
		
		var centerKiev = {
			lat:50.45466,
			lng:30.5238
		}
		
		var mapOptions = {
			center:centerKiev,
			scrollwheel:false,
			zoom:10
		}
		
		map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
		
		
	}

var map, markers;

function initMap() {

var centerKiev = {

lat:50.45466,

lng:30.5238

}

var mapOptions = {

center:centerKiev,

scrollwheel:false,

zoom:10

}

map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

}

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

Теперь можно посмотреть предварительные результаты нашей работы.

Работа с метками в Google Maps

Как Вы видите, карта успешно отображается на экран. Теперь отобразим метки.

function initMap() {
		
		var centerKiev = {
			lat:50.45466,
			lng:30.5238
		}
		
		var mapOptions = {
			center:centerKiev,
			scrollwheel:false,
			zoom:10
		}
		
		map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
		
		markers = [];
		
		<?php foreach($otdels as $key => $otd) : ?>
		
			<?php if($otd->Longitude && $otd->Latitude) : ?>
			
				var marker = new google.maps.Marker(
				{position:{lat:<?php echo $otd->Latitude;?>,lng:<?php echo $otd->Longitude;?>},map:map}
				);
				markers[<?php echo $key;?>] = marker;
			<?php endif;?>
		
		<?php endforeach; ?>
		
	}

function initMap() {

var centerKiev = {

lat:50.45466,

lng:30.5238

}

var mapOptions = {

center:centerKiev,

scrollwheel:false,

zoom:10

}

map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

markers = [];

<?php foreach($otdels as $key => $otd) : ?>

<?php if($otd->Longitude && $otd->Latitude) : ?>

var marker = new google.maps.Marker(

{position:{lat:<?php echo $otd->Latitude;?>,lng:<?php echo $otd->Longitude;?>},map:map}

);

markers[<?php echo $key;?>] = marker;

<?php endif;?>

<?php endforeach; ?>

}

Каждая отдельная метка, это специальный объект, в котором необходимо определить свойство position – позиция метки на картах Google. Значения для данного параметра, хранятся в массиве пунктов. А значит обходим данный массив, используя цикл foreach. Получаем доступ к географическим координатам, прописываем их при создании объекта маркера и помещаем объект метки в ячейку массива markers. Причем ключи в данном массиве будут полностью идентичны исходному массиву с отделениями.

Работа с метками в Google Maps

Для выбора конкретной метки на карте, мы будем использовать выпадающий список select, теги option которого необходимо сформировать.

<?php foreach($otdels as $k => $item) : ?>                        	
                        	<?php 
    			         		if(strpos($item->DescriptionRu,':')) {
    								list($name,$address) = explode(':',$item->DescriptionRu);
    							}
    							else {
    								$name = $item->DescriptionRu;
    							}
    		         		?>                        	
                        	<option value="<?php echo $k; ?>"><?php echo $name; ?></option>
                        	<?php endforeach;?>

<?php foreach($otdels as $k => $item) : ?>

<?php

if(strpos($item->DescriptionRu,':')) {

list($name,$address) = explode(':',$item->DescriptionRu);

}

else {

$name = $item->DescriptionRu;

}

<?php endforeach;?>

Обратите внимание, что атрибут value тега option, содержит индекс соответствующего элемента массива. Результат будет следующим.

Работа с метками в Google Maps

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

jQuery("#chooseCenter").on('change',function() {
		var id = $(this).find(":selected").val();
		
		map.setCenter(markers[id].getPosition());
		map.setZoom(16);
	});

jQuery("#chooseCenter").on('change',function() {

var id = $(this).find(":selected").val();

map.setCenter(markers[id].getPosition());

map.setZoom(16);

});

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

Работа с метками в Google Maps