How do you rate this blog

Tuesday, October 4, 2011

Creating a Simple Google Map Application - Part 2

Logic of Developing a Gmap Application –
1) First we need to include the google libraries since it is not part of Android libraries.
2) We need to enable internet access to this application inorder to retrieve the google map.
3) Create a View file which will create the map view using your API key.
4) Then create a java code which will extend the Mapactvity.
As you see the logic is simple :).

Now create a new project in Eclipse by clicking on New option in the File and click on Others.
Once you do the above, you can see a selection called Android, expand the selection and click on Android Project as shown below


After the above step click on the Next, then provide the Project Name, in the Build Target select Google API s as shown in the Image below. Provide the package name and click on Finish.



Once these are done your folder structure will look like in the image shown below.




Now that we have created the project, we can build upon the logic which we have mentioned above.
1) Including Google libraries:
We need to first make the app use google libraries, inorder to do that open AndroidManifest.xml 
and add <uses-library android:name="com.google.android.maps" />  inside the application tag of 
the xml.
 
2) Enabling Internet access:
To make the app able to access internet to download the map tiles, you need to add the following 
code outside the application tag.
 
<uses-permission android:name="android.permission.INTERNET" />
 
Once done the AndroidManifest.xml looks like the image shown below.
 
 

3) Creation of Map View:
We need to create a View which will display the map, so go to res and replace the existing code with the code below
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainlayout"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <com.google.android.maps.MapView
        android:id="@+id/mapview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:apiKey="<Your API Key>"
    />
</RelativeLayout>

In the above code we have made the layout as relative and we have set the rootnode as MapView. Make sure you add your api key in the code.
4) To define the Activity :
Go to the folder “src” and click on the package name  and then open the java file under this package.
a) As you can see there will be a default code present in it. The class will extend Activity by default, but since we are dealing with maps it should be changed to MapActivity.
b) Then set the content to Main setContentView(R.Layout.Main) which will load the layout with the mapview.
c) After we have set the layout, we will have to instantiate the mapview class after which we can set the zoom controls. The code for which is given below.
mapV=(MapView) findViewById(R.id.mapview)
mapv.builtInZoomControls(true);

d) Then we will set a GeoPoint so that when the app starts it points to some location at zoom level 12 using the mapcontroller.
GeoPoint=new GeoPoint(<your choice>, <your choice>);
mController=mapV.getController();
mController.animateTo(GeoPoint);
mController.setZoom(12);
So the final code will look the image shown below.



Phew we have completed the coding of the app, well it was easy :) to be frank. Now we would like to run the app and see how it works. Before you do that we wil need to have an emulator.  AVD Creation will show how to create an AVD.

Once you are done with it, right click on the project and click on Run As and then click on Android Application and it will start the AVD and install the apk on the emulator. The result in the emulator is shown below.


Well congrats your first app has started ;). Some of you might get grey tiles problem which we will be debugging in the next part. Untill then Adios!

2 comments: