Archive for June, 2014

Guide: Google Maps V2 for Android : Update InfoWindow with an Image Asynchronously:

One of the needs that raise up in my last project was to update an Google Maps InfoWindow
with an image that I receive asynchronously from the web. Now the problem with this is
that the the view of the InfoWindow on the map is not the actual view you created in the xml
editor but an image rendered from it. If you look at the docs you will see:

Note: The info window that is drawn is not a live view. The view is rendered as an image (using View.draw(Canvas)) at the time it is returned. This means that any subsequent changes to the view will not be reflected by the info window on the map. To update the info window later (for example, after an image has loaded), call showInfoWindow(). Furthermore, the info window will not respect any of the interactivity typical for a normal view such as touch or gesture events. However you can listen to a generic click event on the whole info window as described in the section below.

Now that we cleared that, another thing that I want to mention is that for loading the image I use
the Picasso library by Square that you can read more about in this blog post I wrote:
Guide: How to load images asynchronously into a ListView.

Next it’s important to mention that the layout file you provide for the InfoWindow must include it’s
own background, because you are not going to be provided with the default Google Maps
InfoWindow background. So here is the code for the custom InfoWindowAdapter:

private class CustomInfoWindowAdapter implements InfoWindowAdapter {

    private View view;
    LayoutInflater inflater = null;

     public CustomInfoWindowAdapter(LayoutInflater inflater) {
         //Inflating the InfoWindow view.
         this.inflater = inflater;
         view = inflater.inflate(R.layout.info_window, null);
     }

     @Override
     public View getInfoContents(final Marker marker) {
         //Re-show InfoWindow if it already shown
         if ( App.getInstance().currentlyClickedMarker != null && App.getInstance().currentlyClickedMarker.isInfoWindowShown() ) {
             App.getInstance().currentlyClickedMarker.hideInfoWindow();
             App.getInstance().currentlyClickedMarker.showInfoWindow();
         }
         return null;
     }

     @Override
     public View getInfoWindow(final Marker marker) {
         App.getInstance().currentlyClickedMarker = marker;  	    
         TextView venueName = (TextView) view.findViewById(R.id.info_window_name);
         TextView venueAddress = (TextView) view.findViewById(R.id.info_window_address);
         ImageView venueLogo = (ImageView) view.findViewById(R.id.ivLogo);
         //Get the Image from web using Picasso and update the info contents		
         Picasso.with(getActivity()).load(App.getInstance().getVenueByAddress(marker.getSnippet()).getLogo()).into(venueLogo, new Callback() {	
             @Override
             public void onSuccess() {
                 getInfoContents(marker);
             }
  				
             @Override
             public void onError() {}
         });
         venueName.setText(marker.getTitle());
         venueAddress.setText(marker.getSnippet());
         return view;
    }
}    

Finally you will have to set this adapter to the GoogleMap object:

map.setInfoWindowAdapter(new CustomInfoWindowAdapter(getActivity().getLayoutInflater()));
June 20, 2014Emil Adjiev Comments Off
FILED UNDER :Guide , Guide - Android Development , Guide - Google Maps for Android