Меню

Как поменять цвет карт гугл



Карты Google Maps — вставка и оформление (стилизация) карт на свой сайт

Всем привет! Сегодня мы научимся не только устанавливать карту Google Maps на свой сайт (любую html страницу), но и стилизовать карты Google Maps — изменять цвета карты, а также добавлять описание к маркеру карты Google Maps, изменять вид (изображение) маркера и добавлять к нему свое описание. Поехали!)

Важное примечание. Все наши эксперименты мы будем делать локально. Для того чтобы использовать карты Google Maps на своем сайте необходимо получить специальный Auth ключ. Сделать это несложно. Его получение мы опустим и рассматривать не будем.

1. Вставка карты Google Maps

Для начала давайте создадим html страницу и вставим на нее карту Google Maps. Делать это мы будем с помощью Google Maps API. То есть пойдем продвинутым путем. Надо заметить что у Google есть хорошая документация и инструкция на русском и английском по использованию Google Maps. Так что программисты могут сразу отправиться туда. Если же вы хотите получить понятный пошаговый урок — то оставайтесь.

Теперь я опишу по очереди действия которые необходимо сделать и после приведу код страницы с комментариями. Сперва создаем HTML страницу. Затем:

    На странице создаем элемент

Вот код страницы который у нас получился. Обратите внимание на комментарии внутри, я описал что и где происходит.

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

2. Карта Google Maps Api — определяем место и устанавливаем маркер

2.1 Определяем место центрирования карты

Давайте покажем на карте расположение Большого Театра. В параметре center мы определяли координаты центрирования карты:

Нам необходимо получить такие координаты для нашего места. Для этого идем в обычную версию Google Maps и правой клавишей кликаем на интересующем нас месте. Нажимаем «Что здесь» и получаем координаты места. (55.760186, 37.618711). Заодно и изменю масштаб, установив его на 18: zoom: 18 .

2.2 Устанавливаем маркер

Место определили. Осталось показать маркер на карте. Внутри функции initMap() добавляем переменную для маркера:

Теперь у нас есть карта с маркером

Как добавить событие по клику на карту или маркер в Google Maps

Также на клик по маркеру можно добавить свое событие. В итоговом коде страницы мы это делать не будем. Но делается это вот так:

Первый параметр метода addListener — это объект, для которого добавляется событие, в нашем случае marker . Объектом может выступать не только маркер но и сама карта. Второй параметр click определяет тип события, в данном случае один щелчок. Третий — функция обработчик, которая сработает.

Более подробно про маркер и возможности работы с ним рекомендую посмотреть в документации.

2.3 Установка собственной иконки для маркера в Google Maps

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

В описание переменной с маркером, добавлю иконку.

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

3. Задаем свои стили оформления для карты Google Maps

Пришло время раскрасить нашу карту. Придать ей особый и неповторимый вид. Делать мы это будем с помощью сервиса Snazzy Maps который имеет большое количество скинов для Google карт. И позволяет делать вот такие крутые карты:

Я выбрал стиль карты который называется Blue water. На странице данного стиля можно найти код для оформления и скачать файл с примером — применения такого стилевого оформления к карте Google Maps.

Читайте также:  Липовый цвет с чем заваривать

Стили для оформления карты добавляем в свойство styles которое мы указываем для переменной map — когда создаем в ней объект с картой.

Привожу весь фрагмент кода:

Теперь наша карта выглядит вот так:

4. Информационные окна

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

  1. Создать само окно и контент внутри него
  2. Сделать так чтобы оно появлялось по клику на маркер.

Все это происходит внутри функции initMap()

4.1 Опишем контент инфо-окна:

4.2 Создадим инфо-окно

4.3 Делаем так чтобы по клику на маркер — появлялось инфо-окно

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

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

Готовая карта

Готовую получившуюся карту и код можно посмотреть ниже или на codepen.

See the Pen Google Map by Yurij (@rightblog) on CodePen.18493

Источник

Как поменять цвет карт гугл

Сообщение maxam » 01 окт 2015, 17:07

я просматривал этот ресурс. Там расширение для wordpress. А ак его установить в билдер?

Отправлено спустя 1 минуту 15 секунд:

я просматривал этот ресурс. Там расширение для wordpress. А ак его установить в билдер?

upd. Нашел для билдера. Спасибо!

Отправлено спустя 16 минут 48 секунд:
Зашел на сайт Aditerum’a, но как скачать оттуда?

Google Maps — как изменить цветовую гамму?

Сообщение vlad » 01 окт 2015, 18:34

Google Maps — как изменить цветовую гамму?

Сообщение maxam » 02 окт 2015, 11:27

Google Maps — как изменить цветовую гамму?

Сообщение igorweb » 06 янв 2016, 18:12

Google Maps — как изменить цветовую гамму?

Сообщение Alex » 06 янв 2016, 19:26

Google Maps — как изменить цветовую гамму?

Сообщение igorweb » 06 янв 2016, 19:56

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

Отправлено спустя 25 минут 44 секунды:

Google Maps — как изменить цветовую гамму?

Сообщение vlad » 06 янв 2016, 20:00

Google Maps — как изменить цветовую гамму?

Сообщение igorweb » 06 янв 2016, 20:03

Google Maps — как изменить цветовую гамму?

Сообщение vlad » 06 янв 2016, 20:09

Google Maps — как изменить цветовую гамму?

Сообщение igorweb » 06 янв 2016, 20:15

Google Maps — как изменить цветовую гамму?

Сообщение vlad » 06 янв 2016, 20:18

Google Maps — как изменить цветовую гамму?

Сообщение igorweb » 06 янв 2016, 20:21

Google Maps — как изменить цветовую гамму?

Сообщение vlad » 06 янв 2016, 20:26

Google Maps — как изменить цветовую гамму?

Сообщение igorweb » 06 янв 2016, 20:46

Заполнил (добавил по умолчанию который дается) — не помогло.

Отправлено спустя 10 минут 1 секунду:
Все появилась карта. Оказывается нужно и другие еще настройки прописывать. Не все так просто + еще и не на русском, пока разберешься. Теперь понять бы как свой дизайн туда запихнуть.

Google Maps — как изменить цветовую гамму?

Сообщение vlad » 06 янв 2016, 21:12

Google Maps — как изменить цветовую гамму?

Сообщение igorweb » 06 янв 2016, 21:37

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

Отправлено спустя 9 минут 42 секунды:
Вот здесь http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html настраиваете свой дизайн. Слева сперва выбираете отдельные настройки для ландшафта (подсвечиваете нужное), дорог, напдписей, воды и др. Потом справа жмете на «Show JSON», появляется окошко, в нем копируете код от начала квадратной скобки и до конца квадратной скобки (вместе со скобками). Далее уже в строке 3 в свойствах контейнера с расширением выбираете «Styling Method», справа жмете на три точки, далее «добавить», в строке «Preset or Custom «выбираете «Custom», а в строке «Custom Style» вставляете скопированный свой код. не забудьте также в строке 2 «Center of the map» указать нужную координаты, которые нужно определить в гугл.картах.
Вот и все, надеюсь кому-то поможет.

Читайте также:  Как лучше всего настроить цвета монитора

Отправлено спустя 13 минут 35 секунд:
Забыл. Еще и в строке 4 нужно выбрать другой размер, иначе не будет показываться карта.

Источник

Google Maps — кастомизируй меня полностью

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

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

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

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

2. Кастомизация маркера

  • Инициализация маркера
  • Анимация маркера
  • Изображение маркера

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

  • Добавление информационного окна
  • Открытие информационного окна
  • Кастомизация элементов информационного окна
  • Параллакс-эффект для элементов в информационном окне

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

  • Изменение цвета объектов карты
  • Кастомизация элементов управления
  • Маска для карты

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

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

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

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

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

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

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

Осталось только вставить полученный код в разметку.

Добавление через API

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

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

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

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

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

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

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

2. Кастомизация маркера

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник