Виджет Google Maps

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

Добавление виджета

1. Найдите виджет Google Map в палитре, вкладка Base Elements, и перетащите на страницу.

2. По умолчанию карта показывает произвольное место. Чтобы задать своё, откройте Properties Panel > Initial Location.

3. Введите координаты в поля Lat и Lng. Чтобы показывать текущее положение пользователя, подставьте переменную через Set from Variable > Global Properties > Current Device Location.

4. Тип карты выбирается в Properties Panel > Map Type:

   • Roadmap — обычная схема дорог.
   • Terrain — рельеф местности.
   • Hybrid — снимки со схемой поверх.
   • Satellite — снимки Google Earth.

5. Оформление карты настраивается в Properties Panel > Map Style.

6. Начальный масштаб — Properties Panel > Initial Zoom. Больше значение — крупнее план.

Маркеры

Маркер — значок места на карте. Выберите виджет Google Map и в Properties Panel > Num Markers укажите, один маркер будет или несколько.

Маркеры из Firestore

1. Поставьте Marker Type — Document, если данные лежат в коллекции Firestore.
2. Заведите коллекцию и запросите её на любом виджете-родителе карты или на странице.
3. В Marker Document укажите источник маркеров.

Маркеры из списка координат

Если выбран тип LatLng, источником должен быть список значений типа LatLng — например, переменная состояния приложения со списком координат.

Цвет маркера

Цвет меняется в Properties Panel > Google Map > Marker Color.

Своя иконка маркера

Собственная картинка вместо стандартной метки делает карту понятнее и вписывает её в оформление приложения.

1. Откройте Properties Panel > Google Map и поставьте Marker Icon — Image.
2. Выберите источник картинки:
   • Network — картинка по ссылке, адрес указывается в поле Path.
   • Asset — картинка из файлов проекта, её нужно загрузить.

Центрирование по нажатию на маркер

Включается тумблером Centering Map on Marker Tap в Properties Panel > Google Map.

On Marker Tap [Триггер]

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

1. Выберите виджет Google Map.
2. В панели свойств откройте Actions и запустите Action Flow Editor.
3. Добавьте действия под триггером On Marker Tap.

Тонкая настройка

Жесты на карте

По умолчанию карту можно двигать и масштабировать. Если это лишнее, выключите Allow Zooming the Map и Show Zoom Buttons.

Настройки лежат в Properties Panel > Google Map > Allows Interacting with the Map.

Приоритет жестов

С включённой опцией Map Takes Gesture Preference жесты — масштабирование, перетаскивание — достаются карте, а не странице. Это важно, когда карта стоит на прокручиваемой странице: без этой опции попытка подвинуть карту прокручивает всю страницу.

Опция выключена

Опция включена

Положение пользователя

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

Включается тумблером Show User Location в Properties Panel > Google Map.

Компас

Повернув карту, легко потерять направление. Компас возвращает её в исходную ориентацию.

Включается тумблером Show Compass в Properties Panel > Google Map.

Панель инструментов

Панель появляется справа внизу, когда пользователь выбрал маркер, и даёт быстрый переход к карте или маршруту в мобильном приложении Google Maps.

Включается тумблером Show Map Toolbar в Properties Panel > Google Map.

Пробки

Слой пробок показывает загруженность дорог — так пользователю проще выбрать маршрут.

Включается тумблером Show Traffic on Map в Properties Panel > Google Map.

Частые вопросы

Почему свои иконки маркеров не работают в Run и Test mode?

После одного из обновлений собственные маркеры Google Maps показываются только при включённом CanvasKit — это ожидаемое поведение. Включить его можно в дополнительных параметрах веба.