In this tutorial I am going to show you how to add a map with markers into your android application, in an easy and scalable way.

The configuration of the manifest, of the build,gradle file to the development of the MapActivity will be explained step by step.

All the source code is commented so it should be pretty easy to understand, but if you don’t please let me know to correct it!

 

Step 1: Configuration build.gradle file

In order to use a map and the GPS in your project, you need to add 2 dependencies in your build.gradle file.

 
   compile 'com.google.maps:google-maps-services:0.1.3'
   compile 'com.google.android.gms:play-services:6.5.87'

 
Screen Shot 2015-03-27 at 14.11.50

Here is what my build.gradle file looks like so far: The default one with the 2 dependencies added.

Sync your project to allow gradle to download and add them into your project.

 

Step2: Configuration of the Manifest file

In order to use the map and get the information of the user location, you need several permissions, which you must add into the manifest file:

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

<permission
       android:name="com.tutomap.permission.MAPS_RECEIVE"
       android:protectionLevel="signature"/>
   <uses-permission android:name="com.tutomap.permission.MAPS_RECEIVE"/>

   <!-- Maps API needs OpenGL ES 2.0. -->
   <uses-feature
       android:glEsVersion="0x00020000"
       android:required="true" />

Screen Shot 2015-04-08 at 11.21.31
Screen Shot 2015-04-08 at 11.25.14

You also need to provide your google API key into the application balise.

Here we are, now you have the permissions what you need to display a map, the user location in real time and much more thanks to Google Map features!

Let’s do some code now!

 

Step3: Creation of the view.

Create a layout containing a mapView, which gonna be your awesome map. Obviously, you can customize this layout. I am going to do it with the strict necessary for this time.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”match_parent”

android:layout_height=”match_parent” >

 

<com.google.android.gms.maps.MapView

android:id=”@+id/location_map”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent” />

</RelativeLayout>

 

Screen Shot 2015-03-27 at 14.14.30

 

If you have an error in adding the MapView, it is because the play service dependency has not been added correctly. If so, you should have got an error when you sync your project after adding the dependencies. It might be because of the version of the service used.

 

Step3: The Java code

 

Screen Shot 2015-04-08 at 11.41.04

My activity inherits from the GeoLocationActivity, what I created myself, and you can find here. It is not really required for the functioning of the activity, I use it to get the user position in real time and store his longitude and latitude, what I use in this activity to display a place on the map.

You are not required to use it. If you don’t, you just need to extend from Activity and you will need to fill the longitude and the latitude in a different way what I do.

The activity implements OnInfoWindowsClickListener interface in order to the information about the marker clicked by the user. I will explain the methods, which need to be implemented a little bit later.

In the OnCreate of the activity, the map gets initialized.

The interesting part starts now!

 

Screen Shot 2015-04-08 at 11.40.24

The setUpMap method initializes the map with the information related to the user, the markers and the camera.

       _gmap.getUiSettings().setMyLocationButtonEnabled(true);

The Boolean given in parameter determine if you want to get the button in the corner of the map in order to enable or disable the my-location button.

In this case, I enable the button.

_gmap.setMyLocationEnabled(true);

Enable of disable the blue dot related to the user position.

 

BitmapDrawable bitmapDrawable = (BitmapDrawable) getResources().getDrawable(R.drawable.pin); // file stored in /res/drawable/

       Bitmap bitmap = bitmapDrawable.getBitmap();

       _littlePin = Bitmap.createScaledBitmap(bitmap, 96, 96, false); // 96/96px

Creation of the marker, from a drawable. Here I define its size dynamically (96x96px).

       _gmap.setOnInfoWindowClickListener(this);

Add the markers listener on the map.

       // here the _lat and _long should be the user of this cafe, at the moment I am using the one of the user
       this.addMarker("Cafe", "Best cafe", new LatLng(_latitude, _longitude));

 

 

     /**
     * Add markers on the map view
     * @param title title of place / marker
     * @param description short description
     * @param position geoposition, LatLng object, filled with latitude and longitude
     */

   private void addMarker(String title, String description, LatLng position)
   {
       _gmap.addMarker(new MarkerOptions()
               .position(position)
               .title(title)
               .snippet(description)
               .icon(BitmapDescriptorFactory.fromBitmap(_littlePin)));
   }

The method addMarker adds a marker on a map, given the information in parameters.

It needs the position of the place, under a LatLng object, the title of your place, a short description and my custom icon in my case.

You can customize the parameters; I invite you to take a look to the android guide about marker here.

As said before, I am using the position of the user (_latitude, and_longitude) as the position of the place. So the user will be at the same position of the place.

(The user position is getting from my GeolocationActivity.)

CameraUpdate cameraUpdate = CameraUpdateFactory.newLatLngZoom(new LatLng(_latitude, _longitude), 13);

       _gmap.animateCamera(cameraUpdate); // zoom effect

Add the zoom on a given position. Here again, the user position is used.

The last parameter of the newLatLngZoom method is the scale of the zoom. You can customise it dynamically in function of the markers in your map in order to see all of them without zooming again.

In implementing the OnInfoWindowsClickListener interface you will need to implement the method OnInfoWindowClick, which takes in parameter the marker clicked by the user.

In my case I just log the name of this marker, but you can customize it as you wish.

Do not forget to override the onResume, onDestroy and onLowMemory methods; the map needs to know about these events.

Screen Shot 2015-04-08 at 11.59.44

Compile the project and run it!

Here we are, now you have a beautiful map with a market on it!

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>