Bài 56: Google Maps Android API – phần 4

[polldaddy poll=9764234]

Tiếp tục bài 55, bài 54, bài 53 bạn đã cơ bản lập trình được với Google Map. Trong bài này Tui sẽ hướng dẫn các bạn cách dùng các đối tượng Shape để tương tác với Google Map, chẳng hạn như:

  • Polyline
  • Polygons
  • Circle

Hay cách hiển thị kiểu Map tùy thích (hiện nay Google Map cung cấp các chế độ: NONE, NORMAL, SATELLITE, HYBRID và TERRAIN).

Trước tiên bạn bổ sung thêm Spinner để cho phép hiển thị kiểu Map theo yêu cầu của người sử dụng:

android_56_1Tiếp tục với Project LearnGoogleMap, bạn tiến hành chỉnh sửa Layout main Activity như sau:

[code language=”xml”]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="tranduythanh.com.learngooglemap.MainActivity" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Chọn kiểu Map:" />

<Spinner
android:id="@+id/spinner_map_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />

</LinearLayout>

<fragment
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.MapFragment"
/>

</LinearLayout>

[/code]

Tiếp tục bổ sung string-array cho strings.xml để lưu trữ các cách hiển thị Map, đặt tên array này là maps_type:

[code language=”xml”]

<string-array name="maps_type">
<item >MAP_TYPE_NONE</item>
<item >MAP_TYPE_NORMAL</item>
<item >MAP_TYPE_SATELLITE</item>
<item >MAP_TYPE_HYBRID</item>
<item >MAP_TYPE_TERRAIN</item>
</string-array>

[/code]

Cuối cùng trong MainActivity, tiến hành hiệu chỉnh coding để tương tác với Spinner, tương ứng với kiểu chọn lựa nào thì hiển thị Map với chế độ đó:

[code language=”java”]

Spinner spinner_maps_type=(Spinner) findViewById(R.id.spinner_map_type);
String arrMap[]=getResources().getStringArray(R.array.maps_type);
ArrayAdapter<String> adapterMap=new ArrayAdapter<>
(this, android.R.layout.simple_spinner_item, arrMap);
adapterMap.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner_maps_type.setAdapter(adapterMap);
spinner_maps_type.setOnItemSelectedListener(new OnItemSelectedListener() {

@Override
public void onItemSelected(AdapterView<?> arg0, View arg1,
int arg2, long arg3) {
int type=GoogleMap.MAP_TYPE_NORMAL;
switch(arg2)
{
case 0:
type=GoogleMap.MAP_TYPE_NONE;
break;
case 1:
type=GoogleMap.MAP_TYPE_NORMAL;
break;
case 2:
type=GoogleMap.MAP_TYPE_SATELLITE;
break;
case 3:
type=GoogleMap.MAP_TYPE_TERRAIN;
break;
case 4:
type=GoogleMap.MAP_TYPE_HYBRID;
break;
}
map.setMapType(type);
}

@Override
public void onNothingSelected(AdapterView<?> arg0) {
}
});

[/code]

Khi chạy ứng dụng lên ta sẽ có các kết quả sau:android_56_2– Tiến hành vẽ các đối tượng Shape lên Google Map: Tui sẽ hướng dẫn cách vẽ    Polyline, Polygons, Circle trên Map, dưới đây là một số hình minh họa:

android_56_3

*polyline:

– Để vẽ và đường polyline (những đường thẳng liên tục những không khép kín)

 

Ta khai báo đối tượng PolylineOptions :

PolylineOptions plOption=new  PolylineOptions();

Sau đó đưa tất cả các tọa độ vào PolylineOptions rồi đẩy vào hàm :

Polyline polyline= map.addPolyline(plOption);

Hàm addPolyline sẽ trả về 1 Polyline, ta có thể hiệu chỉnh đối tượng này như sau:

– Thiết lập màu đường kẻ: polyline.setColor(Color.RED);

– Thiết lập độ dày đường kẻ: polyline.setWidth(5)

– Thiết lập độ chồng lấp: polyline.setZIndex(1);

*Polygon:

Vẽ các đường line liên tục và khép kín

Tương tự ta tạo đối tượng : PolygonOptions

PolygonOptions pgOption=new PolygonOptions();

Đẩy tất cả tọa độ vào PolygonOptions sau đó đưa vào hàm:

Polygon polyGon= map.addPolygon(pgOption);

Hàm addPolygon trả về một đối tượng Polygon , ta có thể hiệu chỉnh:

– Thiết lập màu đường viền:polyGon.setStrokeColor(Color.BLUE);

– Thiết lập màu nền: polyGon.setFillColor(Color.YELLOW);

– Thiết lập độ dày: polyGon.setStrokeWidth(5);

 *Circle:

Vẽ đường tròn

tương tự ta khai báo đối tượng CircleOptions:

CircleOptions optionCircle=new CircleOptions();

Thiết lập tọa độ trung tâm và bán kính:

optionCircle.center(latCenter).radius(50);

Sau đó đưa vào hàm:

Circle cir=map.addCircle(optionCircle);

addCircle trả về một Circle, ta có thể thiết lập:

– Màu đường viền:cir.setStrokeColor(Color.BLUE);

– Màu nền : cir.setFillColor(Color.RED);

*** Bây giờ ta bổ sung Menu gồm 3 phần tử:

[code language=”xml”]

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="tranduythanh.com.learngooglemap.MainActivity" >
<item android:id="@+id/mnuveduongthang" android:title="Vẽ đường thẳng"></item>
<item android:id="@+id/mnuvepolyline" android:title="Vẽ polyline"></item>
<item android:id="@+id/mnuvepolygon" android:title="Vẽ Polygon"></item>

