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

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

 

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

 

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

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

Screen Shot 2015-08-17 at 6.48.57 PM

 

نضغط finish.

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

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

 

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

Screen Shot 2015-08-17 at 8.50.54 PM

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

 

Screen Shot 2015-08-17 at 8.53.21 PM

 

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

Screen Shot 2015-08-17 at 8.54.33 PM

 

بعذ النسخ سنتوجه الى هذا المسار 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() للتعامل مع الخريطة .

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

device-2015-08-18-015100

 


 

اضافة 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));

وكانت النتيجة كما في الصورة
device-2015-08-18-021048

 

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

8 أفكار عن “استخدام Google Map في تطبيق اندرويد”

  1. السلام عليكم
    انا عندى مشكلة وهى انى انا عامل مشروع على الايى اس بى دوت نت وعملت ابليكاشن واستخدمت الويب فيو لعرض الصفحة بس المشكلة انى انا عندى فى الصفحة نفسها مستخدم جوجل ماب بس على الويب مش على الابليكاشن المهم ان المشكلة دلوقتى الماب لما بتتفتح مبيجيبش معاها الاتجاهات يعنى لو عايز ادوس على اتجاهات بحيث النافيجاشن يفتح معايا ويوصلنى بس مبيفتحش بيجيب اتجاهات بس من غير نافيجاشن
    ارجو الافادة وحل هذه المشكلة من اهل الخبرة

  2. السلا م وعليكم ورحمة الله مشروع تخرجي باندرويد استوديو بموضوع دليل سياحي ويحتوي علي ثلاثة انواع من المعالم اريد ادل للسائحين الي الموقع الأقرب للمستخدم .فكيف اربط جوجل ماب بتطبيقي.
    افيدوني جزاكم الله خيرا.

  3. السلام عليكم ورحمة الله
    مشروعي تطبيق دليل سياحي عايزة اربط ب قوقل ماب شوفتا الشرح بس مو ظبط معايا بعد افتح الاندرويد واختار الماب وانسخ ال http لما افتح النت وانسخ الرابط يعطيني خطأ ارجو الافادة