Arrow Mark over Polyline in Android Google Route Map

Question

how to show Arrowheads over Polyline in Android Google map v2

I have gone through couple of links , most of them gives link to JS https://google-developers.appspot.c

Answer 1

In the Google Maps API v2 Demo there is a MarkerDemoActivity class in which you can see how a custom Image is set to a GoogleMap. You could use a marker to show the arrowhead like this:

// First you need rotate the bitmap of the arrowhead somewhere in your code
Matrix matrix = new Matrix();
matrix.postRotate(rotationDegrees);
// Create the rotated arrowhead bitmap
Bitmap arrowheadBitmap = Bitmap.createBitmap(originalBitmap, 0, 0,
                      width, height, matrix, true);
// Now we are gonna to add a marker
mArrowhead = mMap.addMarker(new MarkerOptions()
.position(POSITION)
.icon(arrowheadBitmap));

Some clarifications: When you are drawing a route, or if you simply got two points to draw, to get the rotationDegrees you can get them by doing this:

rotationDegrees = Math.toDegrees(Math.atan2(originLat-destinyLat, originLon-destinyLon));

The classic rotation game algorithm :D

Be sure of that you arrowhead image is pointing up. Note that if you don't want to use an Image to show the arrowhead and instead of that, you want use only Polylines, you can achieve that by taking the last LatLng point (where you are going to display the arrowhead) and use a translation algorithm by 45º to draw the two lines that make the arrowhead.

Answer 2

Recently, Google implemented this feature for polylines in Google Maps Android API v2.

They added the ability to customize the start and end caps of polylines with a custom bitmap. Using this, you will be able to add arrowheads to your polylines.

See information about Line Caps in the Shapes Guide. See an example in the Polylines and Polygons tutorial.

You can also read the corresponding blog post here:

https://maps-apis.googleblog.com/2017/02/styling-and-custom-data-for-polylines.html