Как сделать Google Maps на русском?

Карты 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

rightblog.ru

Простые карты для Andro >

Представлено: Hafizh H., опубликовано: 23 мая 2016 г.

Хафиж Херди (Hafizh Herdi)
Основатель TWOH Engineering

В настоящее время все больше и больше приложений для Android* используют технологии определения местоположения и картографии. Эти функции, практически, становятся обязательными для ваших приложений для Android. Например, с отображением информации о заправочных станциях и дальнейшим предложением маршрута до ближайшей из них, пользователю гораздо проще найти нужное, если это представлено на карте. К счастью, с использованием прикладных программных интерфейсов Google Maps Android* API и Android* Studio мы можем с легкостью создать функцию представления карт и затем встроить ее в наше приложение. В этой статье мы попытаемся встроить простую карту в наше приложение с использованием комплекта Google Maps Android SDK и Android Studio.

Создание ключа прикладного интерфейса Google Maps Android* — API Key

Во-первых, для использования комплекта Google Maps Android API SDK нам потребуется ключ прикладного интерфейса или ключ API. Этот ключ можно получить бесплатно на консоли Google Developer Console. Вы можете перейти по этой ссылке и выбрать > Create a new Project (Создать новый проект). Затем на новой открывшейся странице вы можете создать учетные данные, выбрав во всплывающем окне API key, как это показано в следующем примере:

После этого вам будет предложено ввести имя для вашего ключа прикладного интерфейса Android API (см. следующий пример):

Вы также можете указать имя пакета и «отпечаток пальца», чтобы ключ API можно было использовать только в конкретном вашем приложении. Однако в этом учебном примере мы воспользуемся универсальным ключом. После завершения действий с назначением имени ключа API нажмите кнопку > Create (Создать). Теперь у вас есть ключ Android API:

Вы можете скопировать и сохранить его для дальнейшего использования.

Создание приложения с функцией карты с помощью ПО Android Studio

ПО Android Studio — это одна из наиболее популярных сред среди разработчиков приложений Android, и именно поэтому я не сомневаюсь, что большинство из вас знакомо с ней. Мы будем использовать Android Studio для создания нашего первого приложения с картами.

Во-первых, откройте Android Studio и на панели верхнего меню выберите > File (Файл) > New (Новый)> New Project (Новый проект), а затем выберите шаблон активности «Google Maps Activity».

После этого нажмите > Next (Далее) для отображения новой страницы, на которой вы сможете ввести имя активности (Maps Activity), имя для раскладки (Layout) и заголовок активности (Activity Title). Оставим это значение по умолчанию. На следующей странице вы можете указать имя вашего приложения и пакета. Если вы закончили действия, нажмите «Finish» (Закончить), и вы окажетесь на странице вашего приложения.

Используем ранее созданный ключ API для этого приложения. На странице проекта вашего приложения откройте файл _google_mapsapi.xml в папке /res/values. Замените значение YOUR_KEY_HERE на ваш ключ API, как это показано в следующем примере.

После этого вы сможете открыть файл MapsActivity.java, который содержит всю логику создания нашего приложения с картой. Код внутри файла выглядит следующим образом:

Это довольно простой код, однако давайте рассмотрим его. Во-первых, он должен создать экземпляр GoogleMap , который представляет карту в нашем приложении. Затем он создаст новый элемент Markerдля размещения в верхней части карты. Маркер использует местоположение из переменной LatLng, которая представляет собой координату (-34, 151). И наконец, будет вызван метод moveCamera() . Когда мы первый раз откроем приложение, он переместит карту на конкретную координату, которая в этом примере находится в Сиднее.

Возможно, вы спросите, «А если мне нужно поместить координату в мое местоположение?» Не беспокойтесь, так как мы можем сделать и это. Для этого давайте немного изменим код! Просто добавьте следующую строку:

Далее представлен метод moveCamera() . Он позволяет отобразить небольшую кнопку «мое местоположение» в верхнем правом углу карты. Когда вы нажмете эту кнопку, карта «оживет» и переместится в ваше текущее местоположение. Однако помните, что для использования этой функции необходимо включить на вашем устройстве Android службу Location Services.

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

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

software.intel.com

Полный список

— создаем приложение с картой
— настраиваем карту и обрабатываем ее события
— программно меняем положение камеры

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

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

1) В гугл-консоли включить службу карт и получить API-ключ для работы

2) Обеспечить доступ проекта к Google Play services

Начнем с первого пункта. Для этого нам надо зайти в Google APIs Console.

Если у вас нет проекта, гугл предложит его создать.

Жмем Create project…

Проект создан. Слева выбираем Services и открывается список служб.

В этом списке ищем Google Maps Android API v2

Жмем на тумблер включения (OFF), принимаем соглашение и снова попадаем в список служб.

Но теперь служба должна быть включена

Все ок. Теперь идем за ключом.

Для этого слева сверху выбираем API Access и открывается такой экран.

На нем жмем кнопку Create new Android key и от нас требуют ввести SHA1-значение ключа, которым будет подписано приложение.

И даже дают инструкции, как это сделать с помощью утилиты keytool

Если вообще непонятно о чем речь, рекомендую прочесть Урок 123. Там я все подробно описал.

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

Берем содержимое поля SHA1 fingerprint

К нему через точку с запятой дописываем пакет приложения (в этом уроке это будет ru.startandroid.develop.p1391googlemaps), вставляем в поле и жмем Create.

Появился нужный нам ключ — строка API key.

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

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

Google Play services

Теперь второй пункт. Для работы с картой нам понадобится Google Play services.

Открываем SDK Manager и ищем там Extras > Google Play services (если планируете поддержку Android 2.2, то Google Play services for Froyo). Если еще не установлено, то устанавливайте.

Исходники из папки google-play-services_lib надо будет импортнуть в Workspace. Для этого в меню Eclipse жмем File > Import, выбираем Android > Existing Android Code into Workspace, находим google-play-services_lib папку, ставим галку, чтобы импорт был выполнен путем копирования (Copy projects into workspace) и жмем Finish.

Проект google-play-services_lib должен появиться в вашем Workspace

Предварительная подготовка завершена, можем создавать проект.

Project name: P1391_GoogleMaps
Build Target: Android 2.3.3
Application name: GoogleMaps
Package name: ru.startandroid.develop.p1391googlemaps
Create Activity: MainActivity

Настройка проекта

Теперь еще немного возни с проектом.

Заходим в свойства проекта и добавляем (кнопкой Add) ссылку на ранее импортированный google-play-services_lib проект.

В манифесте необходимо добавить следующее в тег application:

Первые данные, это наш ключ из гугл-консоли. Здесь вам надо в android:value поставить ваше значение API key, которое вы чуть ранее получили и оставили открытым в браузере. Этот ключ нужен, чтобы карта работала.

Вторые данные – это версия Google Play services. Думаю, что эта инфа о версии нужна, чтобы карта четко понимала, как и что ей доступно из этих сервисов.

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

Это доступ в инет, проверка доступности инета, сохранение кэша карт и доступ к гугл-веб-сервисам.

Если думаете работать с определением местоположения, то не забывайте про:

И туда же, в тег manifest такое требование:

Гугл-карты используют OpenGL ES версии 2. На девайсах, которые это не поддерживают, карта просто не отобразится. Поэтому ставим ограничение.

Теперь все. Далее продолжаем работу, как с обычным проектом.

В strings.xml добавим строки:

Кнопка и фрагмент-карта

В onCreate мы находим наш фрагмент с картой и получаем от него объект GoogleMap методом getMap. Учитывайте, что этот метод может вернуть null.

Кстати, в onCreate можно также повесить проверку, что на устройстве доступно Google Play services. Для этого надо вызвать метод isGooglePlayServicesAvailable() и он должен вернуть SUCCESS. Подробности в хелпе.

Метод init пока пустой.

В onClickTest мы устанавливаем тип карты методом setMapType

Всего существует 5 типов:

MAP_TYPE_NONE – карта не будет отображаться

MAP_TYPE_NORMAL – обычный режим, в нем карта стартует по умолчанию.

MAP_TYPE_TERRAIN – карта рельефа местности

MAP_TYPE_HYBRID – снимки со спутника + инфа о улицах и транспорте

Получить текущий тип можно методом getMapType.

Я буду проводить все тесты на реальном устройстве, т.к. эмуляторы по умолчанию не поддерживают Google Play services. Но если очень надо, то можно и на эмуляторе запустить после некоторых манипуляций. Об этом написано, например, здесь. Надо скачать два APK-файла и установить их на эмулятор.

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

У меня при первом запуске карта была не видна, но были видны кнопки управления масштабом. В логах был такой текст: Failed to load map. Error contacting Google servers. This is probably an authentication issue (but could be due to network errors). В этом случае убедитесь, что все верно сделано с получением ключа. Если проблема остается, то удалите приложение с устройства, сделайте в Eclipse очистку проекта (меню Project > Clean) и снова установите приложение — мне помогло.

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

Посмотрим, что еще можно сделать с картой.

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

Вот, например схема 0-го этажа аэропорта Барселоны. Справа видно переключатель этажей.

Мы можем отключить программно эту возможность методом setIndoorEnabled.

Метод setBuildingsEnabled управляет отображением 3D зданий.

Управление

Управление картой жестами и кнопками также поддается настройке. Для этого необходимо вызвать метод getUiSettings и мы получим объект настроек интерфейса UiSettings.

У него куча методов, которые что-либо включают/выключают:

setMyLocationButtonEnabled – кнопка текущего местоположения (необходимо включить определение, метод setMyLocationEnabled(true))

У этих методов есть аналоги, которые начинаются с is вместо set и позволяют получить текущие значения.

На карту можно вешать слушателей. Перепишем метод init:

setOnMapClickListener вешает слушателя OnMapClickListener. Его метод onMapClick сработает при клике на карту и вернет объект LatLng с координатами (latitude, longitude), где было нажатие.

setOnMapLongClickListener вешает слушателя OnMapLongClickListener. Его метод onMapLongClick сработает при длительном нажатии на карту и вернет объект LatLng с координатами (latitude, longitude), где было нажатие.

setOnCameraChangeListener вешает слушателя OnCameraChangeListener. Его метод onCameraChange сработает при смене позиции камеры, т.е. при пролистывании карты, и вернет объект CameraPosition, который содержит информацию о текущем положении камеры.

CameraPosition имеет атрибуты:

— target, тип LatLng с полями-координатами: latitude, longitude. Это точка, на которую смотрит камера.

— bearing, угол поворота камеры от севера по часовой

— tilt, угол наклона камеры

— zoom, текущий уровень зума

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

Теперь рассмотрим возможности программного изменения положения камеры.

Для этого нам необходимо будет создавать объект CameraUpdate и передавать его в один из методов:

animateCamera(CameraUpdate update, GoogleMap.CancelableCallback callback) – плавное перемещение и возможность указать слушателя CancelableCallback, который оповестит, что перемещение завершено (метод onFinish), либо прервано (метод onCancel).

animateCamera(CameraUpdate update, int durationMs, GoogleMap.CancelableCallback callback) – плавное перемещение, слушатель CancelableCallback и возможность указать время длительности перемещения в миллисекундах

Остается узнать, как получить объект CameraUpdate, который будет содержать информацию о перемещении камеры. Для этого используется CameraUpdateFactory.

Пойдем по порядку методов в хелпе.

newCameraPosition (CameraPosition cameraPosition) – созданный объект CameraUpdate будет содержать данные по перемещению камеры в указанную позицию с указанными настройками.

Тут снова появляется объект CameraPosition, все параметры которого мы уже чуть ранее рассмотрели при разговоре о событии смены камеры и который содержит всю инфу о положении камеры

Чтобы создать CameraPosition, используем CameraPosition.Builder. Перепишем метод onClickTest:

Создаем CameraPosition, указываем координаты (-27,133), зум (5 уровень), поворот карты (45 градусов), угол наклона (20 градусов). И передаем полученный объект в метод newCameraPosition, получая CameraUpdate, который в свою очередь передаем в метод animateCamera.

Все сохраним, запустим, жмем Test и наблюдаем плавное перемещение к Австралии. В процессе перемещения меняется уровень зума, угол наклона и поворот камеры.

newLatLng (LatLng latLng) — перемещение камеры к указанной точке.

Тут все просто. Перепишем метод onClickTest:

По нажатию на Test камера переместится в указанную точку.

newLatLngBounds (LatLngBounds bounds, int padding) – камера покажет указанную область с учетом отступа

Перепишем метод onClickTest:

Для указания области используется объект LatLngBounds, который создается из двух точек LatLng. Эти две точки будут являться левой нижней (югозападной) и верхней правой (северовосточной) точками созданной области.

Параметр padding это отступ (в пикселах) от краев экрана. Т.е., если указать ненулевой padding, то камера покажет указанную область карты не в весь экран, а с учетом этого отступа.

По нажатию на Test камера покажет Австралию с отступом в 100 пикселов от краев экрана.

newLatLngBounds (LatLngBounds bounds, int width, int height, int padding) – аналогичен предыдущему, но можно указать размеры прямоугольника на экране, в который будет помещена показанная область и отступ будет действовать внутри этой области.

newLatLngZoom (LatLng latLng, float zoom) – переместит камеру в указанную точку с указанным уровнем зума

scrollBy (float xPixel, float yPixel) – перемещение камеры на указанное кол-во пикселов

zoomBy (float amount) – изменение текущего уровня зума на указанное кол-во (если положительное — то приближение, если отрицательное — удаление).

zoomBy (float amount, Point focus) – смена текущего зума на указанное кол-во уровней, и применение итогового уровня к указанной точке на экране

zoomIn/zoomOut – увеличение/уменьшение уровня зума на единицу

zoomTo (float zoom) – установка указанного уровня зума

Объект GoogleMap имеет метод setPadding. Он устанавливает отступы от краев экрана. Это влияет на положение стандартных элементов управления карты, а также камера теперь будет считать центром карты эту новую ограниченную область и позиционироваться там.

На следующем уроке:

— размещаем на карте свои объекты

Присоединяйтесь к нам в Telegram:

— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование

— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме

startandroid.ru