Конструктор карт гугл мапс

Обновлено: 01.12.2022

Для создания карты для себя или других не требуется никакого специального программного обеспечения. Карты Google — это всё, что вам нужно, они позволяют добавлять собственные точки, формы и направления на вашу собственную карту. Эта статья расскажет, как это сделать.

Для этого вам нужно будет использовать Google Карты на компьютере.

Создание собственной карты в Google Maps

Пользовательская карта в Google Maps не позволяет создать новый ландшафт — вы ограничены планетой Земля. Однако она позволяет вам добавлять свои собственные ориентиры, маршруты и местоположения.

Вы также можете нарисовать свои собственные формы на существующей карте, чтобы добавить детали к существующей карте. Хотя вы можете просмотреть собственную карту в приложении Google Maps для Android и iOS, вы можете создать её только с помощью веб-версии Google Maps на компьютере.

Для начала перейдите на сайт Google Maps и войдите в систему, используя свою учётную запись Google. После входа в систему нажмите значок гамбургер-меню в левом верхнем углу.


В меню параметров выберите параметр «Ваши места».


В меню «Ваши места», которое появляется слева, щёлкните вкладку «Карты». Внизу меню нажмите кнопку «Создать карту».


Окно создания карты появится в новой вкладке. Чтобы назвать его, выберите текст «Карта без названия» в верхней части меню слева.


В меню «Редактировать название и описание карты» добавьте название и описание карты, а затем нажмите «Сохранить», чтобы сохранить его.


Пользовательские слои карты

Ваша пользовательская карта состоит из слоёв, причём слой «Базовая карта» (основной вид Google Maps) находится внизу.

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


Когда вы создаёте новую пользовательскую карту в Google Maps, по умолчанию добавляется новый «Слой без названия».

Вы можете добавить столько слоёв, сколько захотите, на свою пользовательскую карту, что позволит вам отделить различные компоненты вашей новой карты друг от друга, нажав кнопку «Добавить слой».


Если вы хотите переименовать этот слой, выберите трехточечный значок меню рядом со слоем, а затем нажмите «Переименовать слой» в раскрывающемся меню.

Чтобы удалить его, выберите «Удалить слой».


Добавление компонентов на пользовательскую карту в Google Maps

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

Для начала убедитесь, что вы находитесь в редакторе пользовательских карт, зайдя на веб-сайт Google Maps и выбрав гамбургер-меню → Ваши места → Карты → Создать карту.

Добавление точки маркера

Пользовательская точка маркера — это точка, которая отображается на карте. Вы можете использовать это, чтобы добавить дополнительные описания к области, а также указать пользователям карты на место или область, которая не указана на слое «Базовая карта».

Чтобы добавить новую точку маркера на карту, убедитесь, что вы расположили подходящую область на слое «Базовая карта». Когда будете готовы, нажмите кнопку «Добавить маркер» в меню под строкой поиска в редакторе пользовательских карт.


С помощью мыши или трекпада щёлкните область карты. Откроется редактор маркеров — добавьте подходящее имя и описание, а затем выберите «Сохранить», чтобы добавить его на карту.


Добавление линий или фигур

Вы можете добавить собственные линии и формы на свою карту, чтобы выделить определённые области.

Для этого щёлкните параметр «Нарисовать линию» в меню под строкой поиска, а затем выберите параметр «Добавить линию или фигуру».

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


Добавьте собственное имя и описание к вашему объекту во всплывающем меню, прежде чем выбрать «Сохранить» для подтверждения.


Создание пользовательских маршрутов

Пользовательскую карту также можно использовать чтобы поделиться маршрутами от A до B путём создания слоя маршрутов.

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


Слой маршрутов появится в меню слева. Добавьте точку отправления в текстовое поле «A», а точку прибытия в текстовое поле «B».


Как только оба поля «A» и «B» будут заполнены, карта обновится, показывая маршрут между указанными вами местоположениями.

Совместное использование пользовательских карт в Google Maps

Создав карту, вы можете получить к ней доступ самостоятельно из Карт Google (гамбургер-меню → Ваши места → Карты) или с веб-сайта Google Мои карты.

По умолчанию только вы можете просматривать свою карту, но вы можете поделиться ею с другими. Для этого перейдите на веб-сайт «Мои карты Google», войдите в систему, а затем выберите вкладку «Собственные», где должна быть указана ваша персонализированная карта.

Выберите один из этих вариантов, чтобы продолжить.


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

Это вызовет меню опций «Link Sharing». В разделе «У кого есть доступ» нажмите кнопку «Изменить».


В меню опций «Link Sharing» выберите уровень доступа для вашей карты. Вы можете ограничить доступ для определённых пользователей учётной записи Google, разрешить доступ всем, у кого есть ссылка на карту, или вместо этого сделать свою карту общедоступной.

После того, как вы выбрали уровень доступа, нажмите «Сохранить», чтобы сохранить выбор.


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

image

В первый раз столкнувшись с внедрением и кастомизацией Google Maps, я не нашел единой статьи, рассматривающей все необходимые моменты — информацию пришлось искать по крупицам, а что-то выдумывать самому. После чего и было решено написать эту статью, чтобы люди, ранее не работавшие со стилизацией Google Maps, но при этом ограниченные временными рамками (а может, и желанием) для полноценного изучения API, смогли быстро получить необходимую информацию и материалы. Тем более, что и те, кто обладает определенным опытом, смогут почерпнуть для себя из этой статьи какую-нибудь интересную фишку, к примеру — параллакс для элементов информационного окна.

В этой статье мы рассмотрим:

1. Внедрение Google Maps на сайт

  • Добавление через вставку iframe в разметку
  • Добавление через API
  • Инициализация маркера
  • Анимация маркера
  • Изображение маркера
  • Добавление информационного окна
  • Открытие информационного окна
  • Кастомизация элементов информационного окна
  • Параллакс-эффект для элементов в информационном окне
  • Изменение цвета объектов карты
  • Кастомизация элементов управления
  • Маска для карты

Добавление через вставку iframe в разметку

Если у вас нет необходимости изменять маркер, делать кастомное информационное окно или еще каким-либо образом воздействовать на карту, для ее добавления достаточно сделать следующее:

  • Открыть Google Maps.
  • Найти интересующий объект (например, введя адрес в поиске, либо нажав на нужное название правой кнопкой мыши и выбрав пункт в контекстном меню «Что здесь?»)

image

после чего кликнуть на гамбургер:

image

Затем находим кнопку «Ссылка/код»:

image

Копируем код для вставки:

image

Но если необходимо произвести какие-либо манипуляции, нам понадобится ключ. Если его нет рядом, можно получить тут: ссыль

Встраиваем его в адрес вместо YOUR_API_KEY :


Если нужно вызывать коллбэк после загрузки api, после ключа надо будет дописать YOUR_API_KEY&callback=initMap с названием вашей функции. Подключаем скрипт на странице и создаем в разметке блок для будущей карты:


Теперь необходимо инициализировать карту:


Координаты можно узнать при помощи опции «Что здесь», описанной выше.

Свойства, которые могут сразу понадобиться:

  • zoom: number — определяет первоначальный масштаб.
  • disableDefaultUI: boolean – убирает элементы управления.
  • scrollwheel: boolean — отключает масштабирование колесиком мыши (бывает полезно, если карта на всю ширину страницы и перебивает прокрутку вниз).

Для начала добавим маркер:


position (обязательно) указывает начальное положение маркера. Если указать те же координаты, что и для карты, то маркер будет по центру экрана. Сместить маркер можно изменив значение координат, либо сменив положение самой карты относительно видимой области (родительского блока).
map (не обязательно) указывает карту, на которой помещается маркер.

Для маркера можно задать анимацию:

  • DROP – после загрузки карты маркер падает сверху.
  • BOUNCE – маркер подпрыгивает на месте.

