How to detect a click on a polyline

Question

If there is a polyline on googlemap and a click is performed on the map, then how can I check whether that click was on polyline or somewhere else?

Polyline line = googleMap.addPolyline(new PolylineOptions()
       .add(new LatLng(51.2, 0.1), new LatLng(51.7, 0.3))
       .width(5)
       .color(Color.RED));

googleMap.setOnMapLongClickListener(new OnMapLongClickListener() {          

    }
});

Antionetteantioxidant

can you please post some code ? – Searles

@Haresh I am trying to check polyline click through mapclicklistener as I found no particular method for polyline click in it's documentation – Antionetteantioxidant

Answer 1

Unfortunately there's no such thing as a polyline click listener so you'll have to listen to clicks on map and check if a click was registered on any of your polylines. You'll also have to save references to the polylines you added to your map.

Here's an example that calculates if there's a polyline ~100meters away from the click.

mMap.setOnMapClickListener(new GoogleMap.OnMapClickListener() {
    @Override
    public void onMapClick(LatLng clickCoords) {
        for (PolylineOptions polyline : mPolylines) {
            for (LatLng polyCoords : polyline.getPoints()) {
                float[] results = new float[1];
                Location.distanceBetween(clickCoords.latitude, clickCoords.longitude,
                        polyCoords.latitude, polyCoords.longitude, results);

                if (results[0] < 100) {
                    // If distance is less than 100 meters, this is your polyline
                    Log.e(TAG, "Found @ "+clickCoords.latitude+" "+clickCoords.longitude);
                }
            }
        }
    }
});

Once a polyline is found you can save that distance as float minDistance; and then loop through other polylines to check if there is a closer one.

To make this more precise you can get the zoom level at each touch and multiply your required distance. Like 100 * (22 - mMap.getCameraPosition().zoom) (you need to use bigger distance at lower zoom levels).

Good luck!

Schistosome

Answer 2

The most recent Google Maps API now includes polylines click listener. You need to be using 8.4+. In gradle file:

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

Setup map polyline listener:

googleMap.setOnPolylineClickListener(new GoogleMap.OnPolylineClickListener() 
{
    @Override
    public void onPolylineClick(Polyline polyline)
    {
        //do something with polyline
    }
});

Polyline needs to be clickable for the listener to work.

PolylineOptions line = new PolylineOptions();
//add path points, set colour, etc. here
Polyline polyline = googleMap.addPolyline(line);
polyline.setClickable(true);

Sulphonate

This is the best solution +1. I was missing the setClickable. – Aho

@S.K, in case of multiple routes, If user clicked on specific poly-line i want to change the red color of route(poly-line) and show it on top as well (somethings like z-Index) and other routes(poly-lines) are in gray color with beside the clicked poly-line. – Whitefish

So with this solution, sometimes the click works, but sometimes it asks me if I want to open the point in Google maps. Any suggestions for that? – Reluct

Answer 3

The solution above doesn't work correctly. Especially if we have large distance between two points of polyline.

I answered this question: Clickable Polylines Google Maps API Android

We can modify code above like this:

mMap.setOnMapClickListener(new GoogleMap.OnMapClickListener() {
@Override
public void onMapClick(LatLng clickCoords) {
        for (PolylineOptions polyline : mPolylines) {
            if (PolyUtil.isLocationOnPath(clickCoords, polyline.getPoints(), true, 100)) {
                // user clicked on polyline
            }
        }
    }
});

Justice

Answer 4

Jetpack compose answer

Using Jetpack Compose this is really simple, you just need to add two elements onclick and clickable=true. Check the example bellow:

Polyline(
    waypoints,
    color = Color.Black,
    width = 25f,
    geodesic = true,
    clickable = true,
    onClick = {
        Log.d("wowow", "clicked polyline")
    }
)

The google maps compose library:

implementation "com.google.maps.android:maps-compose:2.8.0"

Tolland