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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree