Зробіть їх рожевими, синіми, зеленими, жовтими або фіолетовими!

За замовчуванням маркер Google Maps має червоний колір. У цій статті буде показано, як додати різні кольорові маркери на Карти Google. Отже, давайте почнемо. ?
1. Завантажте Google Maps
Створіть файл HTML, який завантажує Карти Google, дотримуючись офіційних документів API Карт Google: Hello World.
Ваш код буде виглядати приблизно як фрагмент коду нижче.
Примітка. Не забудьте змінити YOUR_API_KEY
фактичний ключ API Карт Google.
2. Додайте різні кольорові маркери
Щоб додати синій кольоровий маркер, нам потрібно змінити піктограму маркера. Це робиться шляхом додавання властивості піктограми та вказівки URL-адреси для неї, як показано нижче.
icon: { url: "//maps.google.com/mapfiles/ms/icons/blue-dot.png" }
Зверніть увагу, що ми вказуємо blue-dot.png
в кінці URL-адреси, щоб отримати синій маркер. Щоб додати зелений маркер, просто змініть його на, green-dot.png
щоб URL-адреса була //maps.google.com/mapfiles/ms/icons/green-dot.png
.
Доступні деякі інші кольори:
- рожевий:
pink-dot.png
- жовтий:
yellow-dot.png
- фіолетовий:
purple-dot.png
Щоб отримати URL-адресу інших піктограм маркерів, відвідайте цей веб-сайт.
3. Оберніть у функцію додавання маркера
Щоб зробити код чистішим, ми можемо визначити addMarker
функцію, яка приймає latLng
і color
маркер. Зверніть увагу, що ми зберігаємо маркери, додані в глобальному, markersArray
на випадок, якщо нам потрібно буде виконати якісь операції з маркерами пізніше.
Відкрийте файл HTML у браузері. Це повинно виглядати так:

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