На сегодняшний день вставка карт гугла или яндекса на сайт стала практически незаменимым элементом в проектировании. Обычная вставка через iframe не дает такой гипкости (вообще не даёт гипкости) в настройке, как даёт API. Сегодня постараемся немного расширить наши знания в создании карт и вставим на сайт гугл карту с полигонами и наложениями. Собственно, что такое полигоны и наложения?

  • Полигон — замкнутая фигура, которая может использоваться для обозначения областей на карте;
  • На карту можно добавлять объекты, обозначающие точки, линии, области или наборы объектов. В Google Maps JavaScript API эти объекты называются наложениями. Наложения привязаны к координатам широты и долготы, поэтому они перемещаются при перетаскивании карты или изменении масштаба.

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

Что ж, начнем.

1. Подключение API Google Maps.

Сперва нужно подключить само API Google Map. Для подключения нам потребуется получить ключ (если еще не получили), чтобы Google мог считать ваши запросы к API. На момент написания статьи лимит составлял 25000 запросов в день. Этого вполне должно хватить для ваших целей.

Каким же образом получить этот ключ? Делаем следуещее:

  1. Регистрируем аккаунт/почту на сайте Google.
  2. Переходим по ссылке https://code.google.com/apis/console
  3. Создаем проект если еще не создан.
  4. Выбираем нужное нам API из списка

screenshot1

5. Дальше заходим в учетные данные и создаем ключ доступа.

screenshot2

 

Всё, ключ у нас есть. Пришло время поключить API к сайту. Для этого внизу страницы (в футере) вставляем следующий код:

Как видите в GET запрос передаем 2 параметра key и callback. Key  — и есть тот самый ключ, который мы только что получили. Вам нужно вписать свой ключ вместо моего.

Callback — в этот параметр передаем название функции, которая и будет инициализировать нашу карту на странице. У меня она называется — initMap, вы же можете назвать ее как хотите.

2. Готовим html.

Теперь размещаем на странице элемент контейнер, который и будет содержать карту. У меня он выглядит таким образом:

В классе map-box можно задать стили блока div карты. Например ширину или высоту. Давайте сразу разместим все необходимые нам стили вверху страницы (в хедере) или подключим их в нужном css файле.

3. Инициализируем нашу Google Map.

Осталось самое последнее дело и самое важное — это написать нашу функцию initMap, которая и будет инициализировать карту, а также создавать области, метки и наложения. Вот так она выглядит:

Разберем каждый кусок кода подробнее.

1.

Сначала создаем объект нашей карты под названием «map» и задаем некоторые свойства. Самые важные из них это zoom и center — увеличение и центр карты соответственно. Мы не будем останавливаться на других свойствах, о них вы можете прочитать в документации по Google Maps API. Отмечу, что в параметр функции getElementById мы передаем id нашего контейнера для карты, который мы создали выше в пункте 2.

2.

Теперь напишем функцию, которая и будет создавать те самые области (полигоны). Здесь всё просто, функция состоит из создания нового объекта (полигона) и его привязке к нашей карте — it.setMap(mapContainer);

3.

Здесь создаём новый объект, который будет отвечать за создание наложений на нашей карте, а также функцию CustomMarker. В нее мы будем передавать нужные параметры и при каждом вызове будет создаваться новое наложение на карте. Это очень удобно и гибко.

4.

Эта функция как раз создает наше наложение на карте. Что из себя представляет наложение? Это просто масштабируемый html блок, который привязывается к точке на карте. В нашем случаем это блок div с некоторыми параметрами. Параметры можем добавлять какие угодно, а также прицеплять классы и атрибуты.

В функции я добавляю класс map-marker к нашему наложению (блоку div) и еще пару атрибутов — id и markerText.

5. Дальше мы вызываем функцию setMapArea и передаем в нее параметры, а именно координаты точек полигона. Чтобы как бы обвести на карте нужную нам область, мы должны задать максимально возможное число координат — чем больше, тем точней будет обводимая область. Для определения координат области существует много сервисов. Найти их можно в интернете.

6.

Ну и в заключении создаем наши наложения (их 2), передав три параметра:

  1. Задаём координаты точки где будет располагаться наложение (обычно это в центре соответствующего полигона)
  2. Название объекта нашей карты.
  3. И параметры наложения, которые мы описывали выше.

4. Подведем итог.

Таким образом у нас получился довольно гибкий код создания полигонов и наложений. Должно получиться примерно ТАК. Чтобы создать еще обведенную область на карте, нужно вызвать функцию setMapArea с нужными нам координатами. Чтобы создать еще наложение — просто добавим его с помощью вот этого кусочка кода также с нужными нам параметрами:

Замечу, что мы также можем по разному стилизовать нашу карту, наложения, цвета обводки областей и многое другое. Всю информацию по соответствующем параметрам вы легко найдете в документации на сайте Google. Плюс можете поиграться с параметрами приведенными в моём примере.

Если есть вопросы или что обсудить — жду в комменты 🙂