</menu>

[/code]

Xử lý coding chọn menu Item trong MainActivity:

[code language=”java”]

PolylineOptions plOption=new  PolylineOptions();

int typedraw;

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;
}

public boolean onOptionsItemSelected(MenuItem item) {
if(item.getItemId()==R.id.mnuveduongthang)
typedraw=0;
else if(item.getItemId()==R.id.mnuvepolyline)
typedraw=1;
else
typedraw=2;
latPrevious=null;
return super.onOptionsItemSelected(item);
}

[/code]

Tiếp theo bổ sung sự kiện OnMapClickListener cho Map:

[code language=”java”]

map.setOnMapClickListener(new OnMapClickListener() {

@Override
public void onMapClick(LatLng arg0) {
if(typedraw==0)
{
CircleOptions optionCircle=new CircleOptions();
optionCircle.center(arg0).radius(50);
Circle cir=map.addCircle(optionCircle);
cir.setFillColor(Color.RED);
cir.setStrokeColor(Color.BLUE);
if(latPrevious==null)
latPrevious=arg0;
//xử lý vẽ đường thẳng
else if(latPrevious!=null)
{
PolylineOptions optionLine=new PolylineOptions();
optionLine.add(latPrevious);
optionLine.add(arg0);
Polyline line=map.addPolyline(optionLine);
line.setColor(Color.BLUE);
line.setWidth(1);
latPrevious=null;
}

}
else if(typedraw==1)
{
if(latPrevious==null)
plOption=new PolylineOptions();
if(latPrevious!=null)
{

plOption.add(latPrevious);
plOption.add(arg0);
Polyline polyline= map.addPolyline(plOption);
polyline.setColor(Color.RED);

}
latPrevious=arg0;
}
else if(typedraw==2)
{
PolygonOptions pgOption=new PolygonOptions();
double h1=0.5;
double h2=0.25;
LatLng center=arg0;
LatLng p1=new LatLng(center.latitude-h1, center.longitude);
LatLng p2=new LatLng(center.latitude-h2, center.longitude-h2);
LatLng p3=new LatLng(center.latitude-h2, center.longitude-h1);
LatLng p4=new LatLng(center.latitude+h2, center.longitude-h2);
LatLng p5=new LatLng(center.latitude+h1, center.longitude-h1);
LatLng p6=new LatLng(center.latitude+h2, center.longitude);
LatLng p7=new LatLng(center.latitude+h1, center.longitude+h1);
LatLng p8=new LatLng(center.latitude+h2, center.longitude+h2);
LatLng p9=new LatLng(center.latitude-h2, center.longitude+h1);
LatLng p10=new LatLng(center.latitude-h2, center.longitude+h2);
pgOption.add(p1);
pgOption.add(p2);
pgOption.add(p3);
pgOption.add(p4);
pgOption.add(p5);
pgOption.add(p6);
pgOption.add(p7);
pgOption.add(p8);
pgOption.add(p9);
pgOption.add(p10);
pgOption.add(p1);
Polygon polyGon= map.addPolygon(pgOption);
polyGon.setFillColor(Color.YELLOW);
polyGon.setStrokeColor(Color.BLUE);
polyGon.setStrokeWidth(5);
}

}
});
}

[/code]

Chạy lên ta có kết quả như hình mẫu ở trên.

Bạn có thể tải source code mẫu ở đây:

http://www.mediafire.com/download/zr21zmt87eo51i0/LearnGoogleMap_shape.rar

Chúc các bạn thành công!

Bài 55: Google Maps Android API – phần 3

[polldaddy poll=9764234]

Bài 53, 54 bạn đã biết cách đưa Google Map ra ứng dụng Android. Trong bài này Tui sẽ hướng dẫn các bạn cách tương tác nâng cao với Google Map.

Ta tiếp tục với Project LearnGoogleMap ở bài 54.

Để truy xuất đối tượng Google Map trong XML layout ta làm như sau:

[code language=”java”]

GoogleMap map = ((MapFragment)getFragmentManager().findFragmentById(R.id.map)).getMap();

[/code]

Thông thường khi tải Google Map thường tốn thời gian chờ, vì vậy ta nên dùng Progress control để cho người sử dụng biết là chương trình đang chạy.

GoogleMap cung cấp sự kiện OnMapLoadedCallback để cho phép ta kiểm tra xem Map đã được tải về ứng dụng hoàn thành hay chưa, ta có thể dựa vào sự kiện này để kiểm tra.

Ta sửa code MainActivity như sau:

[code language=”java”]

package tranduythanh.com.learngooglemap;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.GoogleMap.OnMapLoadedCallback;

import android.app.Activity;
import android.app.ProgressDialog;
import android.os.Bundle;

public class MainActivity extends Activity {

//Khai báo đối tượng Google Map
GoogleMap map;
//Khai báo Progress Bar dialog để làm màn hình chờ
ProgressDialog myProgress;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Tạo Progress Bar
myProgress = new ProgressDialog(this);
myProgress.setTitle("Đang tải Map …");
myProgress.setMessage("Vui lòng chờ…");
myProgress.setCancelable(true);
//Hiển thị Progress Bar
myProgress.show();
//Lấy đối tượng Google Map ra:
map = ((MapFragment)getFragmentManager().
findFragmentById(R.id.map)).getMap();
//thiết lập sự kiện đã tải Map thành công
map.setOnMapLoadedCallback(new OnMapLoadedCallback() {

@Override
public void onMapLoaded() {
//Đã tải thành công thì tắt Dialog Progress đi
myProgress.dismiss();
}
});
map.setMapType(GoogleMap.MAP_TYPE_NORMAL);
map.getUiSettings().setZoomControlsEnabled(true);
map.setMyLocationEnabled(true);
}
}

