Eclipse Google Map API (EGMA)


EGMA:   SOLD       



This time we will use the Google Map API facility for that every time we try we need an internet connection. The first step you have to do is get the Google API code. Here's how to generate on windows seven.


How to Use GOOGLE MAP API in Eclipse

  1. Find the debug.keystore file, in my laptop it is located at C:\User\acer.android. If you don't find it, use the search facility in windows explorer with the search scope of drive C. 
  2. First copy the debug.keystore file then paste it into the C:\android folder. 
  3. Via CMD, first go to the path C:\Program Files\Java\jdk1.6.0_10\bin 
  4. Then type the following command and press enter. Look at this figure 14.2.
keytool.exe -list -alias androiddebugkey -keystore "C:\android\debug.keystore" -storepass android -keypass android


Figure 14.2. MD5 Fingerprint generation process

  1. If successful, you will get an MD5 Fingerprint code. This code is used to create a Google Map Key. 
  2. Now go to  http://code.google.com/android/maps-api-signup.html  , follow the instructions. 
  3. Congratulations, you now have a Google Map Key. Save this key carefully because it will be placed in the main.xml section to create an application on Android. The following is a snippet of the key that is entered into main.xml
1: ...
2: <com.google.android.maps.MapView
3: android:id="@+id/mapView"
4: android:layout_width="match_parent"
5: android:layout_height="match_parent"
6: android:enabled="true"
7: android:clickable="true"
8: android:apiKey="0CyuBP8zNhMbsh0kiDX7go-37s8g81rYQQoldrQ" />
9: ...

Now we just start the project to create the simplest Map on Android. The scenario, once this application is launched, a Google map will appear (connected to the internet). In the layout there are 2 radio buttons to select the type of display between satellite and street. The map can also be zoomed. The final result is as in Figure 14.3. Are you ready?? Yup, let's start!

1. Create a new project

| Project name    | mapSederhana |
|-----------------|--------------|
| Build Target    | Android 2.2  |
| Aplication name | Google Map   |
| Package name    | Com.map      |
| Create Activity | TampilkanMap |
| Min SDK version | 8            |

Figure 14.3. Displaying the map on the emulator

2. We first change Main.xml, enter the Google Api key into android:apiKey

1: <?xml version="1.0" encoding="utf-8"?>
2: <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3: android:id="@+id/linearLayout1"
4: android:layout_width="match_parent"
5: android:layout_height="match_parent"
6: android:orientation="vertical">
7: <LinearLayout android:id="@+id/linearLayout2"
8: android:layout_width="match_parent"
9: android:layout_height="wrap_content">
10: <RadioGroup android:layout_height="wrap_content"
11: android:orientation="horizontal"
12: android:layout_width="match_parent"
13: android:id="@+id/viewRG">
14: <RadioButton android:layout_height="wrap_content"
15: android:layout_width="wrap_content"
16: android:checked="true"
17: android:text="@string/streetTxt"
18: android:id="@+id/streetRB"></RadioButton>
19: <RadioButton android:layout_height="wrap_content"
20: android:layout_width="wrap_content"
21: android:text="@string/satelitTxt"
22: android:layout_gravity="right"
23: android:id="@+id/sateliteRB"></RadioButton>
24: </RadioGroup>
25: </LinearLayout>
26: <RelativeLayout android:layout_width="match_parent"
27: android:id="@+id/relativeLayout1"
28: android:layout_height="match_parent">
29: <com.google.android.maps.MapView
30: android:id="@+id/mapView"
31: android:layout_width="match_parent"
32: android:layout_height="match_parent"
33: android:enabled="true"
34: android:clickable="true"
35: android:apiKey="0CyuBP8zNhMbsh0kiDX7go-37s8g81rYQQoldrQ" />
36: </RelativeLayout>
37: </LinearLayout>

3. Add the following code to the DisplayMap.java Activity

1: package com.map;
2:
3: import com.google.android.maps.MapActivity;
4: import com.google.android.maps.MapController;
5: import com.google.android.maps.MapView;
6:
7: import android.os.Bundle;
8: import android.widget.RadioGroup;
9: import android.widget.RadioGroup.OnCheckedChangeListener;
10:
11: public class TampilkanMap extends MapActivity
12: implements OnCheckedChangeListener {
13: MapView mp=null;
14: MapController mc;
15: RadioGroup rg;
16: /** Called when the activity is first created. */
17: @Override
18: public void onCreate(Bundle savedInstanceState) {
19: super.onCreate(savedInstanceState);
20: setContentView(R.layout.main);
21:
22: mp=(MapView)findViewById(R.id.mapView);
23: mp.setBuiltInZoomControls(true);
24: rg=(RadioGroup)findViewById(R.id.viewRG);
25: rg.setOnCheckedChangeListener(this);
26: }
27: @Override
28: protected boolean isRouteDisplayed() {
29: return false;
30: }
31: @Override
32: public void onCheckedChanged(RadioGroup group, int chekId) {
33: // TODO Auto-generated method stub
34: switch(chekId){
35: case R.id.sateliteRB:
36: mp.setStreetView(false);
37: mp.setSatellite(true);
38: break;
39: case R.id.streetRB:
40: mp.setSatellite(false);
41: mp.setStreetView(true);
42: break;
43: }
44:
45: }
46: }

4. Don't forget in the AndroidManifest.xml section you have to add the Google Map library (see line 9).

1: <?xml version="1.0" encoding="utf-8"?>
2: <manifest
3: xmlns:android="http://schemas.android.com/apk/res/android"
4: package="com.map" android:versionCode="1"
5: android:versionName="1.0">
6:
7: <application android:icon="@drawable/icon"
8: android:label="@string/app_name">
9: <uses-library android:name="com.google.android.maps"></uses-
10: library>
11: <activity android:name="com.map.TampilkanMap"
12: android:label="@string/app_name">
13: <intent-filter>
14: <action android:name="android.intent.action.MAIN" />
15: <category android:name="android.intent.category.LAUNCHER" />
16: </intent-filter>
17: </activity>
18: </application>
19:
20: <uses-sdk android:minSdkVersion="8" />
21: <uses-permission
22: android:name="android.permission.INTERNET"></uses-permission>
23: </manifest>

Congratulations, you can now access Google Maps!! Hehehe...

Program Explanation

Let's look back at the DisplayMap activity. As usual, the declaration is done at the beginning of the program on lines 13-14. MapView is an object that can display maps taken from Google. This object can respond to touch, and a layer can also be added for markers. MapView can display 3 modes, namely satellite, street, and traffic modes. The MapController class is used to control the map so that it can be zoomed with a certain magnification. MapController also functions to add a small animation. If you have ever used Google Maps, then clicking on a marker, the map will shift focus to a new location. This process is an example of MapController implementation.

Line 22-25 is the object synchronization to its id in the xml layout. Line 25 itself functions to add a method to the button group so that it is active when clicked.

When the radio button is clicked, it then calls the onCheckedChanged() function on lines 32-43. Inside it there is a choice of conditions using switch-case. The choice of this condition is based on the id of the radio button that was clicked. If the clicked id is sateliteRB, then setStreetView() is set to false and setSateliteView() is set to true. Conversely, if the clicked id is streetRB, then setStreetView() is set to true and setSateliteView() is set to false. setStreetView() and setSateliteView() are methods of the MapView class.


Creating Android MAP, MARKER & GPS Applications Using Eclipse

In this section, we go one level up by combining the previous 2 projects plus displaying a marker or pin as a place marker, thus we combine the 3 basics.

  1. Showing map
  2. Determine location from gps 
  3. Members mark our location with a marker.


Figure 15.1. Combination of map, marker and GPS, (a) DDMS for GPS emulator, (b) Map and its marker.

Oops, but be patient..! First, let's talk about the scenario. Once run, along with displaying the map, a marker or pin also appears at a certain location. In this case, the default marker is above the city of Yogyakarta. Once the GPS captures the new latitude and longitude (simulated by sending the location via DDMS), the marker will move to the new location, followed by a simple animation of the map shifting following the marker while zooming. See Figure 15.1.

1. Create a new project again

| Project name    | mapMarkerGps   |
|-----------------|----------------|
| Build Target    | Android 2.2    |
| Aplication name | Google Map     |
| Package name    | Com.map.marker |
| Create Activity | MapMarker      |
| Min SDK version | 8              |

2. Insert the marker/pin image into the drawable

3. Main.xml

1: <?xml version="1.0" encoding="utf-8"?>
2: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
4: android:orientation="vertical"
5: android:layout_width="fill_parent"
6: android:layout_height="fill_parent">
7:
8: <com.google.android.maps.MapView xmlns:android="http://schemas.android.com/apk/res/android"
10: android:id="@+id/map_view"
11: android:layout_width="fill_parent"
12: android:layout_height="fill_parent"
13: android:clickable="true"
14: android:enabled="true"
15: android:apiKey="0CyuBP8zNhMbsh0kiDX7go-37s8g81rYQQoldrQ" />
16: </RelativeLayout>
17:

4. userPosition

1: package com.map.marker;
2:
3: public class userPosition {
4: static double latitude;
5: static double longitude;
6:
7: public double getLatitude() {
8: return latitude;
9: }
10:
11: public double getLongitude() {
12: return longitude;
13: }
14: public void setLatitude(double latitude) {
15: userPosition.latitude = latitude;
16: }
17: public void setLongitude(double longitude) {
18: userPosition.longitude = longitude;
19: }
20: }

5. First create a new class CustomItemizedOverlay.java

