القائمة الرئيسية

الصفحات

التعامل مع Map #5 : اضافة google map الى تطبيقك وشرح كيف التعامل معها في برنامج اندرويد ستوديو

 

التعامل مع Map #5 : اضافة google map الى تطبيقك وشرح كيف التعامل معها في برنامج اندرويد ستوديو

كيفية عرض خرائط جوجل في تطبيقك بواسطة برنامج اندرويد ستوديو - how to add google maps in android studio


عملية تصميم تطبيق اندرويد مجاني ليست صعبه وفي نفس الوقت ليست سهله فالبعض منكم يعتقد تطبيقات أندرويد صعبه ومعقده ولن يتمكن من النجاح في مجال تطوير تطبيقات اندرويد ولكن الامر عكس ذلك وانا كنت واحد منكم صراحة , ولذلك قمت بتاسيس موقع جي كودرس لتعليمكم كيفية تصميم تطبيق اندرويد مجاني وشروحات متنوعه وعديدة في البرمجة واثراء المحتوى العربي بالبرمجة وخاصة مجال تطبيقات أندرويد حيث يعد من اكثر المجالات التي عليها طلب كبير في سوق العمل .


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



قم بعمل بإنشاء google map عن طريق الخطوات المتبعه في الصور التاليه وهذا الدرس من سلسلة تصميم تطبيق اندرويد مجاني لعمل map او خرائط وتتبع موقع المستخدم .



بعد انشاء جوجل ماب عندما تتوجه الى xml الخاص بها في اندرويد ستوديو سوف تجد انه قام بإرفاق لك رابط ويوجد مكان يطلب منك ان تدخل المفتاح لذلك خذ هذا الرابط وتوجة فورا الى المتصفح جوجل وقم بلصق الرابط هناك وهو عباره عن api للتتبع قم بضبط الاعدادت كما تريد وبعدها انقر على agree and continue ليتم انشاء مفتاح api خاص بتطبيقك .



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



الان توجة الى كلاس الكود واتوقع انكم اصبحت تعرفون ما هو الكلاس الخاص بكود اي activity لاننا قد شرحناه في جميع تطبيقات اندرويد التي قدمناها تقريبا واذا لم تكن تعرفه فكيف يمكنك تصميم تطبيق اندرويد مجاني وانت لا تعرف الاسياسيات ؟ عموما هو بنفس اسم ملف xml عندما تتوجة اليه سوف تجد مجموعه من الاكواد داخل onMapReady قم بمسحها وكتابة الاكواد الموجوده في الصورة , لاننا سوف نشرح معكم من البداية بالتفصيل .


الكود الموجود في الصورة 


@Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
        mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
        mMap.setTrafficEnabled(true);

        //24.589864,46.6161046
        LatLng latLng = new LatLng(24.589864,46.6161046);
        MarkerOptions markerOptions = new MarkerOptions()
                .position(latLng).title("حديقة العاشر").snippet("مكان رائع تقضي فيه يوم اجازتك");

        mMap.addMarker(markerOptions);
        CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngZoom(latLng,18);
        mMap.animateCamera(cameraUpdate);
    }
    


شرح اكواد خرائط جوجل - google maps داخل تطبيقات الاندرويد وبرنامج اندرويد ستوديو !


اولا قم بكتابة mMap وهي انك تاخذ عنصر من جوجل ماب او بمعنى اخر object لتعمل معك الخرائط وبعدها setMapType وهي تعني شكل الخريطة التي تريدها وسوف ارفق لكم مجموعة من الاشكال والاوامر الخاصه بها التي تستطيع استخدامها في اندرويد ستوديو android studio في اخر المقالة , واخيرا setTrafficEnabled وهي تمكن من التكبير على الخرائط وتحديد الاماكن بدقة عاليه .



انتقل الان الى متصفح جوجل وابحث عن خرائط جوجل او google maps وبعدها سوف تفتح لك خرائط جوجل قم بتحديد اي مكان تريدة في الخريطة وسوف يظهر بالاعلى مجموعة من الارقام بعد @ كما بالصورة التالية قم بنسخ جميع الارقام الى نهاية ( , ) لان بعدها رقم التقريب وهو هنا 19z وسوف نشرحه بعد قليل عموما قم بتسجيل الرقم الذي نسخته في اي مكان وهنا قمت بوضعه داخل الاندرويد ستوديو كنص بديل عن طريق // .



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


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


واخيرا قم بعمل CameraUpdate وهي عباره عن تتبع للمكان بمعنى عندما تفتح التطبيق دون عمل CameraUpdate سوف يفتح لك الموقع وكل شيئ لكنه لن يتتبعه اول ما تفتح سوف تجد نقطة حمراء على الخريطة تتبعها الى ان تصل الى العنوان ولكن امر CameraUpdate يساعدك في حل هذة المشاهدة فهو يتحرك بدلا منك ويفتح عليها وايضا قمنا بعمل له animateCamera وهو عبارة عن انميشن عندما يتتبع وهذة هي فكرة الكود ببساطة شديدة .



شكل تطبيق اندرويد عندما قمنا بعملية تشغيله على الهاتف 



اذا كنت تريد تغيير شكل maps الى اشكال اخرى فقم بالتوجة الى الرابط التالي وهو مقدم من جوجل لانشاء ستايل خرائط بالشكل الذي ترغب به ويوجد به مجموعه من الاشكال قم باختيار الشكل المناسب وبعدها اضغط على finish وسوف يخرج لك الكود على شكل json قم بتحويله الى ملف ورفعه الى الاندرويد ستوديو وقد سبق وان شرحنا هذا من قبل في مقالة سابقة حول كيفية تحويل كود json الى ملف داخل برنامج اندرويد ستوديو .





بعد ذلك قم بإنشاء ملف raw وارفع به ملف json الذي قمت بإنشاءة , بعدها توجة الى الكود الخاص بك وقم باضافة السطر التالي وهو مسؤول عن عملية تغيير شكل الماب ولا تنسى ازالة سطر mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN); الذي اضفناه سابقا لانه لن يعمل معك الشكلين في وقت واحد


mMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(this,R.raw.scratch));



مجموعة من الاشكال لتغيير شكل خرائط جوجل على تطبيقات الاندرويد التي تقوم بتطوير " الاشكال التي اخبرتكم بها بالاعلى 😂😂 "



درجات مستوى التقريب في خرائط جوجل 




للمزيد من دروس تطوير تطبيقات الجوال او تطوير تطبيقات الاندرويد




رابط المشروع كامل على جيت هب - github




التنقل السريع