Анимацию можно задать при инициализации маркера, добавить или убрать, вызвав метод setAnimation() .

Пример анимации маркера при закрытии информационного окна и прекращении при открытии:

Изображение маркера можно изменить, задав адрес картинки для свойства icon .


3. Кастомизация информационного окна

Добавление информационного окна

В кастомное информационное окно можно добавить любую разметку через свойство content :


Открытие информационного окна

Чтобы информационное окно было видно сразу, надо вызвать метод open() :


Также следует добавить вызов окна при клике на маркер (в противном случае мы не сможем открыть попап):


Кастомизация элементов информационного окна

Информационное окно может быть как кастомное, так и стандартное. В кастомное мы можем добавить любые элементы и работать с ними, возможности ограничены лишь фантазией.

Основная проблема, с которой можно столкнуться при кастомизации любого из типов – края (белая область) вокруг контента и стрелочка. Эти элементы не поддаются css выборке.

image

Решить проблему можно при помощи псевдоэлементов для доступных блоков. Также, если по какой-либо причине нет возможности использовать лишний псевдоэлемет, рамочку можно убрать при помощи тени.


Но обо всем по порядку:

.gm-style-iw — основной блок, в нем находится контент. На скриншоте, расположенном выше, этот блок имеет черный фон.
.poi-info-window — обертка для текста в стандартном информационном окне, находится внутри. .gm-style-iw
.gm-style-iw + div – крестик.

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


Теперь для .gm-style-iw , или блоков внутри можно создать псевдоэлементы для перекрытия фона и стрелочки:

image

Параллакс-эффект для элементов в информационном окне

Тут возникает небольшая проблема, связанная с тем, что объекты карты создаются динамически, и нельзя просто так взять и прикрепить к ним обработчик, а клонировать блок при помощи .clone(true) в контент информационного окна с переносом обработчиков нам не позволит API.

Как вариант, можно проверять наличие элемента и сохранять после появления:


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


Если клик по динамическому элементу нужно обработать, просто ставим обработчик на обертку и ловим объект на всплытии:


4. Кастомизация карты

Изменение цвета объектов карты

Для стилизации карты используется массив стилей, в котором указывается селектор и css-свойство, которое необходимо применить.

Пример настроек, окрашивающих воду в фиолетовый цвет:


Для настройки стилей проще всего использовать специализированный сервис, к примеру Google Maps APIs Styling Wizard. Для детальной настройки карты жмем «More options»:

image

image

Копируем полученный json:

image

Если массив стилей очень большой, его можно поместить в отдельный .json файл и применить стили после его загрузки:


В конечном итоге получаем вот такие настройки карты:


Кастомизация элементов управления

image

Кнопки «Карта» и «Спутник» находятся в блоке с классом .gm-style-mtc

image

Кнопки увеличения и уменьшения изображения в блоке с классом .gmnoprint

image

Кнопка режима просмотра улиц имеет класс .gm-svpc

image

Используя эти классы, можно сделать с элементами управления все, что душе угодно. В данном случае я скрыл элементы управления, но для примера изменил цвет:

Ну, и на закуску — очень простая вещь, но может для кого-нибудь окажется в новинку. По сути — просто блок на весь размер карты, либо являющийся картинкой, либо с фоновым изображением. Также есть свойство mask-image , но оно поддерживается не всеми браузерами.

Единственное, на что тут следует обратить внимание — css свойство pointer-events , которое на маске должно быть в значении none . Это позволит не учитывать этот блок в событиях мыши (проще говоря, кликать и скроллить сквозь этот блок).

image

На этом быстрый старт Google Maps окончен. Надеюсь, эта статья оказалась для вас полезной.

Если вы хотите, чтобы клиенты всегда находили дорогу до вашего офиса или торговой точки — не забудьте добавить на сайт Google Карту. Клиенты смогут увидеть места рядом с вами, проложить маршрут и посмотреть панорамы улиц.

В статье расскажем как создать Google карту и добавить ее на сайт.

  • Более 2000 рекламных агентств и фрилансеров уже работают с сервисом и получают вознаграждение.
  • Подключиться можно самому за 1 день.
  • Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
  • Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
  • Прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.

Как создать Google Карту: пошаговая инструкция

Сработает, если место уже есть на Гугл Картах. Например, вы арендуете офис в бизнес центре, и его уже добавили на карту до вас.

Как создать Google Карту

Как поделиться Гугл Картой

Выбираем размер карты — средняя, маленькая, большая, свой размер, а затем копируем html-код, он нам понадобится для вставки на сайт. О добавлении карты на сайт через код написано ниже.

html-код гугл карты

Важно: обратите внимание, если в Google есть карточка организации, то кроме точки на карте с адресом, можно посмотреть рейтинг, отзывы, номер телефона, часы работы и фотографии компании. Карточка организации помогает продвигать бизнес, содержит важную информацию для клиентов, повышает лояльность (они видят, что компания реально существует). Как добавить компанию в Google, читайте в нашей статье про Google Мой Бизнес.

2 способ: создаем свою карту

Мы сначала создаем свою карту, а потом добавляем ее на сайт.

Как сделать Google Карту

Нам нужен пункт «Мои места».

Мои места

Карты

Пока здесь ничего нет, жмем «Создать карту».

Создание Гугл Карты

Базовая карта не имеет названия. Чтобы назвать карту и добавить ей описание, жмем на строчку «Карта без названия».

Карта без названия

Добавляем название и описание, после чего жмем «Сохранить».

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

Как добавить маркер на гугл карту

Нажимаем на здание. Точка добавлена, теперь нужно ее назвать и добавить описание. Нажимаем «Сохранить».

Как добавить точку на Гугл Карте

Точка содержит координаты. Они могут пригодиться клиентам, которые используют GPS навигатор. Стоит добавить фотографии, например, фасад здания и вход в ваш офис, так клиентам будет проще вас найти. Фото добавляем через значок фотоаппарата.

Как добавить фото на Гугл Карты

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

Как изменить цвет маркера на карте

Значки наглядно показывают, что находится в здании — где можно покушать, где переночевать, где совершить покупки. До созданной точки можно построить маршрут. Например, от метро. Делается через значок косой стрелки.

Точку можно отредактировать или удалить — значки карандаша и корзины.

Как удалить точку на гугл карте

Чтобы открыть меню карты, жмем на 3 точки рядом с названием. Можно удалить карту, задать область просмотра по умолчанию, добавить на сайт, экспортировать и распечатать.

Как распечатать карту

Код для добавление карты на сайт

Как добавить Google Карту на сайт

Через код (HTML)

Выше мы уже написали, что Google Карты можно добавлять на сайт при помощи html-кода, хотя это не единственный способ. Код нужен, если вы добавляете карту на самописный сайт или на сайт, сделанный на конструкторе. Да по сути, на любой, где есть доступ к html-коду, даже на Вордпресс, если вы, например, не хотите загружать его сторонними плагинами.

Показываем на примере конструктора Wix. Если собираетесь делать сайт на конструкторе, но не знаете, какой выбрать — читайте наш сравнительный обзор.

Нажимаем на добавление элементов (+), затем «Вставка» — «Вставка кода» — HTML iframe.

Как добавить Google Карту на сайт через код

На странице появляется блок, добавляем в него код и нажимаем кнопку «Применить» .

Вставка карты на сайт

Получается вот такая карта на странице.

Гугл карта на сайте

Карту обычно добавляют в нижнюю часть страницы или в футер сайта. Для футера выбирайте маленький размер карты.

С помощью плагина (для WordPress и других CMS)

Если ваш сайт создан на CMS, и вы не умеете работать с кодом, проще установить плагин. Для WordPress создано несколько плагинов карт, но чаще всего используют WP Google Maps — у него более 400 000 активных скачиваний.

