6

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.com/maps/documentation/javascript/examples/overlay-symbol-arrow but I need in Android not JS and I can't use those codes in Android

Some are using MapActivity I followed a tutorial to creat map activity too https://developers.google.com/maps/documentation/android/v1/hello-mapview but it didnt work I can't generate the mapactivity and thus i couldn't use the locationoverlays

i have also got some posts commenting as it is available in v3 but for now my requirement is in v2

this question has been asked lot many times here i know but still i couldn't find any proper answer

how can i show a arrowhead over the polyline to show the direction where i am supposed to go

any examples or tutorials will be very helpful.

thanks

xomena
  • 31,125
  • 6
  • 88
  • 117
Ari
  • 1,296
  • 1
  • 18
  • 36
  • 2
    Possible duplicate of [How to create direction arrows for my polylines in android](https://stackoverflow.com/questions/38202109/how-to-create-direction-arrows-for-my-polylines-in-android) – ByteSlinger Mar 21 '18 at 17:41

2 Answers2

3

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.

4gus71n
  • 3,717
  • 3
  • 39
  • 66
  • 1
    This works almost perfectly. The problem is that the bottom of the bitmap starts at the position you specify, so the arrow appears slightly above the line. It looks like this almost <____ instead of <---. Any solutions? – Kartik_Koro Jun 05 '14 at 08:36
  • 1
    when you adding marker you can mark displacement. marker.setAnchor(0.5f, 0f); just play with variables – Alpha Apr 07 '15 at 14:58
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

xomena
  • 31,125
  • 6
  • 88
  • 117