Zachary Powell

Software Programmer

Zachary Powell

Download my CV Send me a Message

Adding custom Markers to Google Map

Zachary Powell - 17/12/2015

At this point, we have quite a nice little Google map application and we can now get the users location and display it on a Google map (see HERE if you have not caught up yet).

Now this works well, but what if we want to display extra data on the map? Perhaps there are locations that we want to highlight to the user. Below we will explore how we can add custom markers to the map and what can be done with them.

Plot marker with default pin

The most basic marker can be added with just a few lines of code.

LatLng position = new LatLng(53.779558, -4.042969);
MarkerOptions markerOption = new MarkerOptions().position(position);

markerOption.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE));
markerOption.title("Marker with default Pin");
mMap.addMarker(markerOption);

First we create the LatLng for the position we want to put the pin in (this is just a random point near England). We can then use the MarkerOptions object to set a few custom options. For the most simple, we can leave this with just the initial code, but we can also change many settings for the Marker – See HERE.

Changing the Icon, we can use the default section of marker colours.

We can also set the title. This is displayed when the user clicks the marker like below.

Screenshot_20151214-114449  Screenshot_20151214-114454

Plot marker with custom image

A great way to customise these pins, is to use our own image for the pin. For example:

private void plotMarkerWithCustomImage(){
    LatLng position = new LatLng(53.784426, -1.735840);
    MarkerOptions markerOption = new MarkerOptions().position(position);

    markerOption.icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_launcher));

    markerOption.title("Marker with custom image");
    mMap.addMarker(markerOption);
}

Gives us the below:

Screenshot_20151214-120522Screenshot_20151214-120526

Plot marker with canvas

Another more complex method, is to use a canvas to display other information in the marker itself. For example:

private void plotMarkerWithCanvas(){
   LatLng position = new LatLng(53.209322, -3.405762);
   MarkerOptions markerOption = new MarkerOptions().position(position);

   Bitmap.Config conf = Bitmap.Config.ARGB_8888;
   Bitmap bmp = Bitmap.createBitmap(80, 80, conf);
   Canvas canvas1 = new Canvas(bmp);

   Paint color = new Paint();
   color.setTextSize(35);
   color.setColor(Color.BLACK);

   canvas1.drawBitmap(BitmapFactory.decodeResource(getResources(),
                R.drawable.ic_launcher), 0,0, color);

   canvas1.drawText("User Name!", 30, 40, color);

   markerOption.icon(BitmapDescriptorFactory.fromBitmap(bmp));

   markerOption.title("Marker with canvas");
   mMap.addMarker(markerOption);
}

Here we create a new Bitmap image and a Canvas on that image. We can then create any custom Bitmap that we want. For example, adding text to the image, or loading another bitmap onto it.

Once created we can use this to set the icon. The above would give us:

Screenshot_20151214-121324 Screenshot_20151214-121328

For the complete example, as always check out the github project HERE. If you have any comments or questions please ask below

 

Leave a Comment

Leave a Reply

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

Tags: , ,

“ Any fool can write code that a computer can understand. Good programmers write code that humans can understand. ”

-Martin Fowler