Google map Android API v2 - InfoWindow on polyline?

Question

I am drawing polyline on my map,I need to show some data to user now.

How I can draw text or InfoWindow on each polyline ?

I add polyline like :

ArrayList<LatLng> points = null;
PolylineOptions lineOptions = null;
MarkerOptions markerOptions = new MarkerOptions();

// Traversing through all the routes
for(int i=0;i<result.size();i++){
    points = new ArrayList<LatLng>();
    lineOptions = new PolylineOptions();
    String color = colors[i % colors.length];
    // Fetching i-th route
    List<HashMap<String, String>> path = result.get(i);

    // Fetching all the points in i-th route
    for(int j=0;j<path.size();j++){
        HashMap<String,String> point = path.get(j);

        double lat = Double.parseDouble(point.get("lat"));
        double lng = Double.parseDouble(point.get("lng"));
        LatLng position = new LatLng(lat, lng);

        points.add(position);
    }

    // Adding all the points in the route to LineOptions
    lineOptions.addAll(points);
    lineOptions.width(5);
    lineOptions.color(Color.parseColor(color));

    // Drawing polyline in the Google Map for the i-th route
    mMap.addPolyline(lineOptions);
}

For example I need to this :

alice_silver_man · Accepted Answer · 2016-10-06T19:44:34.397

I do this by creating an invisible marker on the polyline and then showing its info window. For example:

//use a transparent 1px & 1px box as your marker
BitmapDescriptor transparent = BitmapDescriptorFactory.fromResource(R.drawable.transparent);
MarkerOptions options = new MarkerOptions()
                .position(new LatLng(someLatitide, someLongitude))
                .title(someTitle)
                .snippet(someSnippet)
                .icon(transparent)
                .anchor((float) 0.5, (float) 0.5); //puts the info window on the polyline

Marker marker = mMap.addMarker(options);

//open the marker's info window
marker.showInfoWindow();

Update to include general approach to touching the polyline and opening an info window: 1. Implement an OnMapClickListener 2. On an onMapClick event, determine whether the user has touched the polyline. I do this by storing the polyline points in a quadtree and searching the quadtree for the closest point from where the user touched the screen. If the distance is within a certain threshold (i.e. close to the polyline), create the invisible marker referenced above and open its info window. If the touch is not within the threshold, ignore the onMapClick event. 3. On the next onMapClick event delete the previously created invisible marker so you do not have a bunch of invisible markers taking up memory. Hope that helps.

I don't need to set info on marker I need to set on polyline like google map android. — , Oct 06 '16 at 06:03
I understand that, but there is not a built-in way to do it, so you have to use some other approach like creating an invisible marker on the polyline and opening its info window so that it looks like you have opened an info window for the polyline. See my revised answer above. — alice_silver_man, Oct 06 '16 at 19:45
I have tried it but it shows only one infoWindow at a time. where as we need all three infoWindow should open at the same time — NetDemo, Nov 03 '16 at 07:09

score 0 · Answer 2 · answered Dec 09 '17 at 07:14

Use Google Direction API to get the route and draw the polyline

Add OnPolylineClickListener in Map and get the reference using getTag

mMap.setOnPolylineClickListener(new GoogleMap.OnPolylineClickListener() {
    @Override
    public void onPolylineClick(Polyline polyline) {
        Log.e("Polyline position", " -- " + polyline.getTag());
        onButtonShowPopupWindowClick("  " + polyline.getTag());
    }
});

Set any reference in polyline using setTag method

            Polyline line = mMap.addPolyline(lineOptions);
            line.setTag("" + i);
            line.setClickable(true);

Open PopupWindow in polyline click

public void onButtonShowPopupWindowClick(String count) {

String[] timeDistance = count.split(",");

// get a reference to the already created main layout
LinearLayout mainLayout = (LinearLayout)
        findViewById(R.id.whole_layout);

// inflate the layout of the popup window
LayoutInflater inflater = (LayoutInflater)
        getSystemService(LAYOUT_INFLATER_SERVICE);
View popupView = inflater.inflate(R.layout.polyline_window, null);

((TextView) popupView.findViewById(R.id.time)).setText("30 mins");
((TextView) popupView.findViewById(R.id.distance)).setText("20 km");

// create the popup window
int width = LinearLayout.LayoutParams.WRAP_CONTENT;
int height = LinearLayout.LayoutParams.WRAP_CONTENT;
boolean focusable = true; // lets taps outside the popup also dismiss it
final PopupWindow popupWindow = new PopupWindow(popupView, width, height, focusable);

// show the popup window
popupWindow.showAtLocation(mainLayout, Gravity.CENTER, 0, 0);

// dismiss the popup window when touched
popupView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        popupWindow.dismiss();
        return true;
    }
});

}

score 0 · Answer 3 · answered May 30 '18 at 20:14

Ultimate solution by Hiren Patel

I have done with easiest way like below:

private GoogleMap mMap;

While adding marker on Google Map:

LatLng mLatLng = new LatLng(YourLatitude, YourLongitude); 

//transparent 1x1 drawable 
BitmapDescriptor transparent = BitmapDescriptorFactory.fromResource(R.drawable.transparent_box_1dp); 

// add marker 
mMap.addMarker(new MarkerOptions().position(mLatLng).title("My Title").snippet("My Snippet"+"\n"+"1st Line Text"+"\n"+"2nd Line Text"+"\n"+"3rd Line Text").icon(transparent);

After that put below code for InfoWindow adapter on Google Map, in onMapReady() if you want:

mMap.setInfoWindowAdapter(new GoogleMap.InfoWindowAdapter() {

      @Override
      public View getInfoWindow(Marker arg0) {
         return null;
      }

      @Override
      public View getInfoContents(Marker marker) {

        LinearLayout info = new LinearLayout(mContext);
        info.setOrientation(LinearLayout.VERTICAL);

        TextView title = new TextView(mContext);
        title.setTextColor(Color.BLACK);
        title.setGravity(Gravity.CENTER);
        title.setTypeface(null, Typeface.BOLD);
        title.setText(marker.getTitle());

        TextView snippet = new TextView(mContext);
        snippet.setTextColor(Color.GRAY);
        snippet.setText(marker.getSnippet());

        info.addView(title);
        info.addView(snippet);

      return info;
    }
});

Google map Android API v2 - InfoWindow on polyline?

3 Answers3

Linked