Search code examples
androidgoogle-mapsinfowindowuniversal-image-loader

Dynamic contents in Maps V2 InfoWindow


I want to show an InfoWindow on markers in a Maps V2 fragment. Thing is, I want to show BitMaps that are dynamically loaded from the web with Universal Image Downloader.

This is my InfoWindowAdapter:

class MyInfoWindowAdapter implements InfoWindowAdapter {

    private final View v;

    MyInfoWindowAdapter() {
        v = getLayoutInflater().inflate(R.layout.infowindow_map,
                null);
    }

    @Override
    public View getInfoContents(Marker marker) {



        Item i = items.get(marker.getId());

        TextView tv1 = (TextView) v.findViewById(R.id.textView1);
        ImageView iv = (ImageView) v.findViewById(R.id.imageView1);
        tv1.setText(i.getTitle());


        DisplayImageOptions options = new DisplayImageOptions.Builder()
                .delayBeforeLoading(5000).build();

        imageLoader.getMemoryCache(); 

        imageLoader.displayImage(i.getThumbnailUrl(), iv, options,
                new ImageLoadingListener() {

                    @Override
                    public void onLoadingStarted(String imageUri, View view) {
                        // TODO Auto-generated method stub

                    }

                    @Override
                    public void onLoadingFailed(String imageUri, View view,
                            FailReason failReason) {
                        // TODO Auto-generated method stub

                    }

                    @Override
                    public void onLoadingComplete(String imageUri,
                            View view, Bitmap loadedImage) {
                        Log.d("MAP", "Image loaded " + imageUri);

                    }

                    @Override
                    public void onLoadingCancelled(String imageUri,
                            View view) {
                        // TODO Auto-generated method stub

                    }
    });

        return v;
    }

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

}

I have 2 problems with this:

As we know the InfoWindow is drawn and later changes to it (in my case the new BitMap on the ImageView) are not shown/ the InfoWindow is not being updated. How can I "notify" the InfoWindow to reload itself when the imageLoader has finished? When I put

marker.showInfoWindow()

into onLoadingComplete it created an infinite loop where the marker will pop up, start loading the image, pop itself up etc.

My second problem is that on a slow network connection (simulated with the 5000ms delay in the code), the ImageView in the InfoWindow will always display the last loaded image, no matter if that image belongs to that ImageWindow/ Marker.

Any suggestions on how to propperly implement this?


Solution

  • You should be doing Marker.showInfoWindow() on marker that is currently showing info window when you receive model update.

    So you need to do 3 things:

    1. create model and not put all the downloading into InfoWindowAdapter
    2. save reference to Marker (call it markerShowingInfoWindow)
      from getInfoContents(Marker marker)
    3. when model notifies you of download complete call
    if (markerShowingInfoWindow != null && markerShowingInfoWindow.isInfoWindowShown()) {
        markerShowingInfoWindow.showInfoWindow();
    }