[/code]

Khởi động ứng dụng ta được như sau:

android_55_1– Ta cần biết thêm số chức năng của Google Map như sau:

+ Làm sao biết biết được vị trí hiện tại của ta để di chuyển Map đúng vị trí

+ Cách xoay , quay Map như thế nào

+ Đường đi giữa các địa điểm ra sao….

* Để biết được vị trí hiện tại của ta trên bản đồ ta cần bổ sung thêm Manifest các thông số sau:

[code language=”xml”]

<uses-feature android:name="android.hardware.location" android:required="true" />
<uses-feature android:name="android.hardware.location.gps" android:required="true" />

[/code]

Trong MainActivity bạn bổ sung thêm hàm “TuiDangODau” :

[code language=”java”]

private void TuiDangODau() {

LocationManager locationManager = (LocationManager) getSystemService(LOCATION_SERVICE);
Criteria criteria = new Criteria();

Location lastLocation = locationManager.getLastKnownLocation(locationManager.getBestProvider(criteria, false));
if (lastLocation != null)
{
map.animateCamera(CameraUpdateFactory.newLatLngZoom(
new LatLng(lastLocation.getLatitude(), lastLocation.getLongitude()), 13));

CameraPosition cameraPosition = new CameraPosition.Builder()
.target(new LatLng(lastLocation.getLatitude(), lastLocation.getLongitude()))      // Sets the center of the map to location user
.zoom(15)                   // Sets the zoom
.bearing(90)                // Sets the orientation of the camera to east
.tilt(40)                   // Sets the tilt of the camera to 30 degrees
.build();                   // Creates a CameraPosition from the builder
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
}
}

[/code]

Sau đó trong hàm OnCreate, ta gọi bổ sung thêm hàm TuiDangODau:

[code language=”java”]

protected void onCreate(Bundle savedInstanceState) {
//…..

//Thêm dòng lệnh này:
TuiDangODau();
}

[/code]

Khi chạy ứng dụng lên, phần mềm sẽ tự động đưa ta về đúng vị trí trên bản đồ …:

android_55_2Bạn muốn thêm ghi chú cho địa điểm của bạn thì bổ sung tiếp MarkerOptions, bạn sửa lại hàm TuiDangODau như sau:

[code language=”java”]

private void TuiDangODau() {

LocationManager locationManager = (LocationManager) getSystemService(LOCATION_SERVICE);
Criteria criteria = new Criteria();

Location lastLocation = locationManager.getLastKnownLocation(locationManager.getBestProvider(criteria, false));
if (lastLocation != null)
{
LatLng latLng=new LatLng(lastLocation.getLatitude(), lastLocation.getLongitude());
map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, 13));

CameraPosition cameraPosition = new CameraPosition.Builder()
.target(latLng)      // Sets the center of the map to location user
.zoom(15)                   // Sets the zoom
.bearing(90)                // Sets the orientation of the camera to east
.tilt(40)                   // Sets the tilt of the camera to 30 degrees
.build();                   // Creates a CameraPosition from the builder
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
//Thêm MarketOption cho Map:
MarkerOptions option=new MarkerOptions();
option.title("Chỗ Tui đang ngồi đó");
option.snippet("Gần làng SOS");
option.position(latLng);
Marker currentMarker= map.addMarker(option);
currentMarker.showInfoWindow();
}
}

[/code]

Tiến hành chạy lại ứng dụng ta có kết quả như hình dưới đây:

android_55_3-Tuy nhiên trong nhiều trường hợp ta cần hiệu chỉnh lại MarkerOption theo ý của Ta cho nó đẹp và phục vụ những mục đích khác… Do đó ta cần phải biết hiệu chỉnh InfoWindowAdapter:

Giả sử ta sửa lại Marker Option như sau:

android_55_4Bạn quan sát khi Tui nhấn ngón tay vào núm màu xám xanh thì nó hiển thị lên MarkerOption theo định dạng của riêng Tui, cái này rất hay và tiện dung trong việc quảng bá thương hiệu của một địa điểm nào đó, với những thông tin thật chi tiết và hữu ích.

Bạn để ý Marker Tui hiển thị các thông tin sau:

– Hình Tui tải từ link trên Facebook

– Kinh độ (longtitude)

– Vĩ độ (latitude)

– Title

– Snippet

Bạn thấy háo hức không? Tui thấy rất là háo hức khi các bạn làm được như trên. Nó quá hay và tiện dụng.

Vậy làm sao để có thể coding cho nó hiểu như trên?

Tiếp tục với bài LearnGoogleMap ở trên, bạn tạo thêm lớp ImageLoadTask để tải hình từ Facebook, MyInfoWindowAdapter custom_info.xml để hiển thị thông tin Marker theo ý mình:

android_55_5– Layout để hiển thị Marker Option theo ý mình như sau (custom_info.xml):

[code language=”xml”]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<ImageView
android:id="@+id/img_drthanh"
android:layout_width="400dp"
android:layout_height="200dp"
android:src="@drawable/common_full_open_on_phone" />

<TextView
android:id="@+id/tv_lat"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/tv_lng"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="title:" />

<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="snippet:" />

<TextView
android:id="@+id/tv_snippet"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

[/code]

Lớp ImageLoadTask để tải hình ảnh từ Facebook về sau đó hiển thị lên Custom Marker Option như sau:

[code language=”java”]

package tranduythanh.com.learngooglemap;

import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.model.Marker;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;

