Przemyśl na nowo swoją mapę doświadczeń dzięki ulepszonym znacznikom Google Maps

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

У цьому блозі ми хотіли б розповісти вам більше про запуск розширених маркерів Google Maps на основі інсайтів Алісії Салліван, менеджера з продуктів Google Maps Platform.

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

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

Наприклад, якщо ви займаєтеся роздрібною торгівлею і ваші розташування в місті представлені на картах, ви можете налаштувати свої маркери за допомогою логотипу або знака свого бренду. Уявіть, як легко ви можете покращити клієнтський досвід, створивши Google maps з кастомними пінами.

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

То ж як змінити Google Maps marker іконку, або ж чи можливо, використати власноруч обране зображення? Так. Тепер Google Maps забезпечує пряму підтримку SVG і PNG для створення маркерів користувача. Ви можете налаштувати маркери карти за допомогою свого зображення, наприклад, піктограми або фотографії, тобто більше немає потреби використовувати стандартні Google Maps картинки маркерів.

Щоб створити візуально відмінні інтерактивні маркери та анімацію, ви можете використовувати CSS та динамічно стилізувати та анімувати розширені маркери, включаючи зміну розміру, непрозорості, положення, кольору тощо.

Ви можете використовувати власні HTML і CSS для створення динамічних маркерів, щоб зробити ваші карти більш інтерактивними та анімованими. Оскільки всі екземпляри Advanced Marker додаються до DOM (об’єктної моделі документа) як елементи HTML, з ними можна працювати як з будь-яким іншим елементом DOM. Таким чином, ви можете застосовувати стилі CSS до маркеру за замовчуванням та створити власний Google map кастомний маркер з нуля за допомогою HTML та CSS. Завдяки цим можливостям захоплюючу картографію легко створити, і вона не включає в себе складні накладення, що настроюються. Наприклад, якщо ви ріелторська компанія, ви можете візуалізувати ціни на нерухомість на своїх маркерах та деяку додаткову інформацію, таку як адресу, площу та інші.

Припустимо, ви вважаєте, що така велика і складна анімація і динаміка можуть погано вплинути на швидкість та доступність ваших карток. Це зовсім не так! Розширені маркери можуть завантажуватись на 66 % швидше, ніж наші традиційні маркери, а масштабуватись та переміщуватись швидше, ніж раніше. Більше того, додати маркери на Google Maps дуже легко.

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

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

Тож, якщо Ви зацікавлені в інтеграції API Google Maps Platform, приміром, таких як Google address validation у свій бізнес, зверніться до команди Google Maps спеціалістів Cloudfresh, які допоможуть втілити в життя найамбітніші ідеї.

Часті питання

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

Існує кілька простих способів додати власні маркери на мапу в Google Maps:

• Відкрийте Google Maps і знайдіть місце. Клацніть на червоний маркер, що з’явиться, аби відкрити інформаційну картку. Виберіть «Додати відсутнє місце» та заповніть деталі, щоб створити нове позначене місце.
• На комп’ютері відкрийте Google Maps і клацніть правою кнопкою миші на будь-якому місці на мапі. Виберіть «Додати маркер» і заповніть інформаційне вікно, щоб додати власний маркер.
• На мобільному пристрої торкніться та утримуйте місце на мапі, щоб розмістити маркер. Торкніться маркера, щоб відкрити картку деталей і додати будь-яку потрібну інформацію.
• Створюйте власні мапи в «Моїх мапах, де ви можете додавати необмежену кількість маркерів різних кольорів і форм.
• Якщо ви шукаєте місце, прокрутіть вниз інформаційну картку та виберіть «Зберегти», щоб додати його як позначений маркер на мапі.

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

• Відкрийте «Мої мапи» в Google і створіть нову мапу. Натисніть «Додати шар», аби додати свої маркери.
• Виберіть власний маркер, натиснувши на кольорову піктограму маркера поруч із рядком пошуку місця.
• Виберіть бажаний колір і символ маркера перед тим, як розмістити його на мапі.
• Ви також можете натиснути на існуючі маркери, щоб змінити колір і піктограму.
• На мобільному пристрої торкніться маркера, а потім із меню з трьома крапками відкрийте параметри кольору для цього маркера.
• «Мої мапи» також дозволяють групувати кілька маркерів у кольорові шари для зручної організації.

Після завершення налаштування обов’язково натисніть «Зберегти», щоб оновити кольорові маркери на мапі.

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

Хоча ви не можете безпосередньо змінювати колір піктограм збережених місць на Google Maps, ви можете використовувати ярлики або створювати власні списки для візуального розрізнення. Ось кілька альтернатив:

Ярлики: Додайте власні ярлики до своїх збережених місць для легшої ідентифікації.

Списки: Організуйте свої збережені місця в різні списки, кожен із яких матиме унікальну назву.

Як позначити місця на Google Maps?

Існує два способи для позначення місця на Google Maps:

• Пошук і збереження: Знайдіть конкретне місце та натисніть «Зберегти», щоб додати його до розділу «Мої місця».
• Довге натискання: Натисніть і утримуйте будь-яке місце на мапі, щоб розмістити маркер і додати ярлик або опис.

Порада: Ви також можете позначити кілька місць на Google Maps одночасно, створивши список і додавши їх окремо або імпортувавши їх із електронної таблиці.

Чи сумісні розширені маркери Google Maps з мобільними пристроями?

Так, розширені маркери Google Maps доступні як на iOS, так і на Android, забезпечуючи узгоджені параметри налаштування на всіх платформах. Випущені в травні 2023 року для Maps JavaScript API, розширені маркери тепер дозволяють розробникам створювати високо кастомізовані, швидкі маркери за допомогою нативних видів (Android) та UIViews (iOS). Ці маркери дозволяють покращити поведінкові фактори, прискорити час завантаження та спростити налаштування знайомого червоного маркера Google Maps безпосередньо в коді.

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

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

Чи ми все ще можемо використовувати легасі-клас google.maps.Marker?

Розширені маркери Google Maps (google.maps.marker.AdvancedMarkerElement) пропонують значні покращення порівняно з традиційним google.maps.Marker. Вони простіші у використанні, більш продуктивні, доступні, багаті на функції тощо. Із випуском версії 3.56 Maps JavaScript API клас google.maps.Marker офіційно застарів, хоча станом на грудень 2024 року його все ще не було повністю припинено.

Аби скористатися новими можливостями, розробникам слід перейти на google.maps.marker.AdvancedMarkerElement, який доступний з версії 3.53.2 Maps JavaScript API. Хоча google.maps.Marker продовжуватиме отримувати виправлення помилок для основних регресій, жодні оновлення не усуватимуть його існуючі помилки. Google запевняє розробників, що про припинення підтримки google.maps.Marker буде повідомлено щонайменше за 12 місяців. Тим не менш, розробникам рекомендується використовувати розширені маркери в майбутньому.

Потрібна консультація щодо Google Maps?

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

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

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

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

• Доступ до семирівневої системи знижок можливий лише за умови співпраці з партнером Google Maps;
• Оплата за рахунком юридичній особі в євро, доларах США, чеських кронах, злотих, гривнях або будь-якій іншій валюті (включно з криптою);
• Співпраця вашою рідною мовою завдяки мультимовності нашої команди;
• Професійна підтримка упродовж усього процесу використання послуг.

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