How to get image in infoWindow on Google Maps with glide - Android

Question

I'm developing application using google map. and I need custominfowindow that has two of text, and image source.

it's my infocontents() code. using firebase, Google map, Glide but it's does not work plz help.

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

    @Override
    public View getInfoContents(Marker marker) {
        final View v = getLayoutInflater().inflate(R.layout.custom_window, null);

        infoWindowProfile = (CircleImageView) v.findViewById(R.id.ci_custom_profile);
        infoWindowPr = (TextView) v.findViewById(R.id.tv_custom_pr);
        String uidTemp = marker.getSnippet();
        Log.d("markerproper", "uid(snippet) : " + uidTemp);
        database = FirebaseDatabase.getInstance();
        markerRef = database.getReference().child("truck").child(uidTemp);
        markerRef.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                Map<String, ZariPosts> zariPost = (Map<String, ZariPosts>) dataSnapshot.getValue();
                markerProfileUrl = String.valueOf(zariPost.get("profileUrl"));
                markerPr = String.valueOf(zariPost.get("pr"));
                Log.d("markerproper", "uid(markerProfileUrl) : " + markerProfileUrl);
                Log.d("markerproper", "uid(markerPr) : " + markerPr);


                Glide.with(SearchActivity.this)
                        .load(markerProfileUrl)
                        .centerCrop()
                        .into(infoWindowProfile);

                infoWindowPr.setText(markerPr);
            }
            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });
        return v;
    }

refer this: http://androidfreakers.blogspot.in/2013/08/display-custom-info-window-with.html — Avantika Saini, Jun 24 '16 at 11:33
possible duplicate of http://stackoverflow.com/questions/16572971/how-to-add-image-into-infowindow-of-marker-in-google-maps-api-v2-android?rq=1 — abielita, Jun 26 '16 at 08:24

score 8 · Accepted Answer · answered Jul 01 '16 at 04:38

8

from https://github.com/bumptech/glide/issues/290

you can try adding the following into your getInfoContent() method. change the url and imageView name accordingly.

Glide.with(mContext).load(imageURL).asBitmap().override(50,50).listener(new RequestListener<String, Bitmap>() {
    @Override
    public boolean onException(Exception e, String model, Target<Bitmap> target, boolean isFirstResource) {
        e.printStackTrace();
        return false;
    }

    @Override
    public boolean onResourceReady(Bitmap resource, String model, Target<Bitmap> target, boolean isFromMemoryCache, boolean isFirstResource) {
        if(!isFromMemoryCache) marker.showInfoWindow();
        return false;
    }
}).into(imageView);

answered Jul 01 '16 at 04:38

Angel Koh

12,479
7
64
91

Not working at version 4.7.1, because isFromMemoryCache variable, doesn't exist anymore – Tiago Elias Jul 02 '18 at 16:18
2

@TiagoElias just check if !dataSource.equals(DataSource.MEMORY_CACHE) – Serega Jul 04 '18 at 05:52
@Serega I ended up with doing this with Picasso library! Thank you anyway – Tiago Elias Jul 04 '18 at 11:08

score 0 · Answer 2 · edited Feb 09 '21 at 17:43

A Kotlin fix:

Firstly, a huge "thank you" to everyone who has contributed to this question and every single other one like it. I was able to get something working with code cobbled together. If you're using Glide and having this issue, here's what I have, I'm using a custom info window with a data class set as the tag of the marker.

class CompanyMarkerCustomInfoWindow(val context: Context) : GoogleMap.InfoWindowAdapter {

override fun getInfoWindow(marker: Marker?): View? {
    return null
}

override fun getInfoContents(marker: Marker): View {
    val layoutInflater = (context as Activity).layoutInflater
    val binding = ItemCompanyMapMarkerBinding.inflate(layoutInflater)
    val infoWindowData: CompanyMapMarkerModel? = marker.tag as CompanyMapMarkerModel?
    binding.model = infoWindowData
    binding.executePendingBindings()

    if (infoWindowData?.loadImage != null) {
        val finalImageUrl = Constants.BASE_URL + infoWindowData.loadImage
        Glide.with(context)
            .load(finalImageUrl)
            .placeholder(R.drawable.ic_baseline_broken_image_24)
            .listener(MarkerCallback(marker))
            .into(binding.loadImage)
    }

    if (infoWindowData?.companyImage != null) {
        val finalImageUrl = Constants.BASE_URL + infoWindowData.companyImage
        Glide.with(context)
            .load(finalImageUrl)
            .placeholder(R.drawable.ic_baseline_broken_image_24)
            .listener(MarkerCallback(marker))
            .into(binding.companyProfileImage)
    }

    return binding.root
}

class MarkerCallback internal constructor(marker: Marker?) :
    RequestListener<Drawable> {

    var marker: Marker? = null

    private fun onSuccess() {
        if (marker != null && marker!!.isInfoWindowShown) {
            marker!!.hideInfoWindow()
            marker!!.showInfoWindow()
        }
    }

    init {
        this.marker = marker
    }

    override fun onLoadFailed(
        e: GlideException?,
        model: Any?,
        target: Target<Drawable>?,
        isFirstResource: Boolean
    ): Boolean {
        Log.e(javaClass.simpleName, "Error loading thumbnail! -> $e")
        return false
    }

    override fun onResourceReady(
        resource: Drawable?,
        model: Any?,
        target: Target<Drawable>?,
        dataSource: DataSource?,
        isFirstResource: Boolean
    ): Boolean {
        onSuccess()
        return false
    }
}

}

