TUT ANDROID 029: Google Map API v2 trong android

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)

1

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

2

3

 

Check vào ô Copy projects into workspace(các bạn lưu ý điều này)

Chọn Browse …

5

 

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

4

 

Sau khi import xong trong Eclipse của các bạn có project sau

 

7

Để 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

18

Chọn android -> Add

19

Chọn google-play-services_lib -> ok

20

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é

21

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

8

 

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

9

 

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

10

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

11

Tiếp theo các bạn chọn Credentials -> Create new Key -> Android Key

12

Đế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

13

 

Chọn Android Build các bạn sẽ thấy mã SHA1 như trong hình dưới

14

Package thì các bạn có thể lấy trong manifest

15

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

16

 

Chọn Create -> các bạn có API key

17

 

Đế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”

22

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

23

 

24

 

Comments
  1. 5 years ago
  2. 5 years ago
  3. 5 years ago
    • 5 years ago
    • 5 years ago
    • 5 years ago
      • 5 years ago
  4. 5 years ago
    • 5 years ago
  5. 5 years ago
  6. 5 years ago
  7. 5 years ago
  8. 5 years ago
  9. 4 years ago
    • 4 years ago
  10. 4 years ago

Leave a Reply

Your email address will not be published. Required fields are marked *