image not loading from URL in custom infoWindow using Picasso image loading library in android

Question

I am trying to load an image from the URL in custom infoWindow when the user click on the marker. I was able to load the other details but the image is not loading int it. i'm using Picasso library to do this for me. I have search many related topics and see the solutions but was not able to understand which solution to apply to solve my problem. I am using an web service call to get the required data.

This is my code:

  @Override
        public View getInfoContents(Marker arg0) {

            //marker.showInfoWindow();
            return null;
        }

        @Override
        public View getInfoWindow(Marker arg0) 
        {

            View v = getLayoutInflater().inflate(R.layout.map_infowindow, null);


             for(int i=0 ; i<lstMain.size();i++)
                {
                    Pojo b=lstMain.get(i);
                    double slat= Double.parseDouble(b.getLatitude());
                    double slng= Double.parseDouble(b.getLongitude());

                    double lat= Math.round(slat*100000.0)/100000.0;
                    double lng= Math.round(slng*100000.0)/100000.0;

                    String s1=String.valueOf(lat);
                    String s2=String.valueOf(lng);

                    Log.v("comparing latilongi pojo===>", lat+" , "+lng);
                    Log.v("comparing latilongi marker===>", Clickedlatitude+" , "+Clickedlongitude);

                    if(s1.equals(String.valueOf(Clickedlatitude)) && s2.equals(String.valueOf(Clickedlongitude)))
                    {
                        txtDname=(TextView)v.findViewById(R.id.infoDoctorName);
                        txtDspe=(TextView)v.findViewById(R.id.infoDoctorSpe);
                        txtDaddress=(TextView)v.findViewById(R.id.infoDoctorAddress);
                        imgUrl=(ImageView)v.findViewById(R.id.infoDoctorImage);
                        String url=b.getPhotoURL();

                        txtDname.setText(b.getDoctorName());
                        txtDspe.setText(b.getSpecialization());
                        txtDaddress.setText(b.getAddress1()+" , "+b.getAddress2());


                        Picasso.with(MapActivity.this)
                        .load(url)
                        .placeholder(R.drawable.ic_launcher)
                        .error(R.drawable.ic_launcher).resize(50, 50)
                        .into(imgUrl);


                    }

                }
            return v;
        }

I have already seen these solutions, But not understanding exactly what will solve my problem:

Why Custom InfoWindow of google map v2 ,Not load url Image?

Android Google maps APIv2 InfoWindow and Markers

Add an Image from url into custom InfoWindow google maps v2

Souterrain

Try to prefer AndroidQuery from here :code.google.com/p/android-query – Razorback

@Haresh can you explain it a bit more, So that i can understand what AndroidQuery is and how to use it and how can it helps in my problem – Souterrain

Look at my ans here : https://mcmap.net/q/672214/-image-from-url-in-android/… – Razorback

i am also using the very good third party image loading library already to manage loading task and as a library suggested by you is also for the same purpose. My issue is other. – Souterrain

Answer 1

You can use a Picasso Callback onsuccess loading the image, like this

if (image != null) {
   Picasso.with(getApplicationContext())
          .load(image)
          .placeholder(R.drawable.ic_launcher)
          .into(i, new MarkerCallback(marker));
}

and create a new class to handle the Picasso Callback like this MarkerCallback.java

public class MarkerCallback implements Callback {
   Marker marker=null;

   MarkerCallback(Marker marker) {
     this.marker=marker;
   }

   @Override
   public void onError() {
     Log.e(getClass().getSimpleName(), "Error loading thumbnail!");
   }

   @Override
   public void onSuccess() {
     if (marker != null && marker.isInfoWindowShown()) {
       marker.hideInfoWindow();
       marker.showInfoWindow();
     }
   }
}

Mown

Your onSuccess method works, but I can't figure out why. Could you explain how this doesn't trigger an infinite recursion in getInfoWindow? – Amalia

onSuccess is only called once: when the image is clicke dfor the first time, after the image is downloaded. all he is doing in effect is 'refreshing' the info window. – Fridell

Thanks this is works brilliantly! I am guessing the info window view doesn't get invalidated.. a google maps optimization. There should be a way to invalidate() the info window. – Armilda

I was following your code as I feel I'm trying to achieve the same thing. My question is here with the code here. I seem to be getting the Error but not sure why :/ Maybe since you solved it you might know what I'm doing wrong? – Roborant

i am getting com.squareup.picasso.NetworkRequestHandler$ResponseException: HTTP 504 – Haroldharolda

Answer 2

mMap.setInfoWindowAdapter(object : GoogleMap.InfoWindowAdapter { override fun getInfoContents(p0: Marker?): View? { return null }

        override fun getInfoWindow(p0: Marker?): View? {

            if (p0!!.tag != null) {
                val view = LayoutInflater.from(this@ProviderMainActivity).inflate(R.layout.infowindow_client, null)
                val text = view.findViewById<TextView>(R.id.TXT_NAME)
                val TXT_location = view.findViewById<TextView>(R.id.TXT_location)
                val proimg = view.findViewById<ImageView>(R.id.IMG)
                val datares = p0!!.tag as ResponseDataItem

                Glide.with(this@ProviderMainActivity).load(datares.user!!.profileImageWithURL)
                    .apply(RequestOptions.circleCropTransform().override(50,50).placeholder(R.drawable.placeholder_profile))
                    .listener(object :RequestListener<Drawable>{
                        override fun onLoadFailed(
                            e: GlideException?,
                            model: Any?,
                            target: Target<Drawable>?,
                            isFirstResource: Boolean
                        ): Boolean {
                            return true
                        }

                        override fun onResourceReady(
                            resource: Drawable?,
                            model: Any?,
                            target: Target<Drawable>?,
                            dataSource: DataSource?,
                            isFirstResource: Boolean
                        ): Boolean {
                            Klog.d("## FIRST RESOURCE-","-".plus(isFirstResource))
                            Klog.d("## FIRST DATA SOURCE-","-".plus(dataSource?.name))
                            proimg.setImageDrawable(resource)
                            if (dataSource?.name.equals("DATA_DISK_CACHE")) {
                                p0.showInfoWindow()
                            }
                            return true
                        }

                    }).into(proimg)
                text.setText(datares.user!!.fullName)
                var loc = datares.location!!.text!!.split(",").map { it.trim() }
                TXT_location.setText(loc.get(0))

                return view
            } else {
                return null
            }
        }
    })

Gaselier

Please edit this information into the answer - don't add it in the comments. – Hardware

Answer 3

Superb ans. work perfectly and easy to implement.

Unilobed