1: package com.map.marker;
2:
3: import java.util.ArrayList;
4:
5: import android.app.AlertDialog;
6: import android.content.Context;
7: import android.graphics.drawable.Drawable;
8:
9: import com.google.android.maps.ItemizedOverlay;
10: import com.google.android.maps.OverlayItem;
11:
12: public class CustomItemizedOverlay extends
13: ItemizedOverlay<OverlayItem> {
14:
15: private ArrayList<OverlayItem> mapOverlays = new
16: ArrayList<OverlayItem>();
17:
18: private Context context;
19:
20: public CustomItemizedOverlay(Drawable defaultMarker) {
21: super(boundCenterBottom(defaultMarker));
22: // TODO Auto-generated constructor stub
23: }
24:
25: public CustomItemizedOverlay(Drawable defaultMarker, Context
26: context) {
27: this(defaultMarker);
28: this.context = context;
29: }
30:
31: @Override
32: protected OverlayItem createItem(int i) {
33: // TODO Auto-generated method stub
34: return mapOverlays.get(i);
35: }
36:
37: @Override
38: public int size() {
39: // TODO Auto-generated method stub
40: return mapOverlays.size();
41: }
42:
43: @Override
44: protected boolean onTap(int index) {
45: OverlayItem item = mapOverlays.get(index);
46: AlertDialog.Builder ad = new AlertDialog.Builder(context);
47: ad.setTitle(item.getTitle());
48: ad.setMessage(item.getSnippet());
49: ad.show();
50: return true;
51: }
52:
53: public void addOverlay(OverlayItem overlay) {
54: mapOverlays.add(overlay);
55: this.populate();
56: }
57: }

6. Write the Activity MapMarker code like this

1: package com.map.marker;
2:
3: import java.util.List;
4:
5: import com.google.android.maps.GeoPoint;
6: import com.google.android.maps.MapActivity;
7: import com.google.android.maps.MapController;
8: import com.google.android.maps.MapView;
9: import com.google.android.maps.Overlay;
10: import com.google.android.maps.OverlayItem;
11: import android.content.Context;
12: import android.location.Location;
13: import android.location.LocationListener;
14: import android.location.LocationManager;
15: import android.os.Bundle;
16: import android.widget.Toast;
17:
18: public class MapMarker extends MapActivity {
19:
20: private MapView mapView;
21: MapController mapController;
22: LocationListener locationListener;
23: CustomItemizedOverlay itemizedOverlay;
24: List<Overlay> mapOverlays;
25: userPosition pos;
26:
27: /** Called when the activity is first created. */
28: @Override
29: public void onCreate(Bundle savedInstanceState) {
30: super.onCreate(savedInstanceState);
31: setContentView(R.layout.main);
32:
33: mapView = (MapView) findViewById(R.id.map_view);
34: mapView.setBuiltInZoomControls(true);
35: mapOverlays = mapView.getOverlays();
36: mapController = mapView.getController();
37: pos = new userPosition();
38:
39: LocationManager mLocationManager = (LocationManager)
40: getSystemService(Context.LOCATION_SERVICE);
41: locationListener = new MyLocationListener();
42: mLocationManager.requestLocationUpdates
43: (LocationManager.GPS_PROVIDER,0,
44: 0, locationListener);
45:
46: if (pos.getLatitude() > 0) {
47: getGeoPointUser(pos.getLatitude(),
48: pos.getLongitude());
49:
50: } else {
51: getGeoPointUser(-7.801307, 110.364756);//yogya
52: }
53: }
54:
55: @Override
56: protected boolean isRouteDisplayed() {
57: // TODO Auto-generated method stub
58: return false;
59: }
60:
61: private void getGeoPointUser(double lat, double lon) {
62: // TODO Auto-generated method stub
63: GeoPoint point = new GeoPoint((int) (lat * 1E6),
64: (int) (lon * 1E6));
65: OverlayItem overlayitem = new OverlayItem(point, "Hai..",
66: "Saya omayib");
67: itemizedOverlay = new
68: CustomItemizedOverlay(this.getResources()
69: .getDrawable(R.drawable.marker), MapMarker.this);
70: itemizedOverlay.addOverlay(overlayitem);
71: mapOverlays.add(itemizedOverlay);
72: mapController.animateTo(point);
73: mapController.setZoom(6);
74: }
75:
76: public class MyLocationListener
77: implements LocationListener {
78:
79: @Override
80: public void onLocationChanged(Location loc) {
81: // TODO Auto-generated method stub
82: if (loc != null) {
83: mapOverlays.remove(itemizedOverlay);
84: Toast.makeText(getBaseContext(),"Location
85: changed : Lat: "+ loc.getLatitude()+ " Lng: "
86: +loc.getLongitude(),
87: Toast.LENGTH_SHORT).show();
88: double lat = loc.getLatitude();
89: double longi = loc.getLongitude();
90: pos.setLatitude(lat * 1E6);
91: pos.setLongitude(longi * 1E6);
92: getGeoPointUser(lat, longi);
93: }
94: }
95:
96: @Override
97: public void onProviderDisabled(String arg0) {
98: // TODO Auto-generated method stub
99: }
100: @Override
101: public void onProviderEnabled(String arg0) {
102: // TODO Auto-generated method stub
103: }
104:
105: @Override
106: public void onStatusChanged(String arg0, int arg1, Bundle
107: arg2) {
108: // TODO Auto-generated method stub
109:
110: }
111: }
112:
113: }

After there are no errors, try running it. Wow!! Android is amazing!


Post a Comment

Previous Next

نموذج الاتصال