Monday, July 28, 2014

GoogleMap Custom Tooltip for Android with InfoWindowAdapter

When we are using Google Map services for Android application most of the times clients are expecting custom tooltips (markers contents) with more details and with more HTML formatting. This is a headache to developers. This post is describing a how to on this.

First create an layout xml file and place it under res > layout. This post is using a layout called "marker_window" as below. Goal hear is to view an HTML formatted detailed marker window with a name, address and some date value.
marker_window.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:orientation="vertical">

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/address"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />       

    <TextView
        android:id="@+id/report_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
   
    <TextView
        android:id="@+id/report_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

This post assumes your map service activity is MapServiceActivity and google map instance is googleMap.
Add below code snippet in the MapServiceActivity wherever it needs to be refreshed(of course in the onCreate)
if (googleMap == null) {  
  googleMap = ((SupportMapFragment)getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
  //if  you are using MapFragment instead of SupportMapFragment, alter the code appropriately,
  //googleMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap(); 
}
googleMap.clear();

googleMap.setInfoWindowAdapter(new InfoWindowAdapter() {
  
  @Override
  public View getInfoWindow(Marker marker) {
    // TODO Auto-generated method stub
    return null;
  }
  
@Override
public View getInfoContents(Marker marker) {
    View view = getLayoutInflater().inflate(R.layout.marker_window,null);
    TextView locationView = (TextView)view.findViewById(R.id.name);
    TextView addressView = (TextView)view.findViewById(R.id.address);
    TextView dateView = (TextView)view.findViewById(R.id.report_date);
    TextView timeView = (TextView)view.findViewById(R.id.report_time);
   
    String formatLocator = "<b>Locator:</b> "+name;
    String formatAddress = "<b>Address:</b> "+addressText;
    String formatDate = "<b>Report date:</b> "+reportDate;
    String formatTime = "<b>Report time:</b> "+reportTime;
    //Likewise you can introduce some HTML formatting to the content
   
    locationView.setText(Html.fromHtml(formatLocator));
    addressView.setText(Html.fromHtml(formatAddress));
    dateView.setText(Html.fromHtml(formatDate));
    timeView.setText(Html.fromHtml(formatTime));
   
    return view;
  }
});

Done.
Below is a screen shot of what you can see of.

No comments:

Post a Comment