استخدام Google Map في تطبيق اندرويد

في هذا الدرس سنتعلم الى كيفية استخدام Google Map في تطبيق الاندرويد وايضا معرفة بعض الدوال التي قد نحتاج اليها في بعض التطبيقات .

 

عند اطلاق الاندرويد استديو رسميا تمت اضافة بعض الخصائص المهمة والتي تختصر الكثير من الوقت على المبرمجين وسنتعرف اليوم على احدى هذه الخصائص وهو اضافة GoogleMap Activity .

 

سنقوم بداية بانشاء مشروع جديد ومن قائمة New سنقوم باختيار Google ثم اختيار Google Map Activity

ستظهر لنا نافذة لاختيار اسم Activity وايضا اذا كان لديك اكثر من تطبيق في نفس المشروع يحدد لك اي من التطبيقات تريد اضافة هذا Activity .

 

نضغط finish.

ستظهر ملفات جديدة داخل التطبيق وسنحتاج فقط خطوة وحدة فقط وهي الحصول على  API KEY للخرائط .

كنا في السابق اذا اردنا الحصول على API KEY فاننا سنقوم باكثر من خطوة مزعجة ومتعبه وهي الحصول على SHA1 الخاص من خلال commaned keytoolg لكن الان مع اندرويد ستديو ستحتاج فقط نسخ هذا الرابط ووضعه في المتصفح واختيار Project والضغط على Create كما سنلاحظ في الصور القادمة :

 

بعذ فتح الرابط  سيقوم الموقع باعطائك بعض الخيارات كما في الصورة

نقوم بانشاء Project جديد وسيقوم الموقع بالانتقال الى هذه الصفحة وسنتحتاج فقط الضغط على Create :

 

 

الان سنقوم بنسخ API KEY الذي سيظهر في صفحة المشاريع

 

بعذ النسخ سنتوجه الى هذا المسار app/src/releas/google_maps_api.xml ونقوم بلصق API KEY

<resources>
    <string name="google_maps_key" translatable="false" templateMergeStrategy="preserve">
        AIzaSyDy1f4yntkpTsjY2AL2_en6BgbxBtMxeUs
    </string>
</resources>

الان انتهينا من اهم جزئية وهي الحصول على API KEY .

---

 

 

الان سنقوم بشرح الكود الخاص بعرض Map في التطبيق وسننتقل الى هذا الملف activity_google_map.xml داخل مجلد layout  سنشاهد هذ الكود

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     />

نشاهد ان Tag XML ابتدا بـFragment وهذا يعني ان Map عبارة عن Fragment Class والذي بدورة سيكون مسؤول عن التعامل مع دورة حياة Fragment .

سننتقل الى الـActivity الخاص بهذا الكود وهو GoogleMapActivity

public class GoogleMapsActivity extends AppCompatActivity implements OnMapReadyCallback {

    private GoogleMap mMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
        // Obtain the SupportMapFragment and get notified when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }
    
    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        // Add a marker in Sydney and move the camera
        LatLng sydney = new LatLng(-34, 151);
        mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));
        mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
    }
}

نلاحظ ان Activity وريث من AppCompatActivity والذي بدوره سيتعامل مع SupportMapFragment مع الاخذ بالاعتبار اننا قمنا باستخدام دالة getSupportFragmentManager() للتعامل مع الخريطة .

سنقوم بتشغيل التطبيق وستشاهد النتيجة كما في الصورة .

 

---

 

اضافة Marker على الخريطة :
قد يكون تطبيقك يحتاج لعرض بعض المواقع على الخريطة مع اضافة بعض المعلومات كاسم للمكان او اي شئ تحتاجة في التطبيق .

 // Add a marker in Sydney and move the camera
        LatLng home = new LatLng(21, 40);
        mMap.addMarker(new MarkerOptions().position(home).title("Home"));
        mMap.moveCamera(CameraUpdateFactory.newLatLng(home));

سنلاحظ اننا قمنا بتعريف خطوط الطول والعرض وبعد ذلك استخدمنا دالة addmarker واضافة الموقع وكتابة title للخريطة وجعل الكاميرا تقوم بالتركيز على الموقع .
بامكانك تغيير علامة Marker وتخصيصها فقط باضافة هذا الكود

        BitmapDescriptor icon = BitmapDescriptorFactory.fromResource(R.drawable.ic_location_history_blue_700_24dp);

استخدمنا BitmapDescriptor لنستطيع استخدام ايقونات من Drawable ثم قمنا باستتخدام دالة icon كما نلاحظ بالكود

mMap.addMarker(new MarkerOptions().position(home).title("Ahmed").icon(icon));

وكانت النتيجة كما في الصورة

 

سيتم باذن الله في الدروس القادمة الكلام اكثر عن Google Map .