كيفية تغيير لون محددات خرائط Google باستخدام JavaScript

اجعلها وردية أو زرقاء أو خضراء أو صفراء أو أرجوانية!

بشكل افتراضي ، يكون محدد خرائط Google باللون الأحمر. ستوضح هذه المقالة كيفية إضافة علامات ألوان مختلفة إلى خرائط Google. اذا هيا بنا نبدأ. ؟

1. تحميل خرائط جوجل

قم بإنشاء ملف HTML الذي يقوم بتحميل خرائط Google باتباع المستندات الرسمية لـ Google Maps API: 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 كتبته:

قم بتنفيذ انقر فوق JavaScript Google Map لإضافة علامات قابلة للسحب مع متعدد الخطوط