public class ImageLoadTask extends AsyncTask<Void, Void, Bitmap> {

//Link url hình ảnh bất kỳ
private String url;
private GoogleMap map;
private Activity context;
private boolean isCompleted=false;
private Marker currentMarker;

public boolean isCompleted() {
return isCompleted;
}

public void setCompleted(boolean isCompleted) {
this.isCompleted = isCompleted;
}

public ImageLoadTask(Activity context, String url,GoogleMap map,Marker currentMarker) {
this.context=context;
this.url = url;
this.map=map;
this.currentMarker=currentMarker;
}

@Override
protected Bitmap doInBackground(Void… params) {
try {
//Tiến hành tạo đối tượng URL
URL urlConnection = new URL(url);
//Mở kết nối
HttpURLConnection connection = (HttpURLConnection) urlConnection
.openConnection();
connection.setDoInput(true);
connection.connect();
//Đọc dữ liệu
InputStream input = connection.getInputStream();
//Tiến hành convert qua hình ảnh
Bitmap myBitmap = BitmapFactory.decodeStream(input);
if(myBitmap==null)
return null;
return myBitmap;
} catch (Exception e)
{
e.printStackTrace();
}
return null;
}

@Override
protected void onPostExecute(Bitmap result) {
super.onPostExecute(result);
//thiết lập Info cho Map khi tải hình hoàn tất
map.setInfoWindowAdapter(new MyInfoWindowAdapter(context,result));
//tiến hành hiển thị lên Custom marker option lên Map:
currentMarker.showInfoWindow();
}
}

[/code]

– Chú ý dòng lệnh 67, 69 là để gán Custom cho Map và hiển thị nó lên.

Coding MyInfoWindowAdapter để custom layout cho Marker option:

[code language=”java”]

package tranduythanh.com.learngooglemap;

import android.app.Activity;
import android.graphics.Bitmap;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.google.android.gms.maps.GoogleMap.InfoWindowAdapter;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;

public class MyInfoWindowAdapter implements InfoWindowAdapter {

private Activity context;
private Bitmap btmp;
public MyInfoWindowAdapter(Activity context,Bitmap result)
{
this.context=context;
this.btmp=result;
}
@Override
public View getInfoContents(Marker arg0) {
// Getting view from the layout file info_window_layout
View v = this.context.getLayoutInflater().inflate(R.layout.custom_info, null);

// Getting the position from the marker
LatLng latLng = arg0.getPosition();

// Getting reference to the TextView to set latitude
TextView tvLat = (TextView) v.findViewById(R.id.tv_lat);

// Getting reference to the TextView to set longitude
TextView tvLng = (TextView) v.findViewById(R.id.tv_lng);

TextView tvTitle = (TextView) v.findViewById(R.id.tv_title);

TextView tvSnippet = (TextView) v.findViewById(R.id.tv_snippet);

ImageView imgdrthanh=(ImageView) v.findViewById(R.id.img_drthanh);

// Setting the latitude
tvLat.setText("Latitude:" + latLng.latitude);

// Setting the longitude
tvLng.setText("Longitude:"+ latLng.longitude);

tvTitle.setText(arg0.getTitle());
tvSnippet.setText(arg0.getSnippet());
imgdrthanh.setImageBitmap(btmp);
return v;
}

@Override
public View getInfoWindow(Marker arg0) {

return null;
}

}

[/code]

– Cuối cùng chỉnh sửa lại MainActivity như sau:

[code language=”java”]

package tranduythanh.com.learngooglemap;

import com.google.android.gms.common.api.GoogleApiClient;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.GoogleMap.OnMapLoadedCallback;
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.Marker;
import com.google.android.gms.maps.model.MarkerOptions;

import android.app.Activity;
import android.app.ProgressDialog;
import android.location.Criteria;
import android.location.Location;
import android.location.LocationManager;
import android.os.Bundle;

public class MainActivity extends Activity {

//Khai báo đối tượng Google Map
GoogleMap map;
//Khai báo Progress Bar dialog để làm màn hình chờ
ProgressDialog myProgress;
GoogleApiClient googleApiClient;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Tạo Progress Bar
myProgress = new ProgressDialog(this);
myProgress.setTitle("Đang tải Map …");
myProgress.setMessage("Vui lòng chờ…");
myProgress.setCancelable(true);
//Hiển thị Progress Bar
myProgress.show();
//Lấy đối tượng Google Map ra:
map = ((MapFragment)getFragmentManager().
findFragmentById(R.id.map)).getMap();
//thiết lập sự kiện đã tải Map thành công
map.setOnMapLoadedCallback(new OnMapLoadedCallback() {

@Override
public void onMapLoaded() {
//Đã tải thành công thì tắt Dialog Progress đi
myProgress.dismiss();
}
});
map.setMapType(GoogleMap.MAP_TYPE_NORMAL);
map.getUiSettings().setZoomControlsEnabled(true);
map.setMyLocationEnabled(true);
//lấy lấy được vị trí cuối cùng:

TuiDangODau();
}
private void TuiDangODau() {

LocationManager locationManager = (LocationManager) getSystemService(LOCATION_SERVICE);
Criteria criteria = new Criteria();

Location lastLocation = locationManager.getLastKnownLocation(locationManager.getBestProvider(criteria, false));
if (lastLocation != null)
{
LatLng latLng=new LatLng(lastLocation.getLatitude(), lastLocation.getLongitude());
map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, 13));

CameraPosition cameraPosition = new CameraPosition.Builder()
.target(latLng)      // Sets the center of the map to location user
.zoom(15)                   // Sets the zoom
.bearing(90)                // Sets the orientation of the camera to east
.tilt(40)                   // Sets the tilt of the camera to 30 degrees
.build();                   // Creates a CameraPosition from the builder
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
//Thêm MarketOption cho Map:
MarkerOptions option=new MarkerOptions();
option.title("Chỗ Tui đang ngồi đó");
option.snippet("Gần làng SOS");
option.position(latLng);
option.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_VIOLET));
Marker currentMarker= map.addMarker(option);

ImageLoadTask imgTask=new ImageLoadTask(this,"https://scontent-a-lax.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/1488744_806006112761224_104751868_n.jpg?oh=18c334e98bdbc3454a0b72be9dc3f7dc&oe=55417543",map,currentMarker);
imgTask.execute();
}
}
}

[/code]

Bạn để ý dòng lệnh 84, là dòng Tui gọi tải hình từ Facebook về, bạn có thể đổi link bất kỳ. Ở đây Tui truyền tham chiếu Map và MarkerOption qua Custom Adapter để hiển thị theo ý mình.

Bạn có thể tải source code phần Custom Marker Option ở đây:

http://www.mediafire.com/download/cha8toku8386wet/LearnGoogleMap_custom_marker_option.rar

Như vậy bạn đã biết được thao tác nâng cao với Google Map control, bài tiếp theo Tui sẽ hướng dẫn các bạn cách sử dụng các Autoshape trên Map (line, polyline, Rectangle, circle…)

Bạn cần phải làm lại bài này nhiều lần để hiểu được cơ chế làm việc của nó, đặc biệt là cách Custom Layout cho marker Option.

Chúc các bạn thành công

Bài 54: Google Maps Android API – phần 2

[polldaddy poll=9764234]

bài tập 53 Tui đã trình bày sơ lược về GMAA, để rõ hơn bạn nhớ vào link sau để đọc https://developers.google.com/maps/documentation/android/intro (link này có hướng dẫn chi tiết và những ví dụ mẫu rất dễ hiểu).

Trong bài tập này Tui sẽ hướng dẫn các bạn cách đưa Google Map vào ứng dụng Android của mình như thế nào, có nhiều bước khác nhau để sử dụng, ở đây Tui tạm liệt kê theo thứ tự như sau (không hẳn là tốt nhất):

Bước 1:

Kiểm tra hệ thống đã có cài đặt gói Google API và Google Play Service chưa? nếu chưa có thì cần cài đặt.

Kiểm tra như sau: Mở cửa sổ Android SDK Manager lên (Bài 1):

android_54_1Bạn quan sát hình trên xem có Google APIs tương ứng với các version hay chưa (tùy bạn cài đặt, không nhất thiết phải giống như hình Tui chụp). Tiếp theo kéo xuống mục Extras để kiểm tra Google Play Service:

android_54_2Nếu nó chưa được cài đặt thì bạn phải cài đặt cho đầy đủ.

Khi cài đặt thành công thì bạn có thể tìm thấy nó ở đây “..\sdk\extras\google\google_play_services\libproject\google-play-services_lib”:

android_54_3Bước 2:

– Tạo máy Ảo có khả năng chạy được Google Map:

android_54_5Như bạn thấy máy Tui có Google APIs từ 17->21, bạn tạo máy ảo với một trong nhóm này để nó có thể chạy được với Google Map. Chú ý là bạn không cần thiết phải lấy bản 21 nhé, ở đây Tui lỡ tải về rồi nên chụp cho nó màu mè thôi. Bạn chạy với bản 19 cũng rất Ok rồi.  Bản 21 phải yêu cầu bật tính năng ảo hóa nên chưa chắc máy của bạn chạy được.

android_54_4Bước 3:

Import thư viện google-play-services_lib ở Bước 1 vào Eclipse. Bước này bạn nên copy đường dẫn rồi dán vào cửa sổ import cho lẹ nhé: android_54_6 Sau đó Import Project này vào Elipse như sau:

Vào menu File/ Chọn Import:

android_54_7Màn hình Import Project hiển thị ra như bên dưới, ta chọn Android/Existing Android Code into Workspace:

android_54_8Bấm next để tiếp tục:

android_54_9Root Directory: Bạn dán đường dẫn đã copy lúc nãy vào đây rồi nhấn phím Enter nó sẽ hiển thị ra Google-play-service_lib ở trong mục Projects.

Copy projects into workspace: Bạn nhớ tick vào đây.

Sau đó nhấn nút Finish để kết thúc quá trình Import:

android_54_10Bước 4:

Tạo Project Android tên “LearnGoogleMap” sử dụng Google Map để tham chiếu tới Google Play Service tạo ở bước 3.

Sau khi tạo Project LearnGoogleMap xong thì nhấn chuột phải vào nó chọn Properties:

android_54_11Màn Properties hiển thị ra ta chọn Android/ chọn nút Add trong mục Library:

android_54_12Khi bấm nút Add–> màn hình sau xuất hiện, ta chọn google play service:

android_54_13Bấm OK để đồng ý tham chiếu, ta xem kết quả:

android_54_14Bước 5:

Cấu hình để sử dụng Google Map trong ứng dụng LearnGoogleMap:

– Ta cần tìm chuỗi SHA1 để tạo API KEY sử dụng Google map trước, để có SHA1 ta làm như sau:

Mở màn hình Command Line lên, copy và gõ lệnh sau (không sửa gì nhé):

keytool -list -v -keystore “%USERPROFILE%\.android\debug.keystore” -alias androiddebugkey -storepass android -keypass android

android_54_15Từ màn hình Command line, ta dán lệnh trên vào:

android_54_16Nhấn Enter và có kết quả SHA1 như sau:

android_54_17Ta sao chép SHA1 được cung cấp ở trên.

