Image not loading in google map marker using UiL

Question

I am using universal-image-loader-1.9.5.jar. I am trying to display user image on marker. But image is not being displayed.

What have i done .

UIL initialization

imageLoader = ImageLoader.getInstance();
        defaultOptions = new DisplayImageOptions.Builder()
        .showImageOnLoading(R.drawable.profile_image) // resource or drawable
        .showImageForEmptyUri(R.drawable.profile_image) // resource or drawable
        .showImageOnFail(R.drawable.profile_image) // resource or drawable
        .resetViewBeforeLoading(false)  // default
        .delayBeforeLoading(1000)
        .cacheInMemory(false) // default
        .cacheOnDisk(false) // default
        .considerExifParams(false) // default
        .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2) // default
        .bitmapConfig(Bitmap.Config.ARGB_8888) // default
        .displayer(new SimpleBitmapDisplayer()) // default
        .handler(new Handler()) // default
        .build();


File cacheDir = StorageUtils.getCacheDirectory(this);
config = new ImageLoaderConfiguration.Builder(this)
.memoryCacheExtraOptions(480, 800) // default = device screen dimensions
.diskCacheExtraOptions(480, 800, null)
.threadPoolSize(3) // default
.threadPriority(Thread.NORM_PRIORITY - 2) // default
.tasksProcessingOrder(QueueProcessingType.FIFO) // default
.denyCacheImageMultipleSizesInMemory()
.memoryCache(new LruMemoryCache(2 * 1024 * 1024))
.memoryCacheSize(2 * 1024 * 1024)
.memoryCacheSizePercentage(13) // default
.diskCache(new UnlimitedDiskCache(cacheDir)) // default
.diskCacheSize(50 * 1024 * 1024)
.diskCacheFileCount(100)
.diskCacheFileNameGenerator(new HashCodeFileNameGenerator()) // default
.defaultDisplayImageOptions(DisplayImageOptions.createSimple()) // default
.writeDebugLogs()
.build();
imageLoader.init(config);

Using InfoWindowAdapter

googleMap.setInfoWindowAdapter(new MyCustomAdapterForItems());

public class MyCustomAdapterForItems implements InfoWindowAdapter {

    private final View myContentsView;

    MyCustomAdapterForItems() {
        myContentsView = mainFragmentActivity.getLayoutInflater().inflate(
                R.layout.map_info_window_dialog, null);
    }

    @Override
    public View getInfoContents(Marker marker) {
        return null;
    }

    @Override
    public View getInfoWindow(Marker marker) {
        try {
            JSONObject jsonMarker = new JSONObject(marker.getSnippet());
            String name = jsonMarker.getString("name");
            double distance = jsonMarker.getDouble("distance");
            String imagePath = jsonMarker.getString("profile_pic_address");
            String gender = jsonMarker.getString("gender");
            String birthDate = jsonMarker.getString("birthdate");
            age = hiApplication.getAge(birthDate);
            TextView tvName = ((TextView) myContentsView
                    .findViewById(R.id.tvMapChatName));
            TextView tvAge = ((TextView) myContentsView
                    .findViewById(R.id.tvMapChatAge));
            TextView tvDistance = ((TextView) myContentsView
                    .findViewById(R.id.distance));
            TextView tvGender = (TextView) myContentsView.findViewById(R.id.tvChatGender);
            RoundedImageView  image = (RoundedImageView) myContentsView.findViewById(R.id.profile_pic);
            imageLoader.displayImage(imagePath, image , defaultOptions , simpleLoader); //Image loading here
            tvName.setText(name);
            if(age == 0 ) tvAge.setText("");
            else tvAge.setText(age+"");
            tvGender.setText(gender);
            tvDistance.setText(new DecimalFormat("##.##").format(distance)+ " km.");
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return myContentsView;
    }
}

ImageLoadingListener

private class SimpleLoader implements ImageLoadingListener {

        @Override
        public void onLoadingCancelled(String arg0, View arg1) {
            Log.d("d", "image cancelled");
        }

        @Override
        public void onLoadingComplete(String arg0, View view, Bitmap bitmap) {
            Log.d("d", "loading complete");
            ImageView imageView = (ImageView) view;
            imageView.setImageBitmap(bitmap);
        }

        @Override
        public void onLoadingFailed(String arg0, View arg1, FailReason arg2) {
            Log.d("d", "image loading failed");

        }

        @Override
        public void onLoadingStarted(String arg0, View arg1) {
            Log.d("d", "image loading started");
        }

    }

Although my logs show that image is loaded completely . Here is my logs .

01-21 02:38:13.561: D/d(7832): image loading started
01-21 02:38:13.567: D/ImageLoader(7832): Delay 1000 ms before loading...  [http://192.168.1.9:8080/chatme_userimages/ttestttt@gmail.com.jpg_100x100]
01-21 02:38:14.568: D/ImageLoader(7832): Start display image task [http://192.168.1.9:8080/chatme_userimages/ttestttt@gmail.com.jpg_100x100]
01-21 02:38:14.569: D/ImageLoader(7832): Load image from network [http://192.168.1.9:8080/chatme_userimages/ttestttt@gmail.com.jpg_100x100]
01-21 02:38:14.653: D/ImageLoader(7832): Display image in ImageAware (loaded from NETWORK) [http://192.168.1.9:8080/chatme_userimages/ttestttt@gmail.com.jpg_100x100]
01-21 02:38:14.653: D/d(7832): loading complete

But only default drawb R.drawable.profile_image is showing all the time. Can anybody tell me , am i missing something here ? Whats wrong with code ?

@VivekMishra . Image path `http://192.168.1.9:8080/chatme_userimages/ttestttt@gmail.com.jpg` is correct it is shown on my browsser , but i dont know why Imageloader adds suffix `_100x100` to my image path . which makes it wrong path . — Deepak Rathore, Jan 21 '16 at 08:04

score 0 · Answer 1 · answered Jan 21 '16 at 07:59

*You should create a custom xml layout file and then inflate in method getInfoContents(Marker arg0)

Your image is prepared but it is not getting loaded on the marker I think.

Try this

 @Override
        public View getInfoContents(Marker arg0) {

            // Getting view from the layout file info_window_layout
            View v = getLayoutInflater().inflate(R.layout.info_window_layout, null);

            // Getting the position from the marker
            LatLng latLng = arg0.getPosition();

            // Getting reference to the TextView to set latitude
            TextView tvLat = (TextView) v.findViewById(R.id.tv_lat);

            // Getting reference to the TextView to set longitude
            TextView tvLng = (TextView) v.findViewById(R.id.tv_lng);

            // Setting the latitude
            tvLat.setText("Latitude:" + latLng.latitude);

            // Setting the longitude
            tvLng.setText("Longitude:"+ latLng.longitude);

            // Returning the view containing InfoWindow contents
            return v;

        }
    });

I tried inflating my xml in `getInfoContents(Marker arg0)` but now it does not show my markers even. — Deepak Rathore, Jan 21 '16 at 08:16
Try getting image from imageloader then set it do not try to directly display it. — Rohit Sharma, Jan 22 '16 at 09:13
In my app images are being downloaded from web server dymamically . I tried your code but it did not work for me . I have solved this issue. Please have a look at my answer . — Deepak Rathore, Jan 22 '16 at 10:03

score 0 · Accepted Answer · edited May 23 '17 at 12:04

I have found a solution of my problem , following some suggestions from Dynamic contents in Maps V2 InfoWindow

and Android GoogleMap 2 update information dynamically in InfoWindow with ImageView via Universal Image loader

The problem with above code is getInfoWindow(Marker marker) is being called before downloading the image hence it was not showing updated UI.

So i am updating infowindow() using marker.showInfoWindow() and marker.hideInfoWindow() after image downloaded .

I have done following changes in my code .

@Override
        public View getInfoContents(Marker marker) {

            if ( FragmentMap.this.marker != null && FragmentMap.this.marker.isInfoWindowShown()) {

                FragmentMap.this.marker.hideInfoWindow();
                FragmentMap.this.marker.showInfoWindow();
                FragmentMap.this.marker  = null ;
            }
            return null;
        }



@Override
        public View getInfoWindow(Marker marker) {
            try {
                Log.d("d", "inside getinfowindow");
                FragmentMap.this.marker = marker;
                JSONObject jsonMarker = new JSONObject(marker.getSnippet());
                String name = jsonMarker.getString("name");
                double distance = jsonMarker.getDouble("distance");
                String imagePath = jsonMarker.getString("profile_pic_address");
                String gender = jsonMarker.getString("gender");
                String birthDate = jsonMarker.getString("birthdate");
                age = hiApplication.getAge(birthDate);
                TextView tvName = ((TextView) myContentsView
                        .findViewById(R.id.tvMapChatName));
                TextView tvAge = ((TextView) myContentsView
                        .findViewById(R.id.tvMapChatAge));
                TextView tvDistance = ((TextView) myContentsView
                        .findViewById(R.id.distance));
                TextView tvGender = (TextView) myContentsView.findViewById(R.id.tvChatGender);
                RoundedImageView  image = (RoundedImageView) myContentsView.findViewById(R.id.profile_pic);
                imageLoader.displayImage(imagePath, image , defaultOptions , simpleLoader);
                tvName.setText(name);
                if(age == 0 ) tvAge.setText("");
                else tvAge.setText(age+"");
                tvGender.setText(gender);
                tvDistance.setText(new DecimalFormat("##.##").format(distance)+ " km.");
            } catch (JSONException e) {
                e.printStackTrace();
            }
            return myContentsView;
        }

Inside class SimpleLoader

@Override
        public void onLoadingComplete(String arg0, final View view,  Bitmap bitmap) {

            markerCustomAdapter.getInfoContents(marker);
        }

UPDATE

Above code is working fine on android 4.0.4 , but when i tried this code on android lolipop, images were not getting loaded. So i followed Add an Image from url into custom InfoWindow google maps v2 and used http://square.github.io/picasso/ Picasso library . Now its working fine for me.

Thanks all.

Image not loading in google map marker using UiL

2 Answers2