مكونات تحكم خرائط جوجل

خريطة جوجل - التحكمات الافتراضية

عند عرض خريطة جوجل القياسية، يقدم مجموعة التحكمات الافتراضية التالية:

• التكبير (Zoom) - عرض الشريط أو الأزرار "+/-" للتحكم في مستوى التكبير للخريطة
• التحريك (Pan) - عرض التحكمات المستخدمة للتحريك في الخريطة
• نوع الخريطة (MapType) - يسمح للمستخدم بتغيير نوع الخريطة (خريطة طريق و خريطة قمر صناعي)
• المناظر الطبيعية (Street View) - عرض رمز شخصية الشارع (رمز Pegman)، يمكنك سحبه إلى الخريطة لتمكين مناظر الطبيعة

خريطة جوجل - التحكمات الإضافية

بالإضافة إلى التحكمات الافتراضية، توفر خريطة جوجل ما يلي:

• المقياس (Scale) - عرض عنصر مقياس الخريطة
• الإدارة (Rotate) - عرض رمز دائري صغير، يسمح بتحويل الخريطة
• خريطة تلخيص (Overview Map) - عرض خريطة تلخيص، تعكس نطاقًا أوسع من منطقة العرض الحالية للخريطة

يمكنك تحديد التحكمات التي تريد عرضها عند إنشاء الخريطة (في موضوع الخريطة) أو تعديل خيارات الخريطة باستخدام setOptions().

خريطة جوجل - تعطيل التحكمات الافتراضية

قد ترغب في إغلاق التحكمات الافتراضية.

لهذا، قم بتعيين خاصية disableDefaultUI لخريطة (في موضوع الخريطة) إلى true:

النموذج

var mapOptions {disableDefaultUI: true}

خريطة جوجل - فتح جميع التحكمات

بعض التحكمات سيظهر بشكل افتراضي على الخريطة، بينما لا يظهر البعض الآخر إلا إذا قمت بضبطها.

يرجى تحديد التحكمات التي تريد إضافتها أو إزالتها من على الخريطة في موضوع الخريطة.

عند تعيين التحكمات إلى true، سيكونون مرئيين - وعند تعيينهم إلى false، سيتم إخفاؤهم.

هذا المثال يفتح جميع التحكمات:

النموذج

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

خرائط جوجل - تعديل التحكم

بعض التحكمات في الخرائط قابلة للتكوين.

يمكن تعديل التحكم من خلال تحديد خيارات حقل التحكم.

على سبيل المثال، يحدد حقل zoomControlOptions الخيارات المستخدمة لتعديل التحكم في التكبير. يمكن أن يحتوي حقل zoomControlOptions على:

• google.maps.ZoomControlStyle.SMALL - يظهر التحكم في التكبير المصغر (أزرار + و - فقط)
• google.maps.ZoomControlStyle.LARGE - يظهر التحكم في التكبير العادي (شريحة التكبير)
• google.maps.ZoomControlStyle.DEFAULT - يتم اختيار أفضل التحكم في التكبير بناءً على الجهاز والحجم الخريطة

النموذج

zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
}

ملاحظة: إذا كنت ترغب في تعديل التحكم، يرجى تشغيله أولاً (اجعله صحيحًا).

تحكم آخر قابلاً للتكوين هو MapType Control.

يحدد حقل mapTypeControlOptions الخيارات المستخدمة لتعديل التحكم. يمكن أن يحتوي حقل mapTypeControlOptions على:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR - يظهر زر لكل نوع خريطة
• google.maps.MapTypeControlStyle.DROPDOWN_MENU - يتم اختيار نوع الخريطة عبر القائمة المنسدلة
• google.maps.MapTypeControlStyle.DEFAULT - يظهر سلوك "الافتراضي" (يعتمد على حجم الشاشة)

النموذج

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

يمكنك أيضًا استخدام خاصية ControlPosition للتحديد موقع التحكم:

النموذج

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
  position: google.maps.ControlPosition.TOP_CENTER
}