Ngoài ra Eclipse đã hỗ trợ cho chúng ta cách lấy SHA1 vô cùng dễ òm như sau:

Vào menu Windows/Chọn Preference:

android_54_18Bạn copy luôn chuỗi SHA1 đó, chú ý là chuỗi này tương ứng với mỗi cấu hình máy là khác nhau, khi đưa lên Google project cùng với Package nó sẽ tạo ra API KEY khác nhau và duy nhất.

Tiếp theo bạn vào https://code.google.com/apis/console để lấy API KEY dựa theo SHA1 được cung cấp ở trên.

Bạn chó ý là API KEY được tạo ra dựa trên sự kết hợp giữa SHA1 và package mà bạn tạo ra trong Android. ở Project trên Package tui như sau:

android_54_19“tranduythanh.com.learngooglemap” nó sẽ kết hợp với SHA1 để tạo ra API KEY. Như vậy nếu bạn đặt tên theo package nào thì phải theo package đó nha.

bài tập 50 Tui cũng đã hướng dẫn dùng Google Project với bài Google Cloud Message, bạn có thể tự xem lại cách tạo Project (Nhớ xem lại nếu chưa biết tạo sử dụng, ở đây Tui mặc định bạn đã biết vì Tui đã hướng dẫn chi tiết trong bài 50 – Do đó nếu không thấy màn hình dưới đây tức là bạn chưa học bài tập 50).

Kích hoạt Google MAP Android API V2 lên (tùy vào version khác nhau mà Google có thể đổi giao diện khác chút xíu, miễn sao bạn nhìn thấy nó là OK):

– Bạn vào mục API, kéo xuống tìm Google Máp Android API v2 để bật ON nó lên:

android_54_26

Bật xong sẽ thấy:

android_54_27

Sau đó vào mục Credentials/ chọn Create New Key:

android_54_20Khi bấm vào Create New Key màn hình sau xuất hiện:

android_54_22Ở màn hình trên bạn chọn Android Key, màn hình tiếp theo xuất hiện:

android_54_23Sau khi bấm Create, ta có kết quả sau:

android_54_24– Vậy là ta đã có API KEY.

– Ta tiến hành sửa AndroidManifest như sau (Tui sao chép vào luôn, ý nghĩa Tui đã nói trong bài 53 rồi):

