Как вставить карту в приложение
В этой статье мы рассмотрим API-интерфейс Google Maps Android, который позволяет добавлять в приложение карты на основе Google Maps. API автоматически обрабатывает доступ к серверам Google Maps, загрузку данных, отображение карты и реакцию на жесты карты. Вы можете использовать вызовы API для добавления маркеров, многоугольников и наложений на базовую карту и для изменения вида пользователя определенной области карты. Эти объекты предоставляют дополнительную информацию для местоположений на карте и позволяют пользователю взаимодействовать с картой.
Мы создадим приложение, которое покажет некоторые функции, доступные в API. Мы не будем охватывать все, поскольку это займет несколько постов, но мы рассмотрим общие функции, такие как добавление карты в вид, изменение типа карты, добавление маркера на карту, чтобы отметить местоположение, и настройка камеры, которая будет влиять на то, как пользователь видит карту.
Завершенный проект можно скачать здесь .
Получить ключ API
Чтобы использовать Google Maps Android API, необходимо зарегистрировать проект приложения в консоли разработчиков Google и получить ключ API Google, чтобы добавить свое приложение.
Ключ API основан на краткой форме цифрового сертификата вашего приложения, известной как отпечаток SHA-1. Во время разработки и тестирования вы должны использовать отладочный сертификат (о котором мы вскоре поговорим), но при публикации приложения вы должны использовать сертификат выпуска (инструкции по созданию сертификата выпуска можно найти здесь ).
Инструменты Android SDK автоматически генерируют отладочный сертификат при первом создании отладочной сборки, поэтому все, что нам нужно сделать, это получить его. Файл называется debug.keystore и по умолчанию он хранится в том же каталоге, что и файлы виртуального устройства Android (AVD):
Чтобы просмотреть сведения о сертификате, выполните следующее:
Linux или OS X
Windows
Вы попадете на панель управления проектом, в центре экрана нажмите «Использовать API Google».
Выберите Google Maps Android API и нажмите кнопку « Включить API» , которая появится на следующей странице.
После включения API нажмите Перейти к учетным данным на левой панели.
В меню « Добавить учетные данные» выберите « Ключ API» .
Выберите ключ Android .
В следующем диалоговом окне вы можете изменить имя ключа, но я оставил его как ключ Android по умолчанию 1
Используйте кнопку Добавить имя пакета и отпечаток пальца , чтобы добавить имя пакета вашего приложения (я использовал com.echessa.mapdemo01 ) и ваш отпечаток SHA1. После нажатия кнопки « Создать» вам будет показан ключ API, который мы будем использовать в нашем приложении.
В Android Studio создайте новый проект, который я назвал моим MapDemo01 . Убедитесь, что у него есть имя пакета, которое соответствует тому, которое вы использовали при генерации ключа в консоли разработчика Google, в противном случае вам придется изменить имя пакета в консоли разработчика, чтобы оно соответствовало вашему приложению.
Выберите API 15 в качестве минимальной версии SDK. В следующем окне выберите « Пустое действие» (« Пустое действие», если вы используете Android Studio версии 1.3 или более ранней). Оставьте последнее окно по умолчанию и нажмите Готово .
Добавление карты
Добавьте следующее в файл build.gradle (Module: app) и синхронизируйте gradle.
В файле манифеста добавьте следующее как дочерний элемент тега application . Замените ваш ключ API в атрибуте value .
Добавьте следующее как дочерний элемент элемента manifest в файле manifest.
Google Maps Android API использует OpenGL ES версии 2 для визуализации карты. Если OpenGL ES версии 2 не установлен, ваша карта не появится. Рекомендуется включить приведенный выше код в файл манифеста, который уведомляет внешние службы об этом требовании. В частности, он не позволяет Google Play Store отображать ваше приложение на устройствах, которые не поддерживают OpenGL ES версии 2.
Примечание . В предыдущих версиях API служб Google Play в файл манифеста приходилось включать разрешения для внешнего хранилища и доступа к Интернету, это уже не так.
Если вы нацелены на версию 8.3 или более позднюю версию SDK служб Google Play, вам больше не нужно разрешение WRITE_EXTERNAL_STORAGE для использования Google Maps Android API.
Если вы ориентируетесь на более ранние версии SDK сервисов Google Play, вы должны запросить разрешение android.permission.WRITE_EXTERNAL_STORAGE .
Если ваше приложение ориентировано на уровень API 23 (Android 6.0), который требует использования разрешений во время выполнения, вы должны использовать версию 8.3 или более позднюю из SDK сервисов Google Play.
Карты представлены в API классами GoogleMap и MapFragment .
Чтобы добавить карту в ваше приложение, добавьте объект Fragment в Activity который будет обрабатывать карту. Вы можете сделать это в коде или XML-файлах макета. Мы будем использовать последний метод.
Измените activity_main.xml, как показано ниже:
Выше мы добавили фрагмент к действию и установили для его атрибута android:name com.google.android.gms.maps.MapFragment . Это присоединяет MapFragment к действию. Если вам требуется поддержка старых устройств, используйте com.google.android.gms.maps.SupportMapFragment из библиотеки поддержки.
Запустите приложение, и вы увидите карту, встроенную в вид.
Вид карты по умолчанию показывает вид Земли с камерой, центрированной по экватору и перпендикулярно поверхности. Вы можете настроить начальное состояние карты, изменив настройки, такие как положение камеры (включая: местоположение, масштаб, направление и наклон), тип карты, включая кнопки масштабирования или компаса на экране, жесты, которые пользователь может использовать для управления камера, включен ли облегченный режим (растровое изображение карты, которая поддерживает подмножество функций, предоставляемых полным API).
Вы можете настроить начальное состояние карты либо через XML, либо программно.
Обновите фрагмент в файле activity_main.xml :
Запустите приложение, чтобы увидеть изменения в начальном состоянии карты.
Выше мы включили настройки для положения камеры, такие как местоположение, масштаб, направление и наклон. cameraBearing устанавливает направление, в котором вертикальная линия на карте указывает, в градусах по часовой стрелке от севера. cameraTargetLat и cameraTargetLng устанавливают местоположение центра карты. cameraTilt устанавливает положение камеры на дуге между прямым положением по центру карты и поверхностью Земли. cameraZoom определяет масштаб карты, при больших уровнях масштабирования на экране может быть больше деталей, в то время как при меньших уровнях масштабирования на экране больше мира.
Мы устанавливаем mapType в normal который является типом карты по умолчанию. Другие доступные варианты описаны ниже.
- Нормальный: Типичная дорожная карта. Показаны дороги, некоторые искусственные объекты и важные природные объекты, такие как реки. Метки дорог и объектов также видны.
- Гибрид: добавлены спутниковые фотографии с дорожными картами. Метки дорог и объектов видны.
- Спутник: спутниковые фотографии. Метки дорог и объектов не видны.
- Местность: Топографические данные. Карта содержит цвета, контурные линии и метки, а также затенение перспективы. Некоторые дороги и метки также видны.
- Нет: нет плитки. Карта отображается как пустая сетка без загруженных плиток.
Последний набор настроек определяет, появятся ли на экране элементы управления компасом и масштабированием, а также включает / отключает некоторые жесты.
Установка состояния карты программно
Мы видели, как установить начальное состояние карты, используя файлы макетов XML, далее мы рассмотрим, как сделать то же самое в коде.
Измените activity_main.xml, как показано ниже, чтобы включить только базовый MapFragment . Мы добавим больше конфигурации на карту в коде.
В MainActivity мы реализуем интерфейс OnMapReadyCallback и OnMapReadyCallback использовать onMapReady обратного вызова onMapReady чтобы получить дескриптор объекта GoogleMap . Объект GoogleMap является внутренним представлением самой карты. Чтобы установить параметры просмотра карты, измените ее объект GoogleMap .
Измените определение класса:
Добавьте onMapReady обратного вызова onMapReady .
Вышеуказанный объект получает объект GoogleMap и устанавливает тип карты и положение камеры, а затем перемещает камеру в это положение.
Добавьте следующее в конец onCreate() . Мы вызываем getMapAsync() для фрагмента, чтобы зарегистрировать обратный вызов.
Запустите приложение, и вы должны увидеть карту с установленной конфигурацией.
Вы можете использовать animateCamera() вместо moveCamera() чтобы получить хороший эффект перемещения камеры на место при загрузке карты.
Добавление маркеров на карту
Вы можете добавить маркеры на карту, чтобы показать отдельные места. Вы можете настроить маркеры, изменив цвет по умолчанию или заменив значок маркера на собственное изображение. Вы также можете добавить информационные окна, которые обеспечивают дополнительный контекст для маркера.
Добавьте следующее в onMapReady() после оператора, который инициализирует объект CameraPosition .
Здесь мы создали три маркера. Первый имеет пользовательский значок, в то время как остальные будут иметь значок по умолчанию. Второй маркер использует snippet() для отображения большего количества данных в информационном окне при касании маркера. Два других будут отображать только текст заголовка.
Запустите приложение, чтобы увидеть изменения. Я закомментировал оператор, который устанавливает тип карты, так что он по умолчанию normal .
Отображение текущего местоположения пользователя
Вашему приложению может потребоваться показать местоположение пользователя на карте. Это можно сделать либо с помощью API местоположения сервисов Google Play, либо с помощью слоя «Мое местоположение» и кнопки «Мое местоположение», чтобы отобразить текущее местоположение пользователя на карте.
Слой «Мое местоположение» предоставляет простой способ отображения местоположения устройства на карте. Чтобы использовать это, вам нужно разрешение на местоположение.
Добавьте следующее разрешение в файл манифеста.
Здесь мы запрашиваем coarse данные о местоположении, но для большей точности вы можете запросить fine данные.
Для поддержки Android Marshmallow вам необходимо использовать разрешение местоположения во время выполнения . Вкратце, мы не будем вдаваться в разрешения времени выполнения, но ссылка выше показывает, как это сделать.
Добавьте следующее в onMapReady() после кода, который создает маркеры.
Запустите приложение, и вы увидите кнопку « Мое местоположение» в правом верхнем углу карты. При нажатии на кнопку камера центрирует карту по текущему местоположению устройства, если оно известно. Местоположение обозначено на карте маленькой синей точкой, если устройство неподвижно, или как шеврон, если устройство движется.
Слой My Location не возвращает никаких данных. Если вы хотите получить доступ к данным о местоположении программным способом, вам следует использовать API определения местоположения Google Play Services.
API определения местоположения сервисов Google Play является предпочтительным способом добавления информации о местоположении в ваше приложение Android. Он имеет другие функциональные возможности, не предоставляемые слоем «Мое местоположение», что позволяет вам:
- Определите местоположение устройства.
- Слушайте изменения местоположения.
- Определите способ транспортировки, если устройство движется.
- Создание и мониторинг предопределенных географических регионов, известных как геозоны.
Вывод
Мы только что коснулись возможностей API Карт Google, он предлагает множество других функций, включая отображение тепловых карт, рисование фигур на карте, преобразование объектов KML (расширение формата данных XML) в географические фигуры и их рендеринг. как слой поверх карты и многое другое. Чтобы узнать больше об API, ознакомьтесь с документацией .
В этом руководстве рассказывается, как добавить карту Google в приложение для Android. Карта содержит маркер, которым обозначается определенное место.
Следуйте руководству по созданию приложения для Android с помощью Maps SDK для Android. Рекомендуемая среда разработки – Android Studio.
Как получить код
Версия на языке Java:
Версия на языке Kotlin:
Как настроить проект
Чтобы создать проект в Android Studio, выполните следующие действия:
-
и установите Android Studio. в Android Studio.
Клонируйте или скачайте репозиторий с примерами Google Maps Android API версии 2 с сайта GitHub, если вы ещё не сделали этого.
Импортируйте обучающий проект:
- В Android Studio выберите Файл > Создать > Импортировать проект.
- Перейдите в каталог, где вы сохранили репозиторий с примерами Google Maps Android API версии 2 после его скачивания.
- Найдите проект MapWithMarker. Он расположен в следующем каталоге:
PATH-TO-SAVED-REPO/android-samples/tutorials/java/MapWithMarker (Java)
PATH-TO-SAVED-REPO/android-samples/tutorials/kotlin/MapWithMarker (Kotlin) - Выберите каталог проекта и нажмите ОК. Теперь Android Studio создаст ваш проект с использованием инструмента сборки Gradle.
Как получить ключ API и активировать нужные API
Для выполнения этого учебного проекта вам понадобится ключ Google API, который авторизован для Maps SDK for Android.
Более подробную информацию можно найти в полном руководстве по получению ключа API.
Как добавить ключ API в свое приложение
Добавьте приведенную ниже строку и укажите вместо YOUR_API_KEY ваш ключ API.
Плагин Secrets Gradle Plugin для Android копирует ключ API во время сборки приложения и делает его доступным в виде переменной сборки в манифесте Android, как объяснено ниже.
Как создать сборку и запустить приложение
- Подключите устройство Android к компьютеру. Выполните инструкции по активации параметров для разработчиков на устройстве Android и настройте систему для обнаружения этого устройства. Для настройки виртуального устройства вы также можете использовать Менеджер виртуального устройства Android (AVD). Выбирая эмулятор, убедитесь, что вы используете образ, который содержит интерфейсы Google API. Подробную информацию можно найти в руководстве по началу работы.
- В Android Studio выберите пункт меню Запустить или нажмите на значок воспроизведения, чтобы запустить свое приложение. В открывшемся окне выберите устройство.
Android Studio запустит Gradle для сборки приложения, а затем отобразит результаты на устройстве или в эмуляторе. Вы должны увидеть карту с маркером, указывающим на город Сидней на восточном берегу Австралии, как показано на этой странице.
Понимание кода
В этой части руководства описаны наиболее важные компоненты приложения MapWithMarker, чтобы вам было проще понять принципы создания таких приложений.
Проверка манифеста Android
Обратите внимание на перечисленные ниже элементы в файле AndroidManifest.xml своего приложения.
Добавьте элемент meta-data , чтобы указать версию сервисов Google Play, с которой было скомпилировано приложение.
Добавьте элемент meta-data с указанием своего ключа API. В примере, приведенном в этом руководстве, значение ключа API сопоставляется с определенной ранее переменной сборки ( MAPS_API_KEY ). Во время сборки приложения плагин Secrets Gradle Plugin для Android делает ключи в вашем файле local.properties доступными, используя переменные манифеста.
В файле build.gradle приведенная ниже строка осуществляет передачу ключа API в манифест Android.
Ниже приведен пример полного манифеста.
Добавление карты
Отобразите карту, используя Maps SDK для Android.
Добавьте элемент <fragment> в файл макета для объекта activity, activity_maps.xml . Этот элемент указывает, что фрагмент SupportMapFragment должен выступать в роли контейнера для карты и предоставить доступ к объекту GoogleMap . В учебном проекте используется версия библиотеки поддержки Android для фрагмента карты. Это обеспечивает обратную совместимость с более ранними версиями фреймворка Android.
В методе onCreate() своего объекта activity установите файл макета как представление контента. Получите дескриптор для фрагмента карты путем вызова метода FragmentManager.findFragmentById() . Затем используйте метод getMapAsync() , чтобы зарегистрировать обратный вызов карты.
Kotlin
Реализуйте интерфейс OnMapReadyCallback и переопределите метод onMapReady() , чтобы настроить карту, когда объект GoogleMap будет доступен.
Kotlin
По умолчанию Maps SDK для Android отображает содержимое информационного окна, когда пользователь касается маркера. Нет необходимости добавлять прослушиватель кликов для маркера, если вас полностью устраивает поведение по умолчанию.
Дальнейшие действия
Прочитайте статьи об объекте карты и о том, что можно делать с маркерами.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Конструктор карт — бесплатный инструмент для компаний, журналистов и блогеров. Помогает создавать карты со своей разметкой: точками, маршрутами, выделенными областями. Такие карты можно добавить на любой сайт.
Что есть в конструкторе
Отметки. Указывают на конкретное место, адрес или компанию. Расставляйте точки вручную или привязывайте к конкретному адресу. Чтобы привязать точку к адресу, введите улицу и дом, название организации или объекта в поисковой строке.
Линии. Пригодятся, чтобы показать маршрут забега, перекрытые улицы, дорогу от остановки до офиса.
Фигуры: квадраты, круги, многоугольники. Помогают выделить на карте небольшой участок или целый район.
Как добавить объекты на карту
Выберите отметку, линию или фигуру и поместите её в нужное место.
Цвет, толщина линии и другие свойства фигур настраиваются в левой панели.
Точкам, линиям и фигурам можно добавить описание — пользователи увидят его, когда кликнут на объект. Если знаете разметку Markdown и HTML, вставляйте в описания картинки.
Отметкам можно добавить подпись, которую всегда видно на карте.
Все отметки, линии и фигуры, которые вы нанесёте на карту, появятся в левой панели. Нажмите на объект в списке, чтобы выделить его на карте. И наоборот: выберите объект на карте, чтобы выделить в списке.
Если добавить объекту описание, оно появится в списке. Так проще отличить одну точку или фигуру от другой.
Площадные объекты могут накладываться друг на друга. Если кликнете по смежной области, то выберете тот объект, который находится на более высоком слое. Чтобы изменить приоритет объектов, перемещайте их в списке вверх и вниз.
Чтобы удалить объект, найдите его в списке и нажмите на крестик.
Как настроить размер карты
Ширина и высота карты настраиваются на верхней панели. Высоту всегда указывают в пикселях. Ширину можно выбрать по размеру экрана.
Как добавить карту на свой сайт
Нажмите на кнопку «Получить код» под картой, скопируйте код и вставьте на свою страничку. Если у сайта есть админка, которая поддерживает HTML, можно сделать это через неё. Если админки нет, добавьте карту прямо в код сайта.
Если у вашей компании есть адрес, куда приходят клиенты, вы можете лишний раз позаботиться о них. Избавьте пользователей от необходимости копировать адрес, открывать карты и искать, где вы находитесь.
На сайт можно вставить карту Google, Яндекс или 2ГИС с нужной меткой, чтобы пользователи могли сразу понять, куда им предстоит ехать. И дольше оставались на сайте, рассматривая карту и увеличивая время визита, что важно для поведенческих факторов и SEO. 😉
В статье:
Выбрать можно любую карту, какая вам больше нравится.
Как вставить Яндекс карту на сайт
Первый вариант: встроить Карту с уже существующей меткой
Откройте Яндекс.Карты, найдите компанию и скопируйте код для вставки:
Карта с меткой и информацией из Яндекс.Карт будет выглядеть так:
Организация на карте Яндекса
Найдите нужный адрес.
Выберите виджет с картой и скопируйте код для вставки. Можете сначала включить предпросмотр, чтобы увидеть, как она будет выглядеть.
Второй вариант: создать свою метку
Карта, которую мы сделали, выглядит так: у нее есть маркер с иконкой, которую мы выбрали, и отображается линия с пояснением для удобства.
Карта, созданная в конструкторе Яндекса
Создание карты пошагово:
Найдите адрес, выберите цвет и вид маркера.
Сохраните метку и добавьте еще адреса, если вы хотите отметить несколько филиалов.
При желании добавьте линии и нарисуйте фигуры, чтобы сделать маршрут понятнее. Линии можно изменять по изгибам улиц.
Интерактивная полезнее, ее можно двигать и масштабировать. Для вставки на сайт советуем ее.
Статическая будет выглядеть как картинка, ее можно распечатывать.
Задайте размер карты: можно ввести пиксели в окошке размера или растянуть карту вручную.
Если выбрать «Растянуть по ширине», у карты появится параметр width = 100%, то есть потом при вставке карты на сайт она займет всю ширину блока.
У кода iframe есть ограничения: пользователь не сможет переключать виды карты, то есть доступен только вид Схема, и она будет отображаться только на крупных масштабах.
Если вам нужно поменять язык топонимов, измените параметр lang в скопированном коде. Сейчас там lang=ru_RU, но можно поставить другой язык с помощью кода языка в формате ISO 639-1 и кода региона в формате ISO 3166-1: uk_UA — украинский для Украины, tr_TR — турецкий для Турции. Для пользователей из России и Украины регион и язык подстроится под настройки паспорта пользователя.
Вставьте код с картой Яндекса на сайт через редактор страницы.
Как вставить Google карту на сайт
Первый вариант: вставить карту из Google Maps с существующей меткой
Откройте Google Maps, найдите компанию и скопируйте код для вставки:
Карта будет выглядеть так:
Нажмите «Встраивание карт» и выберите размер из предложенных или выберите «Другой размер» и укажите свои параметры.
Скопируйте получившийся HTML-код и вставьте его в код своего сайта в то место, где вы хотите разместить карту.
Второй вариант: создать свою метку в Google Maps
Так выглядит созданная нами метка в режиме предпросмотра: на ней есть описание, которое мы ввели, фотография и информация из Google Maps.
Карта с меткой компании
Пошаговое создание метки на Google картах:
Введите адрес или название компании.
Укажите название, добавьте описание организации, фотографии, выберите цвет и стиль значка.
Скопируйте полученный код и вставьте его в код страницы, куда вы хотите добавить карту.
Как вставить карту 2ГИС на сайт
Встроить карту через API
Установить интерактивную карту 2ГИС можно через JS API — это версия API для простых задач.
Карта 2ГИС
Перейдите на страницу и выберите город.
Найдите компанию по названию.
Установите нужный размер карты в правом нижнем углу.
Нажмите «Далее», прочитайте Лицензионное соглашение и примите условия.
Нажмите «Получить код» и скопируйте его для вставки на сайт.
Это простая карта с готовой меткой, но можно сделать свою через Кjнструктор. Выручит, если вашей компании нет в 2ГИС.Создать в Конструкторе карту со своими метками
В 2ГИС есть бесплатный Конструктор карт, с его помощью можно создать карту со своей разметкой — добавить метки, описания, отобразить маршруты, графически выделить области.
Пошагово как сделать карту в Конструкторе 2ГИС:
Введите адрес и найдите нужное здание.
Настройте цвет метки, введите название.
Добавьте описание, можно вставить картинку с помощью разметки HTML или Markdown.
С помощью линий и выделения областей помогите клиентам сориентироваться по маршруту.
Выберите нужный размер карты.
Скопируйте код для вставки на сайт или в мобильное приложение.
Как настроить отложенную загрузку карты на сайте
Карты громоздкие, они влияют на загрузку сайта и могут тормозить отображение страницы.
Проверить скорость загрузки конкретной страницы можно в этом инструменте. Он бесплатно измеряет скорость загрузки в соответствии с показателем Google Core Web Vitals, оценивает разные этапы загрузки и дает рекомендации:
Фрагмент проверки
Минимизировать влияние карты на скорость загрузки страницы поможет отложенная или Lazy-load загрузка.
Загрузка карты по доскроллу до нее
Если карта находится внизу страницы далеко в футере или в поп-апе, можно настроить, чтобы она загружалась не сразу при переходе на страницу, а только когда пользователь до нее доскроллит.
Пользователь Хабра iefedorov для этого советует изменить код карты, который Google предлагает вставить на сайт.
Пример исходного кода:
Его нужно изменить вот так:
Браузер будет получать src = "", когда читателю понадобится карта.
Пошаговая настройка lazy-loading карты от Максима Васяновича (MaxGraph):
Загрузка карты после наведения курсора
Другой пользователь Хабра Dionisvl предлагает такой способ оптимизировать карту Яндекса, чтобы она подгружалась только при наведении на нее курсора мыши.
При создании карты в конструкторе Яндекса с использованием API-ключа получился примерно такой код:
На сайте нужно написать контейнер для блока с картой:
Также нужны стили для статичной картинки, подойдет скриншот.
Нужен JavaScript-код, который будет отслеживать события — наведение курсора мыши на карту или тап по карте на экране смартфона — и подменять статичное изображение на интерактивную карту:
Готово, теперь карта должна загружаться по наведении курсора или тапа на экран, если пользователь смотрит сайт с мобильного.
Проверить весь сайт на ошибки поможет сервис Анализ сайта: у него есть 70 тестов для анализа ваших и конкурентных проектов. Можно проверить не только главную, но и внутренние страницы. Оценит оптимизацию контента, ссылочную массу, технические параметры и другое.
Фрагмент проверки сайта
Расскажите в комментариях, как вы сделали карту для вашего сайта и как оптимизируете ее, чтобы она не сильно тормозила загрузку?
Читайте также: