Как да промените цвета на маркерите на Google Maps с JavaScript

Направете ги розови, сини, зелени, жълти или лилави!

По подразбиране маркерът на Google Maps е червен на цвят. Тази статия ще покаже как да добавите различни цветни маркери към Google Maps. И така, нека да започнем. ?

1. Заредете Google Maps

Създайте HTML файл, който зарежда Google Maps, като следвате официалните документи на API на Google Maps: Hello World.

Вашият код ще изглежда нещо като кодовия фрагмент по-долу.

Забележка: Не забравяйте да преминете YOUR_API_KEYкъм вашия действителен ключ за API на Google Maps.

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, който съм написал:

Внедрете кликване върху JavaScript Google Map, за да добавите влачими маркери с полилиния