[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="tranduythanh.com.learngooglemap"
    android:versionCode="1"
    android:versionName="1.0" >

    <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" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/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="AIzaSyAs7FEF1RxuoSat_oHITBirDKagx2nQKDM" />

        <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>
[/code]

Tiếp theo tiến hành chỉnh sửa activity_main.xml:

[code language=”xml”]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="tranduythanh.com.learngooglemap.MainActivity" >
 <fragment
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    class="com.google.android.gms.maps.MapFragment"
    />
</LinearLayout>

[/code]

Coding java Ta không sửa gì hết nhá (Tức là cứ để mặc định, chỉ sửa lại mỗi Layout XML mà thôi.

Sau khi sửa xong ta tiến hành chạy Ứng Dụng,  bạn sẽ thấy Google Map hiển thị trong ứng dụng. Dĩ nhiên là chỉ mới hiển thị cho ta ngó đỡ ghiền chứ chưa làm được gì cả:

android_54_25

Như vậy đến đây các bạn đã biết cách đưa Google Map ra ứng dụng, bạn cần hiểu rõ từng bước để tránh sai sót. Phải nhớ bước lấy SHA1, API KEY, bước cấu hình Manifest và layout có sử dụng class=”com.google.android.gms.maps.MapFragment”

Bài tiếp theo Tui sẽ hướng dẫn các bạn cách tương tác với Google Map

Bạn có thể tải source code mẫu ở đây (dĩ nhiên bạn không thể nào chạy trên máy của bạn được) vì nó lệ thuộc vào API KEY, mà API KEY lại lệ thuộc vào SHA1 và package…. do đó khi bạn tải về thì phải làm lại các bước để lấy đúng API KEY theo cấu hình trên máy của bạn:  http://download939.mediafire.com/aykl9wqptuwg/9b9fz5c36yw025h/LearnGoogleMap.rar

Các bạn chú ý theo dõi

Chúc các bạn thành công.

Bài 53: Google Maps Android API – phần 1

[polldaddy poll=9764234]

Tui nhớ không lầm cách đây khoảng 7 hoặc n năm trở về trước, khi đi ra đường nếu không muốn bị lạc đường thì chỉ cần hỏi các bác xe ôm là có thể tìm được địa điểm như mong muốn. Tuy nhiên không phải lúc nào ta cũng có thể gặp được những bác xe ôm tốt bụng thật tình chỉ đường, Tui cũng là một nạn nhân khi lần đầu tiên đi phỏng vấn ở công ty năm trong Khu Dân Cư Gia Hòa, lúc Thầy của Tui giới thiệu vào phỏng vấn và có nói là quốc lộ 51 (Tui nhớ rõ là quốc lộ 51) hướng đi Nam Sài Gòn… Thế là tui phang 1 mạch đi lung tung từ Gò Vấp qua cầu Nguyễn Tất Thành, vòng thẳng Nguyễn Văn Linh…. đi gặp quốc lộ 50… rồi hỏi Bác xe ôm trẻ tuổi ngay ngã 4… “Làm ơn cho Tui hỏi quốc lộ 51 ở đâu ạ”, và họ nói “Đây là 50 cứ chảy thẳng xuống là 51”.. Tui cảm ơn rối rít chạy thêm hơn nửa tiếng thì gần tới đường đi Long An…. hốt hoảng chạy ngược lại…. đúng ngã 4 Nguyễn Văn Linh và Quốc Lộ 50… hỏi lại người khác thì được giải thích Quốc lộ 51 là đường đi Vũng Tàu…. đi sai đường rồi…. Lúc đó Tui mới té ngửa ra và gọi lại cho Thầy Tui thì được nhắc lại là quốc lộ 50…

Bạn thấy đấy, nếu như sài điện thoại củ chuối chém đá như chém bùn thì làm gì có Máp với chả miếc mà tự tìm đường…. Hiện nay với sự phát triển của điện thoại thông minh Hoàng Phi Hồng với giá rẻ bèo bạn cũng có thể sở hữu được những điện thoại thông minh với những chức năng hết chỗ chê…. Google đã cung cấp chức năng Google Maps tích hợp vào điện thoại giúp người sử dụng có thể dễ dàng tìm đường đi.. Cho dù nó ở trong góc trong góc trong cùng cũng lòi ra được, đặc biệt hãng còn cho phép lập trình viên tùy biến Google Maps thông qua việc cung cấp các API cực đỉnh giúp chúng ta thỏa chí lập trình…. và đặc biệt sẽ không bị ai đó nói dối về đường đi, giúp ta tiết kiệm thời gian và tiền bạc.

Ngày xưa ông bà ta thường có câu ngạn ngữ “Ra đường hỏi người già, về nhà hỏi trẻ nhỏ”, nhưng từ khi có Google Map thì Tui nghĩ nên đổi lại “Ra đường hỏi Google Map, về nhà hỏi cô hàng xóm”.

Hiện nay có rất nhiều website đã hướng dẫn các bạn cách lập trình với Google Map, bạn chỉ cần lên google enter 1 phát là nó ra 1 nùi…. nhưng không phải nùi nào cũng dễ hiểu.

Trong các bài tập tiếp theo đây Tui sẽ hướng dẫn các bạn từng bước tiếp cập với Google Map thông qua các bài tập mẫu từ dễ lên khó, với mong muốn giúp các bạn có thể tự lập trình cũng như cải tiến theo cách của mình và áp dụng một cách hiệu quả nhất vào ứng dụng của mình.

—————————————————————————–

1) Cách Thiết lập Google Map trong ứng dụng Android:

Google Maps Android API (GMAA) bao gồm các dữ liệu bản đồ được phát triển bởi Google Inc cho phép lập trình viên tích hợp vào các ứng dụng thông qua các phương thức được cung cấp sẵn.

GMAA hỗ trợ các thao tác với giao diện đồ họa của bản đồ bao gồm:

  • Vẽ biểu tượng trên bản đồ (Marker).
  • Đồ họa đường thẳng (Polylines).
  • Đồ họa hình đa giác (Polygons).
  • Bitmap trên bản đồ (Ground & Tile Overlay).

Google Maps Android API Key: chuỗi mã hóa được Google cung cấp miễn phí để quản lý và chứng thực việc truy xuất dữ liệu bản đồ trên ứng dụng (được lấy trên https://code.google.com/apis/console).

GMAA Key được liên kết thông qua Digital Cerfiticate (DC-Chứng thư số) và Pakage Name (Tên đóng gói) của ứng dụng.

Tạo GMAA Key bao gồm 3 bước chính như sau:

  • Bước 1: Truy xuất thông tin DC bằng mã SHA-1 (dùng command line hoặc từ eclipse).
  • Bước 2: Đăng ký Project trong Google API Console.
  • Bước 3: Tích hợp Google Map Service vào Project và gửi yêu cầu cấp GGMA Key.

Trong mọi ứng dụng liên quan tới Google Map thì cần Cấu hình tập tin AndroidManifest về một số thứ như:

Khai báo một số quyền truy cập phần cứng và sử dụng dữ liệu người dùng.
Việc xác định quyền sử dụng dữ liệu bản đồ thông qua GMAA KEY. KEY này được khai báo trong tag meta-data nằm trong tag application:

[code language=”xml”]

<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="API_KEY"/>

[/code]

Với API_KEY là được lấy từ Google Developers

Khai báo version sử dụng:

[code language=”xml”]

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

[/code]

Một số quyền cần thiết lập trong Manifest như sau:

[code language=”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" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

[/code]

Cần cung cấp OpenGL 2.0 cho việc đồ họa bản đồ:

[code language=”xml”]

<uses-feature
android:glEsVersion="0x00020000"
android:required="true"/>

[/code]

Cuối cùng ta có một Manifest tương tự như sau:

[code language=”xml”]

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="tranduythanh.com.learngooglemap"
    android:versionCode="1"
    android:versionName="1.0" >

    <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" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/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="AIzaSyAWPt-7pVRw-HUBoy9J8_YtB6qPDpp94lM" />

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

[/code]

Ở trên bạn thấy API_KEY =AIzaSyAWPt-7pVRw-HUBoy9J8_YtB6qPDpp94lM

Chi tiết lấy API_KEY sẽ được hướng dẫn ở bài sau.

2) tương tác các đối tượng GoogleMap:

Tạo các đối tượng để thực hiện tương tác giữa ứng dụng với người dùng bao gồm:

GoogleMap:

  • Kết nối đến Google Map Service.
  • Tải dữ liệu bản đồ theo từng mảng nhỏ (tiles).
  • Thể hiện dữ liệu bản đồ trên màn hình thiết bị.
  • Thể hiện các điều khiển giao tiếp như thu phóng, la bàn…
  • Xử lý các tương tác thu phóng, xoay, góc nhìn…

MapFragment: xây dựng giao diện bản đồ bằng cách xây dựng Fragment.

MapView: xây dựng giao diện bản đồ như một điều khiển và tương tác với Activity.

Truy xuất và sử dụng đối tượng GoogleMap từ thẻ fragment trong XML:

[code language=”java”]

GoogleMap map = ((MapFragment)getFragmentManager().findFragmentById(R.id.map)).getMap();

map.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
map.getUiSettings().setZoomControlsEnabled(true);
map.setMyLocationEnabled(true);

[/code]

Hoặc:

[code language=”java”]
MapFragment mapFragment = MapFragment.newInstance();
GoogleMap mMap = mapFragment.getMap();
mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
getFragmentManager().beginTransaction().add(R.id.container,mapFragment).commit();</pre>
[/code]

Các kiểu giao diện hiển thị bản đồ mà Google Map cung cấp:

  • MAP_TYPE_NORMAL
  • MAP_TYPE_HYBRID
  • MAP_TYPE_NONE
  • MAP_TYPE_SATELLITE
  • MAP_TYPE_TERRAIN

Các kiểu này ta có thể dùng coding để thay đổi kiểu hiển thị thông qua hàm : setMapType(int)

Một số hình minh họa cách hiển thị:

android_53_1Ta có thể thiết lập các giá trị ban đầu và điều khiển cho GoogleMap bao gồm:

  • Góc nhìn (Camera)
  • Thu phóng (zoom)
  • Chuyển điểm (location)
  • Xoay (bearing)
  • Góc nghiêng (titl)
  • La bàn và điều khiển thu phóng.
  • Các điều khiển cử chỉ trên bản đồ.

Ta thiết lập các giá trị ban đầu và điều khiển cho GoogleMap trong layout XML:

[code language=”xml”]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="tranduythanh.com.learngooglemap.MainActivity" >
<fragment
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.MapFragment"
/>
</LinearLayout>

[/code]

Bạn để ý : class=”com.google.android.gms.maps.MapFragment”

Bạn có thể lấy fragment là root.

Ta cũng có thể thiết lập như sau:

[code language=”xml”]

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

</fragment>

[/code]

Bạn để ý :  class=”com.google.android.gms.maps.SupportMapFragment”

Ta có thể thực hiện tùy chỉnh GoogleMap thông qua đối tượng GoogleMapOptions:

[code language=”java”]

MapFragment.newInstance(GoogleMapOptions)

MapView(Context, GoogleMapOptions)

[/code]

3) Thiết lập Đồ họa trên Google Map:

-Lớp Marker:

Lớp này được xây dựng sẵn cho việc sử dụng định vị tọa độ trên bản đồ, hiển thị  thông tin địa điểm và tương tác với người dùng:

Ví dụ dưới đây Tui lấy Kinh độ và vĩ độ của Trung Tâm Tin Học ĐH Khoa Học tự nhiên (cơ sở 357 Lê Hồng Phong)

[code language=”java”]
LatLng TTTH_KHTN = new LatLng(10.763181, 106.675664);
MarkerOptions option=new MarkerOptions();
option.position(TTTH_KHTN);
option.title("Trung tâm tin học ĐH KHTN").snippet("This is cool");
option.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE));
option.alpha(0.8f);
option.rotation(90);
Marker maker = map.addMarker(option);
maker.showInfoWindow();
map.moveCamera(CameraUpdateFactory.newLatLngZoom(TTTH_KHTN, 15));

