Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom infowindow with google maps api v2

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

like image 323
erdomester Avatar asked May 01 '13 11:05

erdomester


People also ask

How do I edit InfoWindow on Google Maps?

To customize the info window in Classic: Click Visualize > Map. Click the "Configure info window" link above the map and select the template to use.

How do I change the background color of InfoWindow in Google Maps?

addListener(marker, 'mouseover', function() { infoWindow. setContent(html); infoWindow. open(map, marker); //infoWindow. setStyle("background-color: red"); });

How do I add buttons to InfoWindow?

addListener(marker, 'click', function() { infowindow. setContent('<p>Event Name: '+this. title+'</p>' + '<p>Event Type: '+this. etype+'</p>' + '<p>Cause: '+this.


1 Answers

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;
}
like image 50
Ankit Sharma Avatar answered Nov 14 '22 11:11

Ankit Sharma