Trong bài này mình sẽ hướng dẫn các bạn làm việc với Google Map API v2 trong android.
Để làm việc với Google Map API v2 các bạn cần chuẩn bị các thứ bước như sau.
Bước 1: Download google-play-services_lib và google API (nên download google API mới nhất trong ví dụ này mình dùng google API 8)
Note: Các bạnchú ý nếu các bạn dùng min SDK là 8 thì các bạn phải dung google play services for Froyo
Nếu các bạn để min SDK là 11 thì có thể dùng google play services
Trong ví dụ này mình dung min SDK là 8 nên mình dùng google play services for Froyo
Bước 2. Đăng ký api key: Tạo project
Trong ví dụ này mình tạo project có tên là: GGMapAPIV2Demo
Và package là: truongbs.fet.hut.ggmapapiv2demo
Bước 3. Add libbary:
Các bạn làm lần lượt theo hình dưới:
Chọn File -> import -> Existing Android Code Into Workspace
Check vào ô Copy projects into workspace(các bạn lưu ý điều này)
Chọn Browse …
Chọn đường dẫn đến android sdk của bạn sdk->Extra ->google->google_play_services_lib_froyo->libproject->google-play-services_lib -> ok
Sau khi import xong trong Eclipse của các bạn có project sau
Để import lib vào project của bạn bạn làm như sau
Chuột phải vào project của bạn chọn properties
Chọn android -> Add
Chọn google-play-services_lib -> ok
Nếu add thành công thì màn hình sẽ có dấu v màu xanh như hình dưới nếu đó là chữ X màu đỏ thì tức là khi import google-playservices các bạn đã k check copy project into workspace như mình lưu ý ở trên các bạn lưu ý điều này nhé
Bước 4. Tạo API KEY
Để tạo API key các bạn vào link sau
https://console.developers.google.com/project
Create Project
Nhập project name: các bạn nhập tên project các bạn đã tạo trong eclipse: trong ví dụ của mình là: GGMapAPIV2Demo -> Create
Sau khi tạo xong các bạn chọn APIS & AUTH -> APIs -> scrool xuống dưới tìm Google Maps Android API v2 -> click Off
Sau khi xong thì các bạn scrool ngược lên trên thấy google maps anroid API v2 của bạn đã ON
Tiếp theo các bạn chọn Credentials -> Create new Key -> Android Key
Đến đây các bạn cần lấy mã SHA1 và package của bạn
Để lấy mã SHA1 bạn vào Eclipse -> Window -> Preferences
Chọn Android Build các bạn sẽ thấy mã SHA1 như trong hình dưới
Package thì các bạn có thể lấy trong manifest
Bạn copy mã SHA1;package như hình dưới với máy của mình nó có dạng
A4:93:24:1E:62:C9:01:55:B1:59:CC:3F:19:92:B9:EE:DD:FB:78:06;truongbs.fet.hut.ggmapapiv2demo
Chọn Create -> các bạn có API key
Đến đây các công việc chuẩn bị đã xong các bạn có thể bắt tay vào code
Note trong bài này mình cố gắng hướng dẫn thật chi tiết vì việc add lib support trong android thường hầu hết đều làm như vậy thong thường SDK trong android có 2 dạng
1 là lib là project 2 là jar file. Cách này là add lib là project các bạn nên chú ý điều này
Trong bài này mình sẽ làm một app đơn giản với google map là tạo google map
Cho google map view đến 1 điểm ở Hà Nội
Tạo maker trên google map và vẽ một đường thẳng google map
Để làm được app này các bạn thực hiện các bước sau:
Bước 1: Khai báo manifest
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="truongbs.fet.hut.ggmapapiv2demo"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="8" />
<permission
android:name="truongbs.fet.hut.ggmapapiv2demo.permission.MAPS_RECEIVE"
android:protectionLevel="signature" />
<uses-permission android:name="truongbs.fet.hut.ggmapapiv2demo.permission.MAPS_RECEIVE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- Required to show current location -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- Required OpenGL ES 2.0. for Maps V2 -->
<uses-feature
android:glEsVersion="0x00020000"
android:required="true" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="truongbs.fet.hut.ggmapapiv2demo.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>
<!-- Google API Key -->
<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="AIzaSyD3EZzDr0cyF8YskcqQ0RtYLhl231oUUEo" />
</application>
</manifest>
Note các bạn cần thay thế API Key của các bạn vào phần android:value=”AIzaSyD3EZzDr0cyF8YskcqQ0RtYLhl231oUUEo”
Bước 2: Mở file activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<fragment
android:id="@+id/map"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Bước 3 Mở file MainActivity.java
package truongbs.fet.hut.ggmapapiv2demo;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Menu;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.CameraPosition;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.gms.maps.model.PolylineOptions;
public class MainActivity extends FragmentActivity {
GoogleMap map;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Getting reference to SupportMapFragment of the activity_main
SupportMapFragment fm = (SupportMapFragment) getSupportFragmentManager()
.findFragmentById(R.id.map);
// Getting Map for the SupportMapFragment
map = fm.getMap();
// Enable/Disable MyLocation Button in the Map
map.setMyLocationEnabled(true);
// Enable/Disable Zoom Control
map.getUiSettings().setZoomControlsEnabled(true);
// viewPoint Ha Noi
ViewPoint(21.02785, 105.852283, 15, 0, 0);
// creat Maker Ha Noi - Viet Nam
CreatMaker(21.02785, 105.852283, "Ha Noi", " Hoan Kiem Ha Noi Viet Nam");
// creat Maker Ha Noi - Viet Nam with custom icon maker
// unlock src to test funtion
//CreatMakerWithDrawable(21.02785, 105.852283, "Ha Noi", " Hoan Kiem Ha Noi Viet Nam",R.drawable.ic_launcher);
// draw line on Map
drawLine(21.02785, 105.852283, 21.030704, 105.852369);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
private void drawLine(double lat1, double long1, double lat2, double long2) {
// draw a line have location (lat1,long1) & (lat2,long2)
map.addPolyline(new PolylineOptions()
.add(new LatLng(lat1, long1), new LatLng(lat2, long2)).width(5)
.color(Color.RED));
}
private void CreatMaker(double latitude, double longitude, String mTitle,
String mSnippet) {
map.addMarker(new MarkerOptions()
.position(new LatLng(latitude, longitude))
.title(mTitle)
.snippet(mSnippet)
.icon(BitmapDescriptorFactory
.defaultMarker(BitmapDescriptorFactory.HUE_RED)));
}
// creat maker with icon is image
private void CreatMakerWithDrawable(double latitude, double longitude,
String mTitle, String mSnippet, int icon) {
map.addMarker(new MarkerOptions()
.position(new LatLng(latitude, longitude)).title(mTitle)
.snippet(mSnippet)
.icon(BitmapDescriptorFactory.fromResource(icon)));
}
private void ViewPoint(double lattitude, double longitude, float mZoom,
float mtilt, float mbearing) {
// Init View Position
CameraPosition mPosition = new CameraPosition(new LatLng(lattitude,
longitude), mZoom, mtilt, mbearing);
// update camera
map.animateCamera(CameraUpdateFactory.newCameraPosition(mPosition));
}
}
Note trong ví dụ này mình comment bằng tiếng anh theo thói quen các bạn cũng nên tập điều này(tiếng anh của mình không tốt lắm các bạn thông cảm :D)
Các bạn có thể down full src theo link dưới dây
GGMapAPIV2Demo
Kết quả thực hiện chương trình
