Custom InfoWindow marker with data on Android

3

I'm making an android application that has a map in which clicking on a marker shows the infowindow as follows:

But I need the infowindow to look like this and not do it:

How can I do it? Some example? Thanks

    
asked by Lina Cortés 27.09.2016 в 21:26
source

1 answer

8

You can check the official documentation

To do this you must create a layout with what you want to appear in your infoWindow, as an example infowindow_layout.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/info_window_imagen"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:scaleType="centerCrop"
        android:src="@drawable/imagen_default" />

    <TextView
        android:id="@+id/info_window_nombre"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@id/info_window_imagen"
        android:paddingLeft="5dp"
        android:text="Carlo Estrada Solano" />

    <TextView
        android:id="@+id/info_window_placas"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:textSize="20sp"
        android:layout_below="@id/info_window_nombre"
        android:layout_toRightOf="@id/info_window_imagen"
        android:paddingLeft="5dp"
        android:text="Placas: SX5487" />

    <TextView
        android:id="@+id/info_window_estado"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/info_window_placas"
        android:layout_toRightOf="@id/info_window_imagen"
        android:paddingLeft="5dp"
        android:text="Estado: Activo" />

</RelativeLayout>

you would have something similar to:

You create a class that extends from InfoWindowAdapter which will load the previous layout:

public class CustomInfoWindowAdapter implements InfoWindowAdapter{

    private static final String TAG = "CustomInfoWindowAdapter";
    private LayoutInflater inflater;

    public CustomInfoWindowAdapter(LayoutInflater inflater){
        this.inflater = inflater;
    }

    @Override
    public View getInfoContents(final Marker m) {
        //Carga layout personalizado.
        View v = inflater.inflate(R.layout.infowindow_layout, null);
        String[] info = m.getTitle().split("&");
        String url = m.getSnippet();
        ((TextView)v.findViewById(R.id.info_window_nombre)).setText("Lina Cortés");
        ((TextView)v.findViewById(R.id.info_window_placas)).setText("Placas: SRX32");
        ((TextView)v.findViewById(R.id.info_window_estado)).setText("Estado: Activo");      
        return v;
    }

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

}

Finally to load the custom infoWindow, to your GoogleMap instance using the method setInfoWindowAdapter() you assign the InfoWindowAdapter customized.

myGoogleMap.setInfoWindowAdapter(new CustomInfoWindowAdapter(LayoutInflater.from(getActivity())));

With this you will get what you want to show a custom infoWindow when you click on the map marker.

    
answered by 27.09.2016 / 23:14
source