Custom infowindow with google maps api v2

Question

I can customize the content of the infoWindow with a simple block of code:

 private GoogleMap mMap;
 mMap.setInfoWindowAdapter(new InfoWindowAdapter() {

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

        @Override
        public View getInfoContents(Marker arg0) {

            View v = getLayoutInflater().inflate(R.layout.custom_infowindow, null);
            return v;

        }
    });

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#55000000" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="HELLO"
        android:textColor="#FF0000"/>

</LinearLayout>

But this changes only the content and not the infoWindow itself. It still stays white with a small shadow on the bottom and now a red HELLO text is visible with black bg. I want to change this default infoWindow to a transparent black rectangle. How can I do this?

enter image description here

Maybe this could lead somewhere https://developers.google.com/maps/documentation/android/reference/com/google/android/gms/maps/GoogleMap.InfoWindowAdapter — Alkis Kalogeris, May 01 '13 at 12:20
This should suffice http://wptrafficanalyzer.in/blog/customizing-infowindow-contents-in-google-map-android-api-v2-using-infowindowadapter/ . It's a complete tutorial. — Alkis Kalogeris, May 01 '13 at 12:22
@alkis it's the same tutorial I used. If you take a closer look at the screenshot you'll see that it's the default InfoWindow but with a custom content — erdomester, May 01 '13 at 12:34
Dgawal: No. I want to customize the window. Right now it's white with a gray rectangle inside. — erdomester, May 10 '13 at 19:35
Hope this helps you http://stackoverflow.com/questions/16518338/how-to-put-drawable-as-a-background-on-infowindow-google-maps-api-v2-for-androi — KK_07k11A0585, Aug 16 '13 at 07:44

score 35 · Answer 1 · answered Aug 14 '13 at 09:19

35

you have to write your code in getInfoWindow method. so you can customize info window. e.g.

@Override
public View getInfoWindow(Marker marker) {

    // Getting view from the layout file
    View v = inflater.inflate(R.layout.map_popup, null);

    TextView title = (TextView) v.findViewById(R.id.title);
    title.setText(marker.getTitle());

    TextView address = (TextView) v.findViewById(R.id.distance);
    address.setText(marker.getSnippet());

    return v;
}

@Override
public View getInfoContents(Marker arg0) {
    // TODO Auto-generated method stub
    return null;
}

answered Aug 14 '13 at 09:19

Ankit Sharma

1,261
2
13
15

2

This is the correct answer, must use getInfoWindow not not use the default white box. – jb15613 Dec 16 '13 at 19:02
You need to setInfoWindowAdapter() right after map.addMarker() method for this to take effect. Do not call setInfoWindowAdapter() in onMarkerClick(). – Melbourne Lopes Jan 23 '14 at 09:45
i would recommend inflating the view before calling the function, and only change relevant info when getInfoWindow() is called – Dan Levin May 07 '14 at 10:37

Dhaval Parmar · Answer 2 · 2013-05-02T04:44:51.313

10

enter image description here

use this way...

myMap.setInfoWindowAdapter(new InfoWindowAdapter() {

                @Override
                public View getInfoWindow(Marker arg0) {

                    ContextThemeWrapper cw = new ContextThemeWrapper(
                            getApplicationContext(), R.style.Transparent);
                    // AlertDialog.Builder b = new AlertDialog.Builder(cw);
                    LayoutInflater inflater = (LayoutInflater) cw
                            .getSystemService(LAYOUT_INFLATER_SERVICE);
                    View layout = inflater.inflate(R.layout.custom_infowindow,
                            null);
                    return layout;
                }

                @Override
                public View getInfoContents(Marker arg0) {

                    return null;

                }
            });

R.style.Transparent add this in your style.xml

<style name="Transparent" parent="android:Theme.Light">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:backgroundDimEnabled">false</item>
    </style>

    <color name="transparent">#00000000</color>

Edited:

custom_infowindow.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FF0000"
        android:text="HELLO" />

</LinearLayout>

edited May 02 '13 at 04:44

answered May 01 '13 at 12:49

Dhaval Parmar

18,812
8
82
177

This doesn't change anyhing. I get the same output as before. However, I see it is working for you. I removed all the styles but in vain... – erdomester May 01 '13 at 20:54
@erdomester: i have added custom_infowindow.xml in my answer.. just use all my code insted of yours... and tell me its working or not.. – Dhaval Parmar May 02 '13 at 04:45
I still get the default layout with the red HELLO: http://www.2shared.com/photo/lBOzOHMz/hello.html I am testing on 2.3.5 – erdomester May 04 '13 at 18:14
@Dhawal Sodha Parmar Your answer is great Thank you so much.But can you please tell me diffrence between these two methods:1. public View getInfoWindow(Marker arg0) {} and 2. public View getInfoContents(Marker arg0) {} – AndiM Jun 17 '14 at 11:19
@AndiM: check these: http://stackoverflow.com/questions/17253019/difference-between-getinfowindow-and-getinfocontents-in-googlemaps-v2-for-an – Dhaval Parmar Jun 17 '14 at 11:24
Thank you @Dhawal Sodha Parmar – AndiM Jun 17 '14 at 12:20
@Dhawal Sodha Parmar I have One more question.Can you please tell me how to respond to Click listener of view inside CustomInfoWindow instead of onInfoWindowCLicklistener? – AndiM Jun 17 '14 at 12:26

score 1 · Answer 3 · answered May 01 '13 at 12:26

Try this...I have change little bit of your code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 >

   <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="#80000000" 
    >

    <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content" 
     android:text="HELLO"
     android:textColor="#FF0000"
     android:padding="10dp"/>

   </LinearLayout> 

</LinearLayout>

Also change this...

 mMap.setInfoWindowAdapter(new InfoWindowAdapter() {

        public View getInfoWindow(Marker arg0) {
            View v = getLayoutInflater().inflate(R.layout.custom_infowindow, null);
            return v;
        }

        public View getInfoContents(Marker arg0) {

            //View v = getLayoutInflater().inflate(R.layout.custom_infowindow, null);

            return null;

        }
    });

I hope it will work...:)

@erdomester-my code will display transparent black rectangle.I have test.Have you test? — TheFlash, May 01 '13 at 12:42
Of course I tested it. I even removed all styles from styles.xml. — erdomester, May 01 '13 at 20:53
@erdomester-ok thank you for reply...may be there is some other issue..! — TheFlash, May 02 '13 at 04:14

score 1 · Answer 4 · answered Jan 23 '14 at 09:46

1

You need to setInfoWindowAdapter() right after map.addMarker() method for this to take effect. Do not call setInfoWindowAdapter() in onMarkerClick().

answered Jan 23 '14 at 09:46

Melbourne Lopes

4,817
2
34
36

Custom infowindow with google maps api v2

4 Answers4

Linked