Android Google Map API V2 : Open Custom Info Window on Right Side of Marker

Bhavesh Patadiya picture Bhavesh Patadiya · May 3, 2013 · Viewed 15.1k times · Source

I have Integrated Google MAP API V2 for Android. I want to have a Custom Info Window at Onclick of My Marker. Up to that it is fine. i have integrate it.

What I want : I want to Show my Custom Info Window on Right Side of Marker Instead of Top of the Marker.

Below is the Code I am Using :

public class MainActivity extends FragmentActivity {

    private MainMapFragement mapFragment;
    private HashMap<Marker, EventInfo> eventMarkerMap;


    Marker ThirdMarker;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mapFragment = new MainMapFragement();
        // FragmentTransaction ft = getFragmentManager().beginTransaction();
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.add(R.id.map, mapFragment);
        ft.commit();

    }

    @Override
    protected void onStart() {
        super.onStart();
        setUpEventSpots();
    }

    private void setUpEventSpots() {
        // I'm going to make 2 EventInfo objects and place them on the map
        EventInfo firstEventInfo = new EventInfo(new LatLng(50.154, 4.35),
                "Right now - event", new Date(), "Party");
        EventInfo secondEventInfo = new EventInfo(new LatLng(51.25, 4.15),
                "Future Event", new Date(1032, 5, 25), "Convention");

        EventInfo thirdEventInfo = new EventInfo(new LatLng(23.25, 72.15),
                "Our Next Event", new Date(), "Ahmedabad-India");
        // this date constructor is deprecated but it's just to make a simple
        // example

        Marker firstMarker = mapFragment.placeMarker(firstEventInfo);
        Marker secondMarker = mapFragment.placeMarker(secondEventInfo);
        ThirdMarker = mapFragment.placeMarker(thirdEventInfo);
        eventMarkerMap = new HashMap<Marker, EventInfo>();
        eventMarkerMap.put(firstMarker, firstEventInfo);
        eventMarkerMap.put(secondMarker, secondEventInfo);
        eventMarkerMap.put(ThirdMarker, thirdEventInfo);

        // add the onClickInfoWindowListener
        mapFragment.getMap().setOnInfoWindowClickListener(
                new OnInfoWindowClickListener() {

                    @Override
                    public void onInfoWindowClick(Marker marker) {
                        EventInfo eventInfo = eventMarkerMap.get(marker);
                        Toast.makeText(
                                getBaseContext(),
                                "The date of "
                                        + eventInfo.getName()
                                        + " is "
                                        + eventInfo.getSomeDate()
                                                .toLocaleString(),
                                Toast.LENGTH_LONG).show();

                    }
                });



        // Custom Bhavesh
        mapFragment.getMap().setInfoWindowAdapter(new InfoWindowAdapter() {

            private final View window = getLayoutInflater().inflate(
                    R.layout.ballonoverlly, null);

            @Override
            public View getInfoWindow(Marker marker) {
                EventInfo eventInfo = eventMarkerMap.get(marker);

                String title = marker.getTitle();
                TextView txtTitle = ((TextView) window
                        .findViewById(R.id.textview_name));
                if (title != null) {
                    // Spannable string allows us to edit the formatting of the
                    // text.
                    SpannableString titleText = new SpannableString(title);
                    titleText.setSpan(new ForegroundColorSpan(Color.RED), 0,
                            titleText.length(), 0);
                    txtTitle.setText(titleText);
                } else {
                    txtTitle.setText("");
                }

                // TextView txtType = ((TextView) window
                // .findViewById(R.id.textview_aboutme));
                // if (eventInfo.getType() != null)
                // txtType.setText(eventInfo.getType());

                return window;
            }

            @Override
            public View getInfoContents(Marker marker) {
                // this method is not called if getInfoWindow(Marker) does not
                // return null
                return null;
            }
        });
    }

}

xml file :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RlMain"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >


    <LinearLayout
        android:id="@+id/imageview_comment"
        android:layout_width="150dp"
        android:layout_height="62dp"
        android:background="@drawable/map_comment_back"
        android:gravity="center_vertical"
        android:orientation="vertical"
        android:scaleType="fitXY"
        android:visibility="visible" >

        <TextView
            android:id="@+id/textview_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:text="Bhavesh Patadiya"
            android:textColor="#FFFFFF"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/textview_aboutme"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:maxLines="2"
            android:text="How&apos;s Going?"
            android:textColor="#FFFFFF"
            android:textStyle="normal" />
    </LinearLayout>
</LinearLayout>

Below is the Screen Shot of What I am getting : enter image description here

Now , I want to have my custom InfoWindow to the Right Side of the Marker instead of Top.

All Helps are Appreciated.

Thanks in Advance.

Answer

MaciejG&#243;rski picture MaciejGórski · May 3, 2013

Edit 2:

Starting from September update (v12 or 3.2.65) of the Google Maps Android API v2 MarkerOptions.infoWindowAnchor was added. There are quite a few new functions, so check release notes too.

Edit 3:

Unfortunatelly this addition doesn't solve your problem yet. Added new issue for that.


This is not currently possible.

Trying to work around it by putting a View over MapFragment can be a good solution if users are not allowed to move the map. If they can, you will see some bad lags on repositioning when using either "push techonology" onCameraChange or polling with Handler and map.getCameraPosition().

Same problems if you try to use additional marker with transparent icon to show info window on when the visible is clicked, but it would be more fun to see it actually implemented.

If you can live without info window on the right for now, I would suggest starring this feature already requested and waiting.

Edit:

As of 3.1.36 (rev. 7) of the API v2 you can change the icon of marker. This means you can make two icons: one normal, and another that looks like you have an info window open on the right. Disabling opening default info window and using this instead might work for you.