Як налаштувати маркери та іконки в Google Maps

Протягом багатьох років компанія Google постійно вдосконалювала свої інструменти, щоб надавати виняткові послуги на основі місцезнаходження. Серед найважливіших функцій, що забезпечують взаємодію, є маркери — різнокольорові іконки, розкидані повсюди. Вони є основною візуальною підказкою для користувачів, які орієнтуються за допомогою цифрових географічних інтерфейсів.

У цій статті наші експерти з Платформи Google Карт (Google Maps Platform) висвітлять запуск просунутих маркерів, спираючись на інформацію від Алісії Салліван, менеджерки з продукту у GMP. Ця довгоочікувана функція відповідає на один із головних запитів спільноти розробників. Давайте дізнаємося, як світовий лідер у галузі технологій задовольнив ці потреби і як тепер ви можете створювати швидкий, високо кастомізований користувацький досвід, що має значення.

Як змінити пін на мапі Google і створити більше візуальних маркерів

Ви, мабуть, знайомі з класичними червоними значками, які з’являються у вибраних місцях. Можливо, ви навіть шукали, як змінити колір мітки на Картах Google. Завдяки новим розширеним функціям тепер можна змінювати майже кожну візуальну деталь — фон, контур, піктограму (гліф), розмір і, звісно, колір. Ви навіть можете відтворити червоний значок за замовчуванням лише за допомогою коду, без використання файлів зображень.

Уявіть собі: у вас є роздрібний бізнес із кількома магазинами в одному місті. Завдяки притаманним бренду кольорам, ваші маркери стають миттєво впізнаваними для клієнтів. Це простий спосіб створити чіткішу візуалізацію мапи за допомогою спеціальних позначок.

Або, якщо ви керуєте логістичною компанією, ви можете відображати статус доставки зі зміною кольору в реальному часі. Так само туристичні компанії можуть призначати різні іконки та відтінки для різних зручностей навколо готелів, допомагаючи користувачам ефективніше обирати ідеальне місце для відпочинку.

Створюйте динамічні маркери Google Maps за допомогою HTML і CSS

Для створення інтерактивних анімованих маркерів тепер можна використовувати CSS, аби керувати такими параметрами, як розмір, прозорість, положення і колір. Просунуті маркери відображаються як елементи HTML всередині DOM, що робить їх такими ж гнучкими, як і будь-який інший елемент на сторінці.

За допомогою спеціальних HTML і CSS ви можете створювати унікальні маркери з нуля. Ніяких додаткових шарів або зовнішніх зображень не потрібно. Наприклад, платформи нерухомості можуть відображати ціни, квадратні метри та інші дані безпосередньо всередині іконок.

Карти Google: Зміна іконки маркера за допомогою власної графіки

Чи можете ви використовувати власне зображення як ікону? Безумовно, так. Оновлений API тепер підтримує типи файлів SVG і PNG, тому ви можете безпосередньо інтегрувати власні іконки або фотографії в якості маркерів. Це означає, що ви більше не прив’язані до типових візуальних зображень.

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

Як змінити колір збережених місць на Картах Google

Хвилюєтеся, що ці налаштування можуть сповільнити роботу мапи? Не варто. Просунуті маркери відображаються на 66% швидше, ніж стандартні, і працюють більш плавно під час панорамування або масштабування.

Доступність також стала пріоритетом: тепер користувачі можуть взаємодіяти з маркерами, використовуючи навігацію лише за допомогою клавіатури. Якщо маркер можна клацнути або перетягнути, він реагує на введення як з клавіатури, так і з миші. Тож навіть якщо ви зосереджені на тому, як змінити колір збережених місць на GMP, ви не будете жертвувати продуктивністю або зручністю використання.

Функції зміни іконок у Картах Google на мобільних пристроях

Випущений у травні 2023 року Advanced Markers API підтримує як iOS, так і Android. Розробники можуть використовувати нативні елементи рендерингу — перегляди для iOS і перегляди для Android — для плавної роботи на різних платформах.

Використовуючи Jetpack Compose і бібліотеку утиліт Maps SDK, розробники Android можуть застосовувати кластеризацію і навіть користуватися перевагами сумісності з Compose. Із боку JavaScript, бібліотека Advanced Markers Utility Library об’єднує функції різних класів, що полегшує призначення динамічних властивостей, встановлення шрифтів іконок або вибір автоматично згенерованого кольору маркерів Google Maps.

Якщо стисло, то незалежно від того, працюєте ви на мобільному чи десктопному пристрої, розуміння того як змінити іконку та інші елементи стилізації більше не повинно викликати труднощів, оскільки тепер все це узгоджено

Чи варто використовувати легасі-клас маркерів?

Хоча оригінальний клас google.maps.Marker все ще доступний, він офіційно застарів із моменту виходу версії 3.56 Maps JavaScript API. Новим стандартом є google.maps.marker.AdvancedMarkerElement.

Перехід на новий клас дає вам доступ до швидшого рендерингу, простішої кастомізації, кращої доступності та ширших можливостей стилів. Хоча поки що планується підтримувати застарілу версію з виправленнями помилок, оновлення будуть застосовуватися лише до просунутої моделі.

Тож якщо ви все ще використовуєте старий API і вам цікаво, як змінити маркер іконки Google Maps, перехід до розширеного режиму — найкращий спосіб рухатися вперед.

Потрібна підтримка з Картами Google та іншими продуктами Google?

Як глобальний партнер Google Cloud Premier, Cloudfresh є унікальним центром експертизи. Для отримання додаткової інформації про продукти та можливості GMP ви можете звернутися до наших професіоналів, які отримали сертифікацію Technical Fundamentals.

Що ми пропонуємо?

1. Консультації щодо вибору оптимального API та його інтеграції;
2. Послуги з розробки на основі GMP, які дозволяють ефективно впроваджувати API, мінімізуючи використання квот та максимізуючи продуктивність;
3. Технічне навчання ваших команд повному спектру послуг, які можуть запропонувати GM API;
4. Технічну підтримку: вирішення інцидентів на GMP, запити щодо коректного використання сервісів тощо;
5. Гарантовану відповідь в рамках SLA.

Співпрацюючи з Cloudfresh, ви додатково отримуєте наступне:

• Доступ до семирівневої системи знижок, яка можлива тільки у співпраці з офіційним партнером;
• Оплату за інвойсом на юридичну особу в EUR, USD, CKZ, PLN, UAH або будь-якій іншій валюті (включно з крипто);
• Співпрацю вашою рідною мовою.

Як партнер Карт Google, ми надаємо професійну підтримку протягом усього процесу використання сервісів.

Зв’яжіться з нашою командою та скористайтеся можливістю вдосконалити свою ІТ-інфраструктуру та підняти користувацький досвід ваших клієнтів на новий рівень за допомогою сервісів Карт Google.

Кілька швидких порад

Наші експерти отримують різноманітні запитання щодо налаштування GM. Аби допомогти вам отримати максимальну віддачу від роботи з мапами, ми надали детальні відповіді на найпоширеніші запитання нижче.

Як змінити мітку на Картах Google?

Використовуйте API просунутого маркера, щоб змінити фон, гліф або використати власне зображення. Ви також можете динамічно керувати ним за допомогою JavaScript або CSS.

Як змінити колір мітки на Картах Google?

Налаштуйте колір мітки за допомогою атрибута style у вашій конфігурації. Це особливо корисно для візуальних відмінностей на основі категорій або статусів.

Як змінити іконку маркера на Картах Google?

Завантажте файл SVG або PNG і додайте посилання на нього в об’єкті маркера за допомогою властивості icon.

Як змінити маркер Google Maps?

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

Як змінити колір збережених місць на Картах Google?

Хоча стандартний застосунок GM не підтримує пряму зміну кольору для збережених місць, ви можете групувати та впорядковувати їх візуально за допомогою Моїх Карт, застосовуючи різні кольори або мітки.

Чи можна використовувати легасі-клас?

Можна, але він застарілий. Вам слід перейти на AdvancedMarkerElement, аби отримати доступ до всіх останніх покращень продуктивності та оптимізації. Це покриває все: від основ (скажімо, як змінити маркер на Картах Google) до розширених оновлень у реальному часі.