От автора: в данном уроке мы с Вами продолжим говорить о google картах. А именно мы посмотрим, как добавить на карту множество меток и реализовать переключение между ними, с использованием масштабирования. То есть, предположим, что мы разрабатываем сайт, и не просто сайт, а интернет-магазин для компании, у которой есть несколько пунктов выдачи в некотором городе. Пусть это будет Киев.
Соответственно все пункты выдачи необходимо отобразить на карте в виде меток, а также реализовать возможность выбора конкретного отделения и просмотр более детального его местоположения. По сути, как бы выбрать конкретную метку и увеличить масштаб карты, но при этом данная метка должна располагаться обязательно строго по центру.
Итак, в нашем распоряжении есть достаточно объемный массив объектов с информацией о пунктах выдачи или отделениях, которые необходимо отобразить на экране.
Как Вы видите данных очень много, но нас интересует только название каждого пункта и его географические координаты, которые будут использоваться для нанесения меток на карту. Информация по отделениям в текстовом виде будет выглядеть следующим образом:
Теперь давайте отобразим на экран карту. Для этого подключаем библиотеку API Google Maps.
<script async="" defer="" src="https://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); }
Для начала определяем объект centerKiev, в котором сохраним два свойства, хранящие географические координаты города Киев. Данные координаты мы будем использовать для определения центра Киева, так как именно этот город был выбран в начале. Далее определяем объект параметров будущей карты – mapOptions, и формируем карту, объект которой запишется в переменную map.
Теперь можно посмотреть предварительные результаты нашей работы.
Как Вы видите, карта успешно отображается на экран. Теперь отобразим метки.
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. Причем ключи в данном массиве будут полностью идентичны исходному массиву с отделениями.
Для выбора конкретной метки на карте, мы будем использовать выпадающий список 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;?>
Обратите внимание, что атрибут value тега option, содержит индекс соответствующего элемента массива. Результат будет следующим.
Теперь добавим код, благодаря которому при выборе определенной метки – карта будет масштабироваться и тем самым можно будет более детально рассмотреть местность.
jQuery("#chooseCenter").on('change',function() { var id = $(this).find(":selected").val(); map.setCenter(markers[id].getPosition()); map.setZoom(16); });
Используя библиотеку jQuery – регистрируем обработчик события change. Далее получаем значение атрибута value у выбранного элемента выпадающего списка и устанавливаем новый центр карты, а так же масштабирование. Результат будет следующим:
Таким образом, мы с Вами выполнили поставленную задачу, а значит, текущий урок можно завершать. Всего Вам доброго и удачного кодирования!!!