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

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

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

скачать исходники

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=mykey&amp;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.

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

Работа с метками в 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; ?>
 
 }

Каждая отдельная метка, это специальный объект, в котором необходимо определить свойство 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;?>

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

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

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

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

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

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

Таким образом, мы с Вами выполнили поставленную задачу, а значит, текущий урок можно завершать. Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по ES 6 (EcmaScript 6.0)

Прямо сейчас посмотрите курс по EcmaScript 6.0

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. olimov.88@inbox.ru

    Здравствуйте у меня ошибка
    Warning: Invalid argument supplied for foreach() in C:\OSPanel\domains\phptest.loc\mapsotdel.loc\theme\user.php on line 22

  2. olimov.88@inbox.ru

    Распаковал исходники все равно выводится ошибка
    Warning: Invalid argument supplied for foreach() in

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree