Как встроить Яндекс карты в программу

Вы можете создать и вставить карту Яндекс со схемой проезда на свой сайт.

Видео: как добавить Яндекс.Карту на сайт

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

Как создать Яндекс.Карту для сайта

Для добавления Яндекс.Карты на сайт, перейдите в конструктор карт Яндекс для сайта по ссылке: https://tech.yandex.ru/maps/tools/constructor/. Авторизуйтесь, используя свой логин и пароль для создания и хранения карт на своем аккаунте, чтобы в дальнейшем вы могли бы изменить карту на сайте при необходимости.

Далее выполните следующие шаги:

Создание новой Яндекс.Карты

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

№1. Создание Яндекс.карты на сайт. Базовое подключение

Поиск адреса на карте

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

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

• измените масштаб
• добавьте в описание название компании и контактную информацию*
• измените цвет и тип маркера при необходимости

После внесения изменений, нажмите кнопку «Готово»

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

Сохранение созданной карты

После того, как вы внесли информацию в описание, скорректируйте местоположение маркера на экране, путем захвата мышкой (кликнуть и удерживать) и перемещения по экрану. Разместите маркер по центру области, далее укажите название и описание карты, нажмите «Сохранить и продолжить».

Следующий шаг — финальная настройка виджета Яндекс.Карты для сайта и режима ее отображения на странице перед вставкой карты на сайт.

Перед тем, как встроить Яндекс.Карту на сайт, вам необходимо указать размер интерактивной карты, которая будет выводиться в разделе с контактной информацией. Для того, чтобы аккуратно интегрировать карту на сайт, рекомендуем установить галочку «Растянуть по ширине», а высоту при этом указать в пределах 300-400px.

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

Далее, нажмите кнопку «Получить код карты»

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

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

Чтобы вставить Яндекс.Карту на сайт в код HTML (и таким образом подключить Яндекс.Карты на сайт), перейдите в редактирование содержимого раздела, где вы хотите разместить интерактивную карту. Откройте HTML код страницы, кликнув по соответствующей иконке на панели инструментов.

В открывшемся окне, необходимо вставить код Яндекс.Карты со схемой проезда (как правило, добавляется в конце документа).

Вставьте код в конец содержимого (место размещения указано для примера — вы можете выбрать любое подходящее место в структуре страницы). Нажмите кнопку «Обновить».

PS: Вы можете не увидеть саму карту в редакторе сайта, но на сайте она должна отобразиться — проверьте.

Сохраните раздел после редактирования.

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

Источник: uralcms.ru

Подробная инструкция по добавлению Яндекс.Карты на свой сайт

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

Сервисов, бесплатно предоставляющих карты, множество, но я бы хотел остановиться сегодня на Яндекс.Картах. Не буду рассматривать вариант создания карт через простой конструктор, а поскольку мы с вами в какой то степени вебмастера, расскажу, как внедрить карту от Яндекс.Карт с помощью API.

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

1. Итак, первое, что вам необходимо сделать – это перед закрывающим тегом вашего сайта подключить сам API Яндекс.Карт:

Обратите внимание, что API_KEY в ссылке нужно заменить на свой, иначе карта будет серая (новые правила Яндекса). Получить его можете здесь. На момент написания статьи — получение бесплатное.

2. В нужное место на вашем сайте вставьте код, где будет отображаться карта:

3. В файл стилей (в самый конец) вставьте:
.ya_map { font-family: arial; font-size: 12px; color: #454545; > #map { width: 660px; height: 300px; >

.ya_map – это стиль текста, который будет отображаться у подписи на карте, а
#map – размер карты.

4. И под конец одним из самых важных шагов будет добавление перед закрывающим тегом скрипта с настройками:

ymaps.ready(init); var myMap; function init() { myMap = new ymaps.Map(«map», { center: [43.238253, 76.945465], // Координаты центра карты zoom: 13 // Маштаб карты >); myMap.controls.add( new ymaps.control.ZoomControl() // Добавление элемента управления картой ); myPlacemark = new ymaps.Placemark([43.238253,76.945465], { // Координаты метки объекта balloonContent: «» // Подсказка метки >, { preset: «twirl#redDotIcon» // Тип метки >); myMap.geoObjects.add(myPlacemark); // Добавление метки myPlacemark.balloon.open(); // Открытие подсказки метки >;

С ним-то мы и будем сейчас работать.

Настройка Яндекс.Карты

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

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

Для настройки скрипта нам нужны координаты метки + масштаб. Копируете и вставляете их в соответствующее место в скрипте.

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

2. Далее приступим к настройке вида метки. Здесь есть несколько вариантов решений.

Либо вы заменяете надпись в скрипте и оставляете все как есть – в таком случае стиль у вас будет как на первом изображении.

Либо вы можете вовсе убрать надпись и оставить стандартную метку. Список всех доступных меток вы можете найти в официальной документации Яндекс.Карт.

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

myPlacemark = new ymaps.Placemark([43.238253,76.945465], { // Координаты метки объекта balloonContent: «» // Подсказка метки >, { preset: «twirl#redDotIcon» // Тип метки >); myMap.geoObjects.add(myPlacemark); myPlacemark.balloon.open();
myPlacemark = new ymaps.Placemark([43.238253, 76.945465], {>, { // Координаты метки объекта preset: «twirl#skatingIcon» // Тип метки >); myMap.geoObjects.add(myPlacemark);

Здесь twirl#skatingIcon – название стиля метки.

Либо вы можете вставить свой логотип или нужную картинку.

myPlacemark = new ymaps.Placemark([43.238253, 76.945465], { // Координаты метки объекта balloonContent: «» // Подсказка метки >, { preset: «twirl#redDotIcon» // Тип метки >); myMap.geoObjects.add(myPlacemark); myPlacemark.balloon.open();
myPlacemark = new ymaps.Placemark([43.238253, 76.945465], { // Координаты метки объекта balloonContent: »

» // Подсказка метки >, { iconLayout: «default#image», iconImageHref: «/images/pandoge_com.png», // Ссылка на изображение iconImageSize: [122, 59], // Размер изображения iconImageOffset: [-3, -42] // Положение изображения >); myMap.geoObjects.add(myPlacemark); myPlacemark.balloon.open();

3. Размеры карты. Как говорилось ранее, за размер карты отвечает стиль:

#map { width: 660px; height: 300px; >

Здесь вы задаете нужный вам размер в пикселях, либо, если хотите сделать карту на всю ширину/высоту, указываете проценты.

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

Источник: www.pandoge.com

Как интегрировать Яндекс Карты в приложение на Flutter

Hey! Меня зовут Дмитрий Лёвочкин, я Flutter разработчик в Friflex и автор блога Дневник Flutter разработчика. Мы в Friflex занимаемся разработкой мобильных приложений, и одна из наших ключевых отраслей – ритейл. Сложно представить мобильное приложение крупного ритейлера без карты внутри. В этой статье я расскажу, какие преимущества есть у Яндекс Карт и как быстро интегрировать их в ваше приложение.

Статья состоит из двух частей:

1. Теоретическая. Плюсы и минусы использования Яндекс Карт.
2. Практическая. Напишем приложение, в котором отобразим текущее местоположение пользователя. В случае ошибки будем выводить Москву как город по умолчанию.

Если вы занимаетесь написанием приложений на Flutter, то, скорее всего, знаете, что для интеграции карт в ваше приложение есть несколько основных пакетов:

• Google Maps (google_maps_flutter)

• Yandex Maps (yandex_mapkit)

В контексте ситуации, сложившейся в нашей стране, у Яндекс карт есть ряд преимуществ:

1. Если вы планируете публиковать приложение в AppGallery, вам не нужно писать разделение для GMS (Google Mobile Services) и HMS (Huawei Mobile Services) сервисов. Яндекс Карты без проблем работают с Huawei. Если вы будете использовать Google Карты, вам потребуется разделить сервисы, так как ваше приложение не может одновременно поддерживать HMS и GMS сервисы (согласно политике Google Play).
2. В случае возникновения проблем с работой сервисов Google в РФ, ваше приложение будет стабильно работать с картами Яндекса.
3. По регионам России информация точнее, чем у Google Карт.
4. Более знакомый интерфейс для русскоязычного пользователя.
5. Не возникнет проблем с оплатой сервиса, если вы решите перейти на платный тариф.

Вы можете разделить сервисы, использовать Google Карты для публикации приложения в App Store и Google Play, а Яндекс Карты для публикации в AppGallery. Но это добавит проблем при сборке. Нужно будет каждый раз менять карты.

Минусы при работе с Яндекс Картами:

1. Значительно увеличивает размер APK. Для нативной разработки есть две версии пакета – full и lite. Lite решает эту проблему, но во Flutter она не работает. Issue здесь: https://github.com/Unact/yandex_mapkit/issues/194
2. Всегда работает только с одним языком. Из-за нативных ограничений после запуска приложения язык нельзя изменить.
3. Документация не адаптирована под Flutter и сейчас она только для нативной разработки: https://yandex.com/dev/maps/mapkit/doc/intro/concepts/about.html

К счастью, во Flutter библиотеке хорошо описан процесс подключения, а на github можно найти множество примеров использования.
В Telegram есть чат разработчиков по yandex_mapkit, там можно получить ответы на вопросы.

С теоретической частью закончили, теперь давайте перейдем к практике.

Интеграция Яндекс Карт во Flutter

Задача – интегрировать Яндекс Карты, отобразить текущее местоположение пользователя.
Для подключения карт нам потребуется пакет yandex_mapkit
Для определения местоположения будем использовать geolocator (имеет Flutter Favorite).
Вы можете использовать любой другой сервис, но нужно иметь в виду, что geolocator использует сервисы Google на Android, и качество геолокации может быть значительно ниже для Huawei. Чтобы избежать такой проблемы, для HMS лучше отдельно использовать их плагин huawei_location
Добавляем оба плагина в pubspec.yaml файл нашего Flutter Android проекта:

yandex_mapkit: ^3.2.0 geolocator: ^9.0.2

Местоположение определяется по текущей широте и долготе.
У геолокатора и у Яндекс Карт есть свой класс для широты и долготы. Но у одного одни модели, а у другого – другие. Нам нужна своя модель без завязки на реализации сторонних сервисов.
Для этого создадим класс AppLatLong со значениями типа double. Также создадим класс MoscowLocation с координатами Москвы (будем выводить Москву, если не получится определить текущее местоположение):

class AppLatLong < final double lat; final double long; const AppLatLong(< required this.lat, required this.long, >); > class MoscowLocation extends AppLatLong < const MoscowLocation(< super.lat = 55.7522200, super.long = 37.6155600, >); >

Создаем новый файл app_location.dart, в котором создаем абстрактный класс AppLocation с тремя методами:

abstract class AppLocation < FuturegetCurrentLocation(); Future requestPermission(); Future checkPermission(); >

Далее создаем сервис LocationService, в котором реализовываем интерфейс AppLocation. Этот сервис будет отвечать за получение текущего местоположения пользователя. Создадим переменную defLocation с дефолтными координатами.
Расписываем его методы:

class LocationService implements AppLocation

У geolocator есть свои методы, которые мы здесь используем:

• getCurrentPosition() – для определения текущей геопозиции (широта и долгота);
• requestPermission() – для запроса на разрешение использования сервиса местоположения;
• checkPermission() проверяет, разрешил ли пользователь доступ к геопозиции устройства.

В методе getCurrentLocation() в случае успешного определения местоположения, мы вернем текущие широту и долготу. В случае ошибки вернем широту и долготу Москвы. Координаты нужны, чтобы дальше можно было отобразить их на карте.

В методе requestPermission() мы делаем повторный запрос на доступ к сервису геопозиции. Если пользователь разрешил доступ к геопозиции, вернем true. В случае ошибки вернем false.

Метод checkPermission() практически копирует предыдущий метод и возвращает булевое значение в зависимости от того, предоставил ли пользователь доступ к определению геопозиции.

Сервис для определения геопозиции готов! Создаем новый файл map_screen.dart и StatefulWidget в нем – MapScreen:

Подключаем пакет yandex_mapkit:
Вначале нам нужно получить MapKit mobile SDK key. Для этого идем https://developer.tech.yandex.com/ , выбираем MapKit mobile SDK key и заполняем простую форму (бесплатный тариф). После успешного заполнения копируем наш ключ:

Для подключения Android:
Идем в android > app > build.gradle и добавляем:

implementation ‘com.yandex.android:maps.mobile:4.2.2-full’

Идем в android > app > src > main > AndroidManifest.xml и добавляем два разрешения:

Идем в файл android > app > src > main > kotlin или java у вас > MainActivity.kt и добавляем код (берем в readme https://pub.dev/packages/yandex_mapkit) в зависимости от того java у вас или kotlin. Добавляем наш ключ, который получили выше, в 11 строку. Не пугаемся подчеркиваний и ошибок, просто закрываем файл:

Не забудьте добавить первую строку с названием.

Для подключения iOS:
Идем в iOS> Runner > AppDelegate.swift и добавляем вначале импорт:

import YandexMapsMobile
YMKMapKit.setApiKey(«YOUR_API_KEY»)

Не забудьте добавить ваш ApiKey, который получили ранее.

В iOS > podfile добавляем

platform :ios, ‘12.0’:

platform :ios, ‘12.0’: В iOS > Runner > Info.plist обязательно нужно добавить:

NSLocationWhenInUseUsageDescription Доступ к геолокации пользователя необходим для отображения текущей геопозиции

Это требование Apple, им нужно описание. Необходимо добавить в описание, для чего запрашиваем геопозицию. Иначе можно не пройти проверку в App Store.

yandex_mapkit для Android и iOS подключили.
Создаем новый файл map_screen.dart и StatefulWidget в нем – MapScreen:

Добавляем контроллер через Completer, который будем заполнять дальше, в onMapCreated
Используем методы из LocationService:

Future _initPermission() async < if (!await LocationService().checkPermission()) < await LocationService().requestPermission(); >await _fetchCurrentLocation(); > Future _fetchCurrentLocation() async < AppLatLong location; const defLocation = MoscowLocation(); try < location = await LocationService().getCurrentLocation(); >catch (_) < location = defLocation; >_moveToCurrentLocation(location); >

Метод _initPermission() проверяет, предоставил ли пользователь разрешения на определение геопозиции. Если не предоставил, то делаем запрос на разрешение доступа к геопозиции. После этого вызываем метод _fetchCurrentLocation() для установки координат.
Метод _fetchCurrentLocation() получает необходимые координаты для метода _moveToCurrentPosition(). В случае ошибки, или если он не сможет определить текущее местоположение, вернет координаты Москвы.

Напишем метод _moveToCurrentPosition(). Это основной метод, который и будет показывать местоположение пользователя на карте:

Future _moveToCurrentLocation( AppLatLong appLatLong, ) async

Метод принимает координаты высоты и широты, которые мы получили выше.
Ждем получения mapControllerCompleter и далее, используя методы .moveCamera() и .newCameraPosition(), по полученным координатам анимированно переносим фокус на текущее местоположение.
Параметр zoom: 12 задает отдаление ближе/дальше, так можно отобразить более точные координаты местоположения.

Осталось только добавить метод _initPermission().ignore() для запроса разрешений и установления координат в initState() MapScreen, и реализация готова.
.ignore() нужен здесь для безопасной обработки и игнорирования Future метода _initPermission()

Отлично, задача выполнена! Мы получили текущее местоположение пользователя:)
Мы интегрировали Яндекс Карты в приложение и научились определять текущее местоположение пользователя. В следующей части статьи добавим маркер для более точных координат текущего местоположения и покажем необходимые объекты рядом, например, магазины.

Если у вас остались вопросы по интеграции Яндекс Карт во Flutter, оставляйте их в комментариях!
Код проекта доступен по ссылке.

• flutter
• yandex карты
• google карты
• flutter mobile development

• Блог компании Friflex
• Flutter

Источник: habr.com