В админке сайта заходим в плагины — добавить новый.

Пишем WP Google Maps или просто Google Maps, если хотите посмотреть, какие еще плагины есть.

WP Google Maps

Нажимаем «Установить» и «Активировать».

В этом плагине нужно создавать карту с нуля. Нажимаем «Создать карту» или «Create map» и создается первая карта, которой сразу присваивается шорткод — его потом нужно будет добавить в нужную часть страницы. Нажимаем «Редактировать» или «Edit».

Создать карту в плагине

Плагин предлагает 2 инструмента для создания карт, один не использует Api key, второй (Google Maps) использует.

Google Maps

В разделе Markers указываем адрес точки, можно добавить анимацию. Справа нужно масштабировать карту до нужного размера, например, увеличить до конкретных улиц. Сохраняем точку «Save Marker» и указываем Api Key (справа окно, где написано Please ensure you enter a Google Maps API key to continue using Google Maps), нужно нажать на ссылку.

Маркеры

Ключ вставляется в соответствующее окно.

API key

Мы не будем подробно останавливаться на процессе регистрации — просто нужно будет заполнить несколько форм и оплатить тариф, после чего, вы получаете готовый ключ, который останется вставить в поле плагина.

ключ от гугл карт

Чтобы карта начала отображаться на странице, в нужную часть вставляем шорткод и сохраняем страницу.

Заключение

Google Карта на сайте, помогает клиентам понять, где вы находитесь. Ее актуально использовать владельцам оффлайн бизнеса — торговых точек, кафе, офисов. Можно взять готовую карту и добавить ее на сайт или создать свою с нуля. На сайт карта добавляется при помощи html-кода или плагина. В некоторых случаях может понадобиться API key.

Задача для примера

  1. Вывести карту (надо же!)
  2. Задать город
  3. Переместить карту к городу
  4. Маркером указать адрес
  5. Добавить информации
  6. Вывести карту (надо же!)
  7. Сохранить маркер с иноформацией (при клике на него вывести ее)
  8. Избежать нагромождения (т.е. сделать кластеризацию) маркеров.

Как делать?

Ключ API
Map\Marker\InfoWindow


Для работы нам понадобится 3 основных объекта. Первое – это карта.
Карта создается очень просто. У нас есть какой-то определенный контейнер:

center: myLatlng – это координаты центра карты
zoom – это увеличение при инициализации
mapTypeId – тип (политическая, физическая, гибрид)
Карта готова!

Второе — это метки:

position – собственно координаты метки
map – на какую карту метку поместить
title – при наведении мыши будет писать “Hello World!”.

InfoWindow


content – содержимое в метке

— при клике на метку, показать окно с информацией, на карте map с привязкой к marker.

Geocoding
  • По наименованию чего-то, найти это на карте и сообщить координаты
  • По координатам, сообщить всё что находится на этих координатах.

И в ответе приходит:


Вся прелесть в том, что можно в address параметре передавать значение на любом языке(Ivanovo, Іваново, ), еще лучше, что для Санкт-Петербурга прокатывает «Спб» и «Питер». Правда есть и недочеты: мой родной город Ивано-Франковск упорно называет Ивано-Франковськ, на украинский манер.
Вторая возможность, это по координатам узнать адрес:

А теперь о не очень хорошем. Geocoder – насколько клевая функция, что пользоваться ею можно только 2500 запросов в день. Google предлагает Google API Key Premier от 10000$ в год, и тогда ограничение будет в 100 тыс. запросов в день, причем куча всяких «клевых» дополнений, но я их не могу себе позволить.

Markercluster

Составляем массив маркеров, не добавляя в карту:

maxZoom – максимальный зум при котором мы еще группируем маркеры, дальше – уже нет.
gridSize – размер ячеек сетки, чем меньше значение, тем меньше сетка группировки
styles – дополнительные стили

Код из примера
  • собственно страница
  • получить все маркеры (в json)
  • загрузить файл (через ajaxUploader) и получить ссылку для картинки
  • сохранить в базу данных маркер (на выходе json result = ok)


Функция для «прыжка» маркера:

Итого

Google Maps API – очень классная и удобная штука, которая легка в использовании и понимании. Единственно, что плохо – так это слабое покрытие регионов в России, так что сервисам, которые предполагается использовать в глубинке google.maps пока мало интересен, а вот для больших городов (особенно Москва и Питер), а также для Украины – всё отлично.
Geocoding – очень полезная вещь и при правильном использовании может стоить тех денег, что за нее просят (ну или Microsoft или Яндекс подоспеет с аналогом уже есть. Хотя насколько я знаю, картографическая информация стоит бешеных вложений.)

Соавтор(ы): Jack Lloyd. Джек Ллойд — автор и редактор, пишущий о технологиях для wikiHow. Имеет более двух лет опыта в написании и редактировании статей на технические темы. Энтузиаст всего связанного с технологиями и учитель английского языка.

Из этой статьи вы узнаете, как пользоваться сервисом Google Мои карты, чтобы нанести на карту местоположения, линии и маршруты. Создать такую персонализированную карту можно на компьютере на сайте Google Карты, а также на Android-устройстве в приложении «Мои карты». Приложение «Мои карты» недоступно на iPhone, iPad или iPod touch.

Изображение с названием Make a Personalized Google Map Step 1

Изображение с названием Make a Personalized Google Map Step 2

  • Если вы не вошли в свою учетную запись Google, введите адрес электронной почты и пароль.

Изображение с названием Make a Personalized Google Map Step 3

Нажмите + Создать новую карту . Вы найдете эту красную кнопку в верхней левой части страницы. [1] X Источник информации

Изображение с названием Make a Personalized Google Map Step 4

Присвойте карте имя. Нажмите «Карта без названия» в верхнем левом углу страницы, введите новое имя и нажмите «Сохранить».

Изображение с названием Make a Personalized Google Map Step 5

  • Также можно щелкнуть по определенному местоположению под строкой поиска, когда начнете вводить название или адрес.

Изображение с названием Make a Personalized Google Map Step 6

  • Также можно добавить описание в текстовом поле, которое находится под строкой с названием местоположения.

Изображение с названием Make a Personalized Google Map Step 7

  • «Добавить линию/фигуру» — можно выделить область на карте или измерить расстояние между двумя точками.
  • «Добавить маршрут для водителя» — можно рисовать линии, которые привязаны к дорогам между двумя или более точками.
  • «Добавить маршрут для велосипедиста» — можно рисовать линии, которые привязаны к дорогам между двумя или более точками.
  • «Добавить маршрут для пешехода» — можно рисовать линии, которые привязаны к дорогам между двумя или более точками.

Изображение с названием Make a Personalized Google Map Step 8

Щелкните по опции «Добавить линию/фигуру». Указатель мыши превратится в перекрестие, с помощью которого можно рисовать линии.

Изображение с названием Make a Personalized Google Map Step 9

Создайте линию или маршрут. Щелкните по точке начала линии, щелкните по точке завершения линии, а затем щелкните по точке, которая появится на конце линии. Откроется окно. Введите имя линии или маршрута, а затем нажмите ↵ Enter .

Изображение с названием Make a Personalized Google Map Step 10

Щелкните по значку «Добавить маршрут». Он выглядит как искривленная стрелка и находится справа от значка «Нарисовать линию». В нижней левой части страницы откроются два поля «А» и «В».

Изображение с названием Make a Personalized Google Map Step 11

Изображение с названием Make a Personalized Google Map Step 12

Введите адреса места назначения. Сделайте это в поле «B» в нижней левой части страницы. Между точками «A» и «B» появится линия маршрута.

Изображение с названием Make a Personalized Google Map Step 13

Закройте карту, когда закончите. Если компьютер подключен к интернету, внесенные изменения будут сохранены на Google Диске.

Читайте также: