Як змінити колір маркерів Google Maps за допомогою JavaScript

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

За замовчуванням маркер 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.

Доступні деякі інші кольори:

  1. рожевий: pink-dot.png
  2. жовтий: yellow-dot.png
  3. фіолетовий: purple-dot.png

Щоб отримати URL-адресу інших піктограм маркерів, відвідайте цей веб-сайт.

3. Оберніть у функцію додавання маркера

Щоб зробити код чистішим, ми можемо визначити addMarkerфункцію, яка приймає latLngі colorмаркер. Зверніть увагу, що ми зберігаємо маркери, додані в глобальному, markersArrayна випадок, якщо нам потрібно буде виконати якісь операції з маркерами пізніше.

Відкрийте файл HTML у браузері. Це повинно виглядати так:

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

Не соромтеся ознайомитися з іншим підручником Google Maps, який я написав:

Введіть кнопку Google Map Google, щоб додати перетягувані маркери з полілінією