آموزش برنامه نویسی گوگل مپ در اندروید – بخش اول

آموزش برنامه نویسی گوگل مپ در اندروید
بخش اول

احتمالا نرم‌افزارهای اندرویدی زیادی را دیده‌اید که از گوگل مپ گوگل در خود استفاده کرده‌اند و شاید روی نقشه مسیرها و مکان‌های دلخواه خود را نشان می‌دهند! گوگل مپ به سادگی می‌تواند توسط Google maps Android API در اپلیکیشن شما مورد استفاده قرار گیرد و کار چندان پیچیده‌ای نیست!

در ادامه به نحوه‌ی ساخت یک API Key بدین منظور و استفاده از آن در محیط اندروید استودیو برای راه اندازی گوگل مپ می‌پردازیم.

ساخت یک پروژه در گوگل کنسول

ابتدا بایستی یک پروژه در گوگل کنسول (Google Console) بسازیم. قبل از هرچیزی، وارد حساب کاربری خود در جیمیل شده و از آن خارج نشوید. سپس مراحل زیر را دنیال کنید.

1. روی این‌جا کلیک کنید تا وارد لیست پروژه‌های خود در گوگل کنسول شوید.
2. روی CREATE PROJECT کلیک کنید.
3. یک نام برای پروژه‌ی خود در قسمت “Project Name” بنویسید. این نام الزاما همان نام اپلیکیشن شما نیست و می‌تواند هرچیزی باشد. چرا که شما مجبور نیستید از این پروژه تنها در یک اپلیکیشن استفاده کنید.
4. گزینه‌ی Location را رها کنید.
5. روی CREATE کلیک کنید.
6. از منوی سمت چپ، روی گزینه‌ی APIs & Services و سپس گزینه‌ی Dashboard کلیک کنید.
7. روی ENABLE APIS AND SERVICES کلیک کنید.
8. روی Maps SDK for Android کلیک کنید.
9. روی ENABLE کلیک کرده و منتظر بمانید.
10. از تب یا زبانه‌ی Credentials روی دکمه‌ی آبی کلیک کنید.
11. سپس روی API Key کلیک کنید.
    در نهایت باید API Key به صورت زیر به شما داده شود.
12. ممکن است در برخی موارد، یا در آپدیتها و …، جای API Key در کنسول متفاوت باشد که در این صورت می‌توانید کمی در کنسول به این طرف و آن طرف نگاهی کرده تا آن را پیدا کنید.
    ما از این کلید، در اپلیکیشن خود برای راه اندازی گوگل مپ استفاده خواهیم کرد.

راه اندازی پروژه در اندروید استودیو

قبل از شروع و اجرای اندروید استودیو، لطفا قندشکن خود را روشن کنید.

1. یک پروژه بسازید. آن را از نوع Empty Activity می‌توانید انتخاب کنید.
2. باید Google Repository را نصب کنیم؛ بدین منظور، از منوی Tools، روی SDK Manager کلیک کنید.
   سپس از زبانه‌ی SDK Tool و بخش Support Repository، تیک گزینه‌ی Google Repository را بزنید. حالا روی OK کلیک کنید تا نصب شود.
3. حالا باید مورد زیر را به dependencies فایل build.gradle خود اضافه کنید.
   توجه داشته باشید که در صورت استفاده از نسخه‌های جدید اندروید استودیو، عبارت compile را حتما به implementation تغییر دهید.

   implementation 'com.google.android.gms:play-services-maps:11.4.2'

وارد کردن API Key به Manifest

فایل منیسفت خود را باز کرده و آن را به صورت زیر تکمیل کنید:

 <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="zoftino.com.fullkade.googlemaps">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
	<meta-data
    		android:name="com.google.android.gms.version"
    		android:value="@integer/google_play_services_version" />

        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="کلید"/>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

همانطور که می‌بینید، دو متادیتا به منیفست و مابین تگ application خود اضافه کرده‌ایم؛ شما بایستی به جای عبارت “کلید”، همان API Key ای که از گوگل کنسول برای ساخت اپلیکیشن مپ دریافت کرده‌اید را وارد کنید.

یک مثال

فایل Layout خود را به صورت زیر تکمیل کنید:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/g_map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"/>
</android.support.constraint.ConstraintLayout>

چیز پیچیده‌ای در این‌جا قرار نداده‌ایم؛ جز یک تولبار و فرگمنت که به داخل آن، فرگمنت مپ را اضافه کرده‌ایم.

android:name="com.google.android.gms.maps.SupportMapFragment"

حالا به فایل MainActivity.java رفته و آن را به صورت زیر تکمیل کنید:

package com.fullkade.googlemaps;

import android.os.Bundle;

import com.fullkade.marasemyab.R;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends BaseActivity implements OnMapReadyCallback {

    private GoogleMap mMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.g_map);
        mapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        //seattle coordinates
        LatLng tehran = new LatLng(35.715298, 51.404343);
        mMap.addMarker(new MarkerOptions().position(tehran).title("Tehran [FuLLKade]"));
        mMap.moveCamera(CameraUpdateFactory.newLatLng(tehran));
    }
}

در این کد، ما علاوه بر این که فرگمنت را تنظیم کرده‌ایم و بلد بودن آن مبحث دیگریست؛  اینترفیس OnMapReadyCallback را روی اکتیویتی پیاده سازی کرده‌ایم.
در این اینتفریس که تنها یک متد به نام onMapReady دارد و زمانی اجرا می‌شود که مپ آماده شده باشد؛ (راه اندازی شده باشد)؛ ما برای نمونه در این‌جا، موقعیت را روی تهران تنظیم می‌کنیم.

1. ابتدا آبجکت ورودی متد را به یک فیلد نسبت می‌دهیم تا از جاهای دیگر نیز به آن دسترسی داشته باشیم.
2. یک موقعیت با سیستم Latitude Longitude ایجاد می‌کنیم.
   آن را روی تهران قرار می‌دهیم و من این مختصات را با سرچ در اینترنت به دست آورده‌ام.
3. مارکر مپ را روی همین جایی که تنظیم کرده‌ایم انتقال می‌دهیم. ما به این مارکر، یک عنوان نیز اضافه می‌کنیم.
4. سپس دوربین را به این مارکر انتقال می‌دهیم.

به همین سادگی و خوشمزگی ولی در پست‌های آینده (همون بعدی :D)، به مباحث پیشرفته در مورد گوگل مپ خواهیم پرداخت.