[/code]

Nếu bạn thắc mắc làm sao lấy được kinh độ vĩ độ đúng như vậy thì có thể vào google Maps, tìm đúng địa điểm và nhấn chuột phải vào địa điểm đó/ chọn What is here: android_53_2Ta tùy chỉnh Marker bằng cách các thông số:

  • Position
  • Title
  • Snippet
  • Draggable
  • Visible
  • Anchor
  • Icon

InfoWindow: được thể hiện phía trên đối tượng Marker  thể hiện các thông tin cần thiết về vị trí đang định vị.

Chỉ một đối tượng InfoWindow hiển thị ở một thời điểm và có thể điều khiển thông qua hai phương thức:

showInfoWindow()

hideInfoWindow()

Để tùy chỉnh InfoWindow trong lớp GoogleMap hỗ trợ giao diện InfoWindowAdapter bao gồm 2 phương thức:

getInfoWindow(Marker)

getInfoContents(Marker)

Ta gọi phương thức  setInfoWindowAdapter  để thiết lập InfoWindow cho đối tượng GoogleMap

Hình ví dụ mẫu:

android_53_3Ngoài ra Google Maps API cung cấp các giao diện cho phép bắt lại các sự kiện tương với Marker và InfoWindow:

  • OnMarkerClickListener
  • OnMarkerDragListener
  • OnInfoWindowClickListener

Ta cũng cần chú ý vì load Map có thể mất nhiều thời gian nên cần có ProgressBar để hiển thị cho người sử dụng không phải thắc mắc, thường ta dùng ProgressDialog để hiển thị trong thời gian chờ chương trình hoàn tất load Map. Ta có thể xử lý được việc hoàn tất load Map qua sự kiện sau:

[code language=”java”]

map.setOnMapLoadedCallback(new OnMapLoadedCallback() {

@Override
public void onMapLoaded() {
// TODO Auto-generated method stub
//Xử lý ở đây nầy
Log.i("MAP LOADED", "END");
}
});

[/code]

Như vậy Tui đã giới thiệu xong Google Maps Android API, các bạn có thể tham khảo thêm tại link https://developers.google.com/maps/documentation/android/

Bài tập kế tiếp Tui sẽ hướng dẫn từng bước tạo 1 Project sử dụng Google Map như thế nào

Các bạn chú ý theo dõi

Chúc các bạn thành công.