В этом обзоре вы познакомитесь с плагином «Map maker», который позволяет генерировать карты в фигме от Google карт и сервиса Mapbox.
Чтобы установить плагин для создания карт в Figma (Map maker), перейдите по ссылке. Затем нажмите на кнопку «Install» в левом верхнем углу.
Как вставить карту в фигме от Google Maps
Чтобы вставить карту в фигме, создайте фигуру стандартными инструментами Figma. Например прямоугольник или круг. Выделите фигуру.
Делаем интерактивную карту с помощью Google Maps
Активируйте установленный плагин для создания карт. Для этого нажмите вверху и слева на меню, перейдите в раздел «Plagins», затем выберите «Map maker».
В окне плагина в строке «Adress» введите адрес, который хотите показать на карте и нажмите на кнопку «Make map» внизу, чтобы вставить карту в выделенные фигуры.
Выбор типа отображения карты
Внизу надписи «Map type», можно выбрать тип карты, которую хотите использовать в вашем макете. Всего 4 варианта.
- Roadmap — дорожная карта.
- Satellite — карта в виде фото со спутника.
- Hybrid — гибридная карта.
- Terrain — карта местности.
При выборе из выпадающего списка надписи «Roadmap», появиться нарисованная дорожная карта.
Если выбрать Satellite, то отображение будет в виде фото со спутника.
При выборе «Hybrid» будет гибридная карта. Это карта со спутника, где расположены различные отметки.
Terrain — карта местности аналогична «Roadmap» и особых отличий я не заметил.
Как изменить масштаб отображаемой карты в Figma
Чтобы изменить масштаб отображаемой карты в Figma, измените цифру под надписью «Zoom level».
Как создавать собственные карты в Google Maps с нанесением меток и маршрутов
Если поставите цифру «1», то будем видно всю планету.
Если поставите значение «18», то будет видны улицы и дома.
Как поставить метку на карте в Figma
Чтобы поставить метку на карте для нужного адреса в Figma, поставьте напротив надписи «Show marker» галочку. В этом случае появиться красная метка.
Как сделать карту в фигме от сервиса «Mapbox»
Чтобы сделать карту в фигме от сервиса «Mapbox» переключитесь в плагине на нужную вкладку. В этом разделе есть небольшие отличия от гугл карт.
Внизу надписи «Style» можно выбрать стиль карты. Стандартным образом отображается карта «Mapbox streets».
Если выбрать «Mapbox Light», то появится карта в минималистичном стили и сером цвете.
Чтобы карта была в черном цвете выберите пункт «Mapbox Dark». В таком варианте карта выглядит очень стильно.
Если выбрать пункт «Mapbox Outdors», то будет отображаться светлая карта.
Пункт «Mapbox Satelite» показывает карту в виде фотографии со спутника. В этом варианте не отображаются названия улиц.
Чтобы на карте со спутником отображались улицы выберите пункт «Mapbox Satelite Streets».
При изменении цифры под надписью «Bearing», будет изменен поворот карты. Если изменить значение под надписью «Pitch», то будет изменён накло карты.
Заключение
Итак, вы этом видео вы узнали как создавать карты в фигме с помощью плагина «Map maker». Разобрались как вставлять карты от Google Maps и от сервиса «Mapbox».
P.S. Если вы делаете дизайн в Figma, то обязательно получите бонусные материалы по быстрому созданию дизайна Landing Page в Figma, то по этой ссылке.
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).
Источник: web-design.center
Maps JavaScript API
Создавайте динамические, интерактивные, персонализированные карты и геопространственные объекты для своих веб-приложений.
Начало работы
Начните создавать свои карты с помощью наиболее популярных функций Maps JavaScript API.
Начало работы с платформой Google Карт
Ознакомьтесь с кратким руководством платформы Google Карт. Зарегистрируйтесь, сгенерируйте ключ API и приступайте к работе.
Ваша первая карта с маркером
Узнайте, как загрузить Maps JavaScript API и добавить в веб-приложение карту с маркером.
Настройка стиля карты
Задайте все необходимые параметры карты, включая дороги, географические объекты и объекты инфраструктуры.
Информационные окна для маркеров
Показывайте дополнительные сведения, когда пользователь нажимает на маркер.
Возможности
Ознакомьтесь с основными функциями в документации по Maps JavaScript API.
Типы карт
Показывайте карты дорог, рельефа, спутниковые снимки, гибридные и собственный типы карт.
Локализация
Обеспечьте автоматический перевод текста карты на более чем 40 языков.
Маркеры
Используйте маркер Google Карт по умолчанию или добавляйте собственные маркеры.
Элементы управления
Настройте отображение элементов интерфейса на карте.
События
Пишите код, который будет отвечать на действия пользователей и события жизненного цикла.
Наложение WebGL
Создавайте двух- и трехмерный интерфейс на основе векторной карты с помощью WebGL.
Информационные окна
Добавляйте контекст и дополнительную информацию о маркерах в интерактивных информационных окнах.
Фигуры
С помощью встроенных функций на карте можно рисовать различные фигуры, в том числе ломаные линии и многоугольники.
Собственные наложения
Создавайте собственные наложения для визуализации на карте статистики, фотографий и других данных.
Наземные наложения
Накладывайте собственные изображения, которые будут адаптироваться при изменении масштаба карты.
Слой данных
Визуализируйте на карте GeoJSON и другие типы данных в разных форматах.
Собственные стили
Задавайте собственные параметры отображения практически любых компонентов карты.
Наклон и ориентация
Задавайте ориентацию и наклон базовой векторной карты в трех измерениях программным способом.
Кластеризация маркеров
Объединяйте маркеры, чтобы сделать работу с картой удобнее.
Тепловые карты
Визуализируйте числовые показатели на карте.
Библиотеки
Вызывайте дополнительные библиотеки в загрузочной строке Maps JS API, чтобы добавить в карту другие функции.
Обзор библиотек
Узнайте, как вызывать доступные библиотеки в загрузочной строке Maps JS API.
Библиотека Drawing
Предоставляйте пользователям возможность рисовать на карте.
Библиотека Geometry
Рассчитывайте геометрические данные на поверхности Земли с помощью этой служебной функции.
Библиотека Places
Ищите места рядом, включайте для них поисковые подсказки, получайте фотографии и информацию о выбранных местах.
Библиотека локального контекста (бета)
Создавайте интерактивные карты с возможностью просмотра фотографий выбранного места.
Библиотека Visualization
Визуализируйте числовые показатели с помощью тепловых карт.
Службы
Используйте эти встроенные службы для создания полезных карт в своих веб-приложениях.
Служба Directions
Выстраивайте маршруты, включающие до 25 путевых точек.
Служба Distance Matrix
Получайте информацию о расстоянии и времени поездки для матрицы пунктов отправления и назначения.
Служба Elevation
Получайте данные о рельефе на поверхности Земли и дне Мирового океана.
Служба Geocoding
Преобразуйте адреса и ID мест в координаты, и наоборот.
Служба Maximum Zoom Imagery
Запрашивайте фотографии панорам для определенного места с максимальным разрешением.
Служба Street View
Добавляйте круговые панорамы Просмотра улиц в свои веб-приложения и загружайте собственные.
Примеры приложений
Запускайте рабочие примеры кода на локальной машине в удобной вам тестовой среде.
Поиск мест
Используйте библиотеку Places для поиска мест поблизости.
Ночной режим
Показывайте в приложении карту с затемнением светлых областей.
location_on
Настройка значков маркера
Заменяйте значки маркера на карте другими изображениями.
Собственные наложения
Создавайте наложения на карту, которые будут адаптироваться к изменению масштаба.
Слой загруженности дорог
Показывайте данные о загруженности дорог в реальном времени в наложенном слое.
Наклон и ориентация карты
Задавайте ориентацию и угол наклона векторной карты в трех измерениях программным способом.
Справка и поддержка
Обращайтесь за помощью, помогайте другим, присоединяйтесь к сообществу.
Stack Overflow
Обращайтесь за помощью, помогайте другим, создавайте репутацию Карт.
Система отслеживания ошибок
Оставьте сообщение об ошибке или запрос на добавление функции.
Статус платформы
Информация об инцидентах и сбоях платформы.
Поддержка
Помощь от команды платформы Google Карт.
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2023-04-05 UTC.
Источник: developers.google.cn
Возможности
Легкая установка карты на: 1C Битрикс, Тильда, WordPress, Wix, Joomla, MODx, Open Cart и др.
Подложкой могут быть Яндекс Карты или собственные изображения
Любые геометрические формы для выделения объекта на карте
Различный контент (картинки, видео, кнопки) для обозначения и описания объекта
Адаптивно, быстро и подходит для установки в мобильные приложения
Коллективное создание и изменение карт с большим количеством объектов
Быстрое создание карты, генплана, схемы.Мгновенное обновление.
Существенно дешевле разработки и дизайна с нуля. Бесплатная техническая поддержка.
В разработке
Создание множества этажей и переключение, легенда карты
Возможность интеграции с CRM, импорт и экспорт объектов
Примеры
Примеры
Тарифы
Бесплатный
- Срок: 1 месяц
- Объем памяти: 5 Мб
- Метки: 5
- Полигоны: 5
- Линии: 5
- Поддержка: Полная
Стандарт
- Срок: 1 месяц
- Объем памяти: 10 Мб
- Метки: 30
- Полигоны: 100
- Линии: 10
- Поддержка: Полная
Расширенный
- Срок: 1 месяц
- Объем памяти: 100 Мб
- Метки: 300
- Полигоны: 1000
- Линии: 100
- Поддержка: Полная
Специальный
- Срок: по запросу
- Объем памяти: по запросу
- Метки: по запросу
- Полигоны: по запросу
- Линии: по запросу
- Поддержка: ограниченная
Цена: индивидуально Регистрация
Тарифы
Бесплатный
- Срок: 1 месяц
- Объем памяти: 5 Мб
- Метки: 5
- Полигоны: 5
- Линии: 5
- Поддержка: Полная
Стандарт
- Срок: 1 месяц
- Объем памяти: 10 Мб
- Метки: 30
- Полигоны: 100
- Линии: 10
- Поддержка: Полная
Расширенный
- Срок: 1 месяц
- Объем памяти: 100 Мб
- Метки: 300
- Полигоны: 1000
- Линии: 100
- Поддержка: Полная
Специальный
- Срок: по запросу
- Объем памяти: по запросу
- Метки: по запросу
- Полигоны: по запросу
- Линии: по запросу
- Поддержка: ограниченная
Цена: индивидуально Регистрация
Попробуйте бесплатно!
Создать интерактивную карту за 5 минут.
Пробный период действует в рамках тарифа «Стандарт» в течении 10 дней!
Как создать интерактивную карту
«Planograph» прост и удобен в использовании. Для ознакомления с интерфейсом и работой сервиса ознакомьтесь с видео-инструкцией или прочитайте руководство.
Отзывы
Анастасия
«Савельево», поселок на озере, Менеджер по развитию
Решение продумано, работает стабильно. Даже предусмотрели ограничения по объемам информации. Порадовал функционал. Но больше всего порадовала техподдержка — работают оперативно и очень качественно. Огромное спасибо!
Евгений
ТЦ «Челси», разработчик
Очень удобный в целом сервис (и инструмент в частности). Создать небольшую карту торгового комплекса дело нескольких минут. Даже базового функционала вполне достаточно. Есть много возможностей для работы с описанием каждого объекта (площади). Пока из-за отсутствия этажности, приходится создавать несколько карт под каждый этаж и выводить их отдельно.
На своей стороне уже, конечно, можно сделать переключение этажей (карт). Но хотелось бы решить это на стороне сервиса.
Отзывы
Анастасия
«Савельево», поселок на озере, Менеджер по развитию
Решение продумано, работает стабильно. Даже предусмотрели ограничения по объемам информации. Порадовал функционал. Но больше всего порадовала техподдержка — работают оперативно и очень качественно. Огромное спасибо!
Евгений
ТЦ «Челси», разработчик
Очень удобный в целом сервис (и инструмент в частности). Создать небольшую карту торгового комплекса дело нескольких минут. Даже базового функционала вполне достаточно. Есть много возможностей для работы с описанием каждого объекта (площади). Пока из-за отсутствия этажности, приходится создавать несколько карт под каждый этаж и выводить их отдельно.
На своей стороне уже, конечно, можно сделать переключение этажей (карт). Но хотелось бы решить это на стороне сервиса.
Источник: planograph.net