Меню

Настройка встраиваемой карты google



Карты 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 Делаем так чтобы по клику на маркер — появлялось инфо-окно

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

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

Читайте также:  Как установить настройки гугл на blackberry

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

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

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

Источник

Как внедрить карту Google на веб-сайт: добавляем карту проезда

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

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

Вот несколько преимуществ из-за которых владельцы бизнеса захотят встроить Google карту на сайт:

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

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

Наглядный пример отображения геолокации компании на Google Картах

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

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

Для этого необходимо выполнить несколько простых действий:

  1. Укажите название вашей компании, в появившемся окне регистрации.

  1. Выберите категорию, которая больше всего подходит вашему бизнесу.
  2. Укажите адрес расположения вашей компании (он будет отображаться в результате на картах).
  3. Укажите контактные данные и адрес вашего веб-сайта, после чего регистрация будет завершена.

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

Создание профиля компании в Google My Business не обязательно, однако, ваша точка геолокации с наличием аккаунта будет выглядеть привлекательней с отображением отзывов о вашей компании:

А вот как выглядит точка компании на карте без профиля Google My Business:

Интеграция с Google maps с использованием кода Iframe, встроенного из Google

В этом разделе будет рассказано о копировании кода внедрения Google из карт Google в HTML-код сайта. Никакой другой код форматирования не применяется.

Как получить код для встраивания Google

  1. Перейти на Google Карты.
  2. Введите адрес компании в строку поиска, затем нажмите кнопку поиска.
  3. Щелкните значок Поделиться.
  4. Выберите «Вставить карту».
  5. Выберите размер карты из раскрывающегося списка.
  6. Выберите и скопируйте HTML-код внедрения iframe.

Вставьте этот код на свою HTML-страницу или виджет.

Источник

Как вставить Гугл карту на сайт

Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

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

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

Как вставить Google карту на сайт.

Существует несколько способов, для того, чтобы вставить гугл карты на свой сайт, и не важно, работает сайт под CMS WordPress или просто на HTML.

Способ № 1.

Перейдем на сайт — google.com/maps и выберем нужный адрес в строке поиска.

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

Читайте также:  Изменение настроек браузера яндекс

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

И выбрать пункт – «Код»

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

И вставить его в нужное место на сайте. Обратите внимание, если сайт на WordPress, то для вставки кода, достаточно перевести редактор в режим текста, и вставить код в нужное место. Или же вставить код в боковой виджет.

И вот что получится.

Далее, посетитель сайта, уже сможет дальше изменить масштаб, проложить путь до нужной точки, сделать вид со спутника и так далее.

Способ № 2.

Хотя первый способ, очень простой и позволяет вставить карту Google на сайт буквально в пару кликов, давайте разберем второй способ.

Нужно перейти по адресу — www.google.ru/maps. А далее? Да все как в первом способе. Также выбираете нужное месторасположение, и выбираете код. Единственная разница – сам адрес. А так сервис полностью идентичен.

Подозреваю, что свои адреса для карт имеются для всех доменных зон, коих у Гугл совсем не мало.

Способ № 3.

Но есть и третий способ. Уж он-то отличается от первых двух. Различие – больше настроек. Давайте перейдем на него.

Вначале сервис вам скажет, что у вас нет карт. Что ж, нужно создать. Для этого, необходимо нажать на значок «+»

Здесь есть ряд дополнительных элементов: выбрать объекты, добавить маркер, нарисовать линию, добавить маршрут, измерить расстояние или площадь.

Вставив маркер в нужное место, можно вставить название места и его описание.

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

После этого, нужно нажать на кнопку – «Поделиться»

Добавить название и описание карты.

И сохранить изменения

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

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

И вот что в результате получится

Таким образом, теперь вам не составит большого труда вставить на ваш сайт карту Гугл, и теперь, вашим клиентам, не придется искать ваш офис, как мне когда-то. И еще напомню. Эти методы, можно использовать на всех типах сайтах, будь это чистый HTML или же CMS, например WordPress.

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

Источник

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 окончен. Надеюсь, эта статья оказалась для вас полезной.

Источник

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

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

Adblock
detector