Custom infowindow in Google map android v2

Question

I am using Google Map API V2 and i have created a custom InfoWindow for a Marker on map.In this InfoWindow i have a button.

My problem is unable to set Onclicklistener/functioning to that Button(Dummy).Any one give me some idea to solve this :

Here is code snippet:

public class MarkerView extends FragmentActivity implements OnMarkerClickListener,OnInfoWindowClickListener{

private GoogleMap mMap;
private Marker chennai;
private View infoWindow;
@Override
protected void onCreate(Bundle arg0) {
    super.onCreate(arg0);
    setContentView(R.layout.basic_demo);

    infoWindow=getLayoutInflater().inflate(R.layout.custom_info_contents, null);

    mMap=((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
    chennai=mMap.addMarker(new MarkerOptions().position(new LatLng(13.0810, 80.274)).anchor(2, 1).title("Android").snippet("Snippet").icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_launcher)));
    mMap.setInfoWindowAdapter(new CustomInfoAdapter());
    mMap.setOnInfoWindowClickListener(null);
    mMap.setOnMarkerClickListener(this);
    Button dummy=(Button) infoWindow.findViewById(R.id.dummy);
    dummy.setVisibility(View.VISIBLE);
    dummy.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            Toast.makeText(MarkerView.this, "Dummy Button", Toast.LENGTH_SHORT).show();

        }
    });
}


class CustomInfoAdapter implements InfoWindowAdapter{


    @Override
    public View getInfoContents(Marker arg0) {
        displayView(arg0);
        return infoWindow;
    }

    @Override
    public View getInfoWindow(Marker arg0) {

        return null;
    }


}


public void displayView(Marker arg0) {

    ((ImageView)infoWindow.findViewById(R.id.badge)).setImageResource(R.drawable.arrow);
    ((ImageView)infoWindow.findViewById(R.id.badge)).setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            Toast.makeText(MarkerView.this, "Arrow Image", Toast.LENGTH_SHORT).show();

        }
    });
     ((TextView)infoWindow.findViewById(R.id.title)).setText(arg0.getTitle());
     ((TextView)infoWindow.findViewById(R.id.snippet)).setText(arg0.getTitle());

}


@Override
public boolean onMarkerClick(Marker arg0) {
    if(arg0.equals(chennai)){

        infoWindow.setClickable(false);

    }
    return false;
}


@Override
public void onInfoWindowClick(Marker arg0) {
    Toast.makeText(MarkerView.this, "Info window", Toast.LENGTH_SHORT).show();
}

Answer 1

Please refer Info window click events in this link

Info window is not a live View, rather the view is rendered as an image onto the map. As a result, any listeners you set on the view are disregarded and you cannot distinguish between click events on various parts of the view. You are advised not to place interactive components — such as buttons, checkboxes, or text inputs — within your custom info window.

Answer 2

You have to implement Custom marker; It is like this:

custommarker.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:background="#ADD8E6"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal" >

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="5dp"
    android:adjustViewBounds="true"
    android:contentDescription="@string/app_name"
    android:src="@drawable/sabarmati" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/snippet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textColor="@android:color/black"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textColor="@android:color/black"
        android:textSize="10sp"
        android:textStyle="bold" />
</LinearLayout>

</LinearLayout>

Activity:

public class PlacesMapActivity extends android.support.v4.app.FragmentActivity
    implements OnClickListener, LocationListener {
/**
 * Note that this may be null if the Google Play services APK is not
 * available.
 */
ImageButton btn_home;
private GoogleMap mMap;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_map);

    SupportMapFragment fragment =   (SupportMapFragment)getSupportFragmentManager()
            .findFragmentById(R.id.map);
    mMap = fragment.getMap();
    mMap.setMyLocationEnabled(true);

    // mMap = ((SupportMapFragment) getSupportFragmentManager()
    // .findFragmentById(R.id.map)).getMap();

    MarkerOptions markerOptions = new MarkerOptions();
    markerOptions.title("First Location");
    markerOptions.snippet("This Is Test Location");

    LatLng latlng = new LatLng(23.0333, 72.6167);

    markerOptions.position(latlng);
    // markerOptions.title("Ahmedabad Cordinat Found here");

    // Marker m = mMap.addMarker(markerOptions);

    ***mMap.setInfoWindowAdapter(new InfoWindowAdapter() {
        @Override
        public View getInfoWindow(Marker arg0) {
            return null;
        }
        @Override
        public View getInfoContents(Marker marker) {
            View myContentView = getLayoutInflater().inflate(
                    R.layout.custommarker, null);
            TextView tvTitle = ((TextView) myContentView
                    .findViewById(R.id.title));
            tvTitle.setText(marker.getTitle());
            TextView tvSnippet = ((TextView) myContentView
                    .findViewById(R.id.snippet));
            tvSnippet.setText(marker.getSnippet());
            return myContentView;
        }
    });***

    mMap.addMarker(new MarkerOptions()
            .position(latlng)
            .title("This is Sabarmati Ashram")
            .snippet("Ahmedabad")
            .icon(BitmapDescriptorFactory
                .defaultMarker(BitmapDescriptorFactory.HUE_RED)));

    mMap.setOnInfoWindowClickListener(new OnInfoWindowClickListener() {

        @Override
        public void onInfoWindowClick(Marker arg0) {
            // TODO Auto-generated method stub
            Intent intent = new Intent(getBaseContext(),
                    DetailsOfPlacesActivity.class);
            startActivity(intent);
        }
    });

    btn_home = (ImageButton) findViewById(R.id.activity_map_ibtn_home);
    btn_home.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            finish();
        }
    });
}
}

Answer 3

UI elements inside InfoWindow that appears on the markers of Google Maps are not clickable. So its better to use custom pop ups.

Answer 4

You cannot click the button, because of the reason explained by @TamiL.
However, you can click the InfoWindow, so, store the ID(s) of the Marker(s) whose InfoWindow(s) should be clickable, add a GoogleMap.OnInfoWindowClickListener to the map like this:

map.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener()
{
    @Override
    public void onInfoWindowClick(Marker marker)
    {
        // Called when ANY InfoWindow is clicked
    }
});

Then, when the onInfoWindowClick is called, compare the clicked Marker's ID with the ones that you stored earlier, and if any of them match, execute whatever code should be executed in the Button's click listener.

You don't have to deal with saving the Marker ID:s if all your Markers' InfoWindows are going to be clickable!

Answer 5

I have build a sample android studio project for this question.

So you can create a Google map v2 Custom Infowindow with clickable buttons or ImageView, etc.,

output screen shots :-

Download full project source code Click here

Please note: you have to add your API key in Androidmanifest.xml