Android - Google Map V2

開發工具：Android Studio

因為學弟妹最近好像都會想要在網路上找Android的Google Map怎麼開發，而網路上的好像很多都還是舊的，或者就是使用Javascript V3的教學，但是還是使用V2的好像比較好(一種Android就是要用Android的堅持)。

Step1. 開啟空白專案

因為教學方便，所以建議開啟空白專案，我有一組學弟妹因為直接開啟Google Map的專案，好像就做不下去，可能比較不適合初學者吧。

Step2. 申請Google Map的專案和Key

a. 進入此網址：https://console.developers.google.com/project

b. 建立新專案

c. 進入剛建立的專案首頁，之後選擇API和憑證，再選擇API，選擇Google Map Android API後會跳到下一頁，將API啟用。這一步驟不啟用，即使加入Google Service Key也沒有用。

進入專案首頁

選擇要開啟的API

開啟API，使"啟用API" 變成 "停用API"

d. 新增憑證，也就是幫你的APP註冊，讓你的APP可以辨識到此專案的憑證。可以參考此教學申請

你可以參考 Android - Google 新增憑證

Step3. 在Android Studio加入Google Map，此步驟就可以確認前面的步驟是否都成功。

a. 加入Google Play Service Maps到你的專案

在build.gradle加入下面的程式將google map library加入到專案內

   compile 'com.google.android.gms:play-services-maps:7.8.0'  

完整程式碼如下：

 apply plugin: 'com.android.application'  
 android {  
   compileSdkVersion 22  
   buildToolsVersion "21.1.2"  
   defaultConfig {  
     applicationId "com.idlefox.mymap"  
     minSdkVersion 11  
     targetSdkVersion 22  
     versionCode 1  
     versionName "1.0"  
   }  
   buildTypes {  
     release {  
       minifyEnabled false  
       proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'  
     }  
   }  
 }  
 dependencies {  
   compile fileTree(dir: 'libs', include: ['*.jar'])  
   compile 'com.android.support:appcompat-v7:22.1.1'  
   compile 'com.google.android.gms:play-services-maps:7.8.0'  
 }  

我的專案畫面

若是出現 Could not find 'com.google.android.gms:play-services-maps:7.8.0'，請到SDK Manage 更新下圖中四項內容

b. 新增APP的網路Permission

在AndroidManifest.xml增加以下三行

 <uses-permission android:name="android.permission.INTERNET"/>  
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>  
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>  

c. 新增APP的位置Permission

在AndroidManifest.xml增加以下兩行

   <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>  
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>  

d. 新增Google Map需要的描述

在AndroidManifest.xml增加以下兩項

並且替換下面 "your_google_map_key"

     <meta-data  
       android:name="com.google.android.gms.version"  
       android:value="@integer/google_play_services_version" />  
     <meta-data  
       android:name="com.google.android.maps.v2.API_KEY"  
       android:value="your_google_map_key" />  

AndroidManifest.xml完整程式碼如下：

 <?xml version="1.0" encoding="utf-8"?>  
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
   package="com.idlefox.mymap" >  
   <!-- internet premission-->  
   <uses-permission android:name="android.permission.INTERNET"/>  
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>  
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>  
   <!-- location premission-->  
   <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>  
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>  
   <application  
     android:allowBackup="true"  
     android:icon="@mipmap/ic_launcher"  
     android:label="@string/app_name"  
     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.maps.v2.API_KEY"  
       android:value="@string/google_map_key" />  
     <activity  
       android:name=".MainActivity"  
       android:label="@string/app_name" >  
       <intent-filter>  
         <action android:name="android.intent.action.MAIN" />  
         <category android:name="android.intent.category.LAUNCHER" />  
       </intent-filter>  
     </activity>  
   </application>  
 </manifest>  

e. 增加Google Map到你的畫面上

在activity_main.xml加入下列程式碼

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

完成以上步驟應該就可以將程式燒入你的手機或模擬器內，應該就可以看到下面的畫面，有出現地圖就是成功的。

Step4. 設定你的Google Map

Google Map 的功能大家應該都不陌生，陌生的話就可以打開手機內的Google Map App，以下是一些簡單操作就可以做出來的功能。

     mMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();  
     mMap.setMyLocationEnabled(true); // 右上角的定位功能  
     mMap.getUiSettings().setZoomControlsEnabled(true); // 右下角的放大縮小功能  
     mMap.getUiSettings().setCompassEnabled(true); // 左上角的指南針，要兩指旋轉才會出現  
     mMap.getUiSettings().setMapToolbarEnabled(true); // 右下角的導覽及開啟 Google Map功能  
     // 為了讓Google Map的Toolbar得以使用，所以要先建立一個Marker(地標物)  
     mMap.addMarker(new MarkerOptions()  
         .position(new LatLng(10, 10))  
         .title("Hello world"));  

下面就是成果

常見問題：

Q1. 如果地圖是白畫面，連經緯度的線都沒事，是什麼問題？

A1. 通常是Google Map Key 沒有加，若是剛加入，經過一兩分鐘都沒有出現，請確認Key對不對。