Map result

I haven't tried your solution yet but I wonder. Do you get stuck in an infinite loop when you fully zoom in while keeping the info window open? — ThanosFisherman, Apr 21 '21 at 13:25
@ThanosFisherman That's a great question, I never had issues with the view or stutter, and haven't worked on the project in some time but I'm curious as well. I'll be sure to slap a line-break in there sometime and see what I come up with. — LucidSoftworksLLC, Apr 21 '21 at 23:15
I'm asking because I tried to follow a similar approach using Coil but I ended up in an infinite loop and the app eventually crashed. I just tried your solution with Glide and it works great! No stutters no crashes due to infinite loops. I suspect there is an issue with Coil after all. Probably related to this https://github.com/coil-kt/coil/issues/542 — ThanosFisherman, Apr 22 '21 at 00:05

score 0 · Answer 3 · answered Apr 27 '21 at 07:39

Easy and simple Kotlin solution (taken from https://github.com/bumptech/glide/issues/290):

    //initiate those two variables
    private val images: HashMap<Marker, Bitmap> = HashMap()
    private val targets: HashMap<Marker, CustomTarget<Bitmap>> = HashMap()

    //create this inner class
    inner class InfoTarget(var marker: Marker) : CustomTarget<Bitmap>() {
        override fun onLoadCleared(@Nullable placeholder: Drawable?) {
            images.remove(marker)
        }

        override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
            images.put(marker, resource)
            marker.showInfoWindow()
        }
    }
    
    //Create this method
    private fun getTarget(marker: Marker): CustomTarget<Bitmap> {
        var target = targets[marker]
        if (target == null) {
            target = InfoTarget(marker)
            targets[marker] = target // missing in original (fixed 2018 August)
        }
        return target
    }

//insert image here (in your acctual population code)
val image = images[marker]
if (image == null) {
    Glide.with(activity)
        .asBitmap()
        .load(pic_url)
        .dontAnimate()
        .into(getTarget(marker))
} else {
    imageView.setImageBitmap(image)
}

score 0 · Answer 4 · answered May 29 '21 at 23:40

Using Picasso, solved my issue of the image not loading on first instance. Inside the CustomInfoAdapter class.

override fun getInfoWindow(marker: Marker): View? {
    // This function is required, but can return null if
    // not replacing the entire info window

    // Set the marker's title and snippet to the appropriate text view
    // in the layout created.

    val titleView = contents.findViewById<TextView>(R.id.title)
    titleView.text = marker.title.split("https://")[0] ?: ""

    val phoneView = contents.findViewById<TextView>(R.id.phone)
    phoneView.text = marker.snippet ?: ""
    val userImage = contents.findViewById<ImageView>(R.id.profile_image)
    val photoUri = "https://${marker.title.split("https://")[1]}"
    Log.d("InfoWindowAdapter", "getInfoContents: $photoUri")

    Picasso.with(userImage.context)
        .load(photoUri)
        .placeholder(R.drawable.loading_status_animation)
        .error(R.drawable.ic_error_image)
        .into(userImage, object : Callback {
            override fun onSuccess() {
                if (marker.isInfoWindowShown) {
                    marker.hideInfoWindow()
                    marker.showInfoWindow()
                }
            }

            override fun onError() {
                Log.d("InfoWindow", "onError: An error occured")
            }
        })
    return contents

}

How to get image in infoWindow on Google Maps with glide - Android

4 Answers4