گوگل ماپ اضافی

ماپ گوگل - پوشش‌ها

پوشش‌ها اشیایی هستند که به مختصات عرض و طول جغرافیایی متصل می‌شوند و روی نقشه قرار می‌گیرند.

ماپ گوگل دارای انواع مختلف پوشش‌ها است:

• نشانه (Marker) - یک مکان منفرد بر روی نقشه. نشانه‌ها همچنین می‌توانند تصاویر آیکون سفارشی را نمایش دهند
• خط منحنی (Polyline) - یک مجموعه از خطوط مستقیم بر روی نقشه
• مضرب (Polygon) - یک مجموعه از خطوط مستقیم بر روی نقشه که شکل
• دایره و مستطیل (Circle و Rectangle)
• پنجره‌های اطلاعاتی (Info Windows) - محتوایی که در بالای نقشه در بالون‌های بالایی نمایش داده می‌شود
• پوشش‌های سفارشی (Custom overlays)

ماپ گوگل - افزودن نشانه

تولیدکننده نشانه‌ها می‌تواند نشانه‌ها را ایجاد کند. توجه داشته باشید که باید مقادیر position تنظیم شوند تا نشانه‌ها نمایش داده شوند.

برای افزودن نشانه به نقشه از روش setMap() استفاده کنید:

مثال

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

ماپ گوگل - انیمیشن نشانه

در این مثال نشان داده شده است که چگونه می‌توان از ویژگی animation برای تنظیم انیمیشن نشانه استفاده کرد:

مثال

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

ماپ گوگل - جایگزینی نشانه‌ها با آیکون

در این مثال مشخص شده است که از چه تصویری (آیکونی) برای جایگزینی نشانه‌های پیش‌فرض استفاده می‌شود:

مثال

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

ماپ گوگل - خط منحنی

خط منحنی یک خط است که توسط یک مجموعه از مختصات مرتب‌گذاری شده‌است.

خط‌های منحنی پشتیبانی از ویژگی‌های زیر را دارند:

• path - مقادیر عرض و طول جغرافیایی چندگانه خط مشخص می‌کند
• strokeColor - تحديد لون الخط بالرمز الستة عشر (نمط "#FFFFFF")
• strokeOpacity - تحديد شفافية الخط (قيمة بين 0.0 و 1.0)
• strokeWeight - تحديد سمك خط اللون (بالميليمتر)
• editable - تعريف ما إذا كان يمكن تعديل الخط (true/false)

مثال

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,,
  strokeWeight:2
});

خرائط قوقل - دائرة

الدوائر تشبه الخطوط المتقطعة، تتكون من سلسلة من الأماكن المحددة في ترتيب خطي. ومع ذلك، يتم تصميم الدوائر لتعريف المنطقة المغلقة.

الدوائر تتكون من خطوط وتكون شكلها "مغلقًا" (كل خط يربط مع الآخر).

الدوائر تدعم المواصفات التالية:

• path - تحديد عدد من خطوط الطول والعرض (المسافة بين الـ first و last coordinates)
• strokeColor - تحديد لون الخط بالرمز الستة عشر (نمط "#FFFFFF")
• strokeOpacity - تحديد شفافية الخط (قيمة بين 0.0 و 1.0)
• strokeWeight - تحديد سمك خط اللون (بالميليمتر)
• fillColor - تحديد لون المنطقة الم封闭ة بالرمز الستة عشر (نمط "#FFFFFF")
• fillOpacity - تحديد شفافية اللون المملوء (قيمة بين 0.0 و 1.0)
• editable - تعريف ما إذا كان يمكن تعديل الخط (true/false)

مثال

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,,
  strokeWeight:2,,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

خرائط قوقل - دائرة

الدائرة تدعم المواصفات التالية:

• center - تحديد مركز الدائرة كـ google.maps.LatLng
• radius - تحديد قطر الدائرة بالأمتار
• strokeColor - تحديد لون الخط حول الدائرة بالرمز الستة عشر (نمط "#FFFFFF")
• strokeOpacity - تحديد شفافية اللون للخط (قيمة بين 0.0 و 1.0)
• strokeWeight - تحديد سمك خط اللون (بالميليمتر)
• fillColor - تحديد لون المنطقة الداخلية للدائرة بالرمز الستة عشر (نمط "#FFFFFF")
• fillOpacity - تحديد شفافية اللون المملوء (قيمة بين 0.0 و 1.0)
• editable - تعريف ما إذا كان يمكن تعديل دائرة المستخدم (true/false)

مثال

var myCity = new google.maps.Circle({
  center:amsterdam,,
  radius:20000,,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,,
  strokeWeight:2,,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

خرائط قوقل - نافذة معلومات

معلومات نافذة معلومات علامة الموقع مع محتوى نصي تظهر:

مثال

var infowindow = new google.maps.InfoWindow({
  content: "Hello World!"
});
content: "Hello World!"