شكل 3.32: إضافة مكون Map (الخريطة) - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

--- SECTION: Top Navigation Bar --- MIT APP INVENTOR Projects Connect Build Settings Help My Projects View Trash Guide Report an issue English qkhaled.bil@gmail.com Designer Blocks --- SECTION: Palette Panel --- Visit_SA_App AlMasmak Add Screen Remove Screen Publish to Gallery Palette Search Components User Interface Layout Media Drawing and Animation Maps Circle FeatureCollection LineString Map Marker Navigation Polygon Rectangle Charts Sensors Social Storage Connectivity LEGO® MINDSTORMS® Experimental Extension --- SECTION: Viewer Panel (Simulated Phone Screen) --- Viewer Display hidden components in Viewer Phone size (506,320) 9:48 Discover Saudi Arabia Al Masmak Text for Label1 --- SECTION: Components and Properties Panels --- Components AlMasmak discover_label VerticalArrangement1 title_label image description_label HorizontalArrangement1 map_button Map1 Properties Map1 CenterFromString 42.358144, -71.093612 EnablePan EnableRotation EnableZoom Height Fill parent Width Fill parent LocationSensor None MapType Roads Rotation 0.0 ScaleUnits Metric ShowCompass ShowScale ShowUser ShowZoom ZoomLevel 16 --- SECTION: Figure Caption --- شكل 3.32: إضافة مكون Map (الخريطة) --- SECTION: Instructional Text --- عند تشغيل التطبيق النهائي على هاتفك المحمول، يظهر مكون الخريطة في موقع المعلم المحدد، وستضيف في الدرس التالي الإحداثيات برمجيًا بناءً على هذا الموقع. --- SECTION: Page Footer --- وزارة التعليم Ministry of Education 149 2025 - 1447 --- VISUAL CONTEXT --- **FIGURE**: شكل 3.32: إضافة مكون Map (الخريطة) Description: A screenshot of the MIT App Inventor development environment, illustrating the process of adding and configuring a Map component. The interface is divided into several panels: 'Palette' on the left, 'Viewer' (simulating a phone screen) in the center, and 'Components' and 'Properties' on the right. The simulated phone screen displays an application named 'Al Masmak' with an image of a historical building and a map icon at the bottom. Numbered indicators highlight specific elements: 1 points to the 'Map' component in the 'Maps' section of the 'Palette'. 2 points to 'Map1' under 'Components'. 3 points to 'Height: Fill parent' in 'Properties'. 4 points to 'Width: Fill parent' in 'Properties'. 5 points to the 'ShowZoom' checkbox (checked) in 'Properties'. 6 points to 'ZoomLevel: 16' in 'Properties'. Table Structure: Headers: N/A Rows: Calculation needed: N/A X-axis: N/A Y-axis: N/A Data: The screenshot shows the visual layout and configuration options for a map component within a mobile application development environment. It highlights the selection of the map component, its inclusion in the app's component tree, and various properties such as geographical center coordinates, pan/zoom enablement, and zoom level. Key Values: Map component selected in Palette (1), Map1 component in Components list (2), CenterFromString: 42.358144, -71.093612, EnablePan: true, EnableRotation: false, EnableZoom: true, Height: Fill parent (3), Width: Fill parent (4), LocationSensor: None, MapType: Roads, Rotation: 0.0, ScaleUnits: Metric, ShowCompass: false, ShowScale: false, ShowUser: false, ShowZoom: true (5), ZoomLevel: 16 (6), Phone size: (506,320), App name on phone: Al Masmak Context: This figure serves as a visual guide for users learning to develop mobile applications with MIT App Inventor. It specifically demonstrates how to integrate and configure a map feature, showing the user interface elements and property settings involved in this process. The numbered annotations guide the user's attention to key steps and settings.