2

I want to set image on marker. Image is stored in firerebase storage and I have download link of image. Now How can I set that image on marker

public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;
    reference = reference.child("Profile");
    reference.addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {

            for(DataSnapshot ds:dataSnapshot.getChildren()){
                latitude = (Double) ds.child("Latitude").getValue();
                longitude = (Double) ds.child("Longitude").getValue();
                String name=(String) ds.child("Name").getValue();
                String imgUrl = (String) ds.child("imageURL").getValue();//Here is image Url of marker
                LatLng latLng = new LatLng(latitude,longitude);
                mMap.addMarker(new MarkerOptions().position(latLng).title(name));
                mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latLng, 10));

            }
        }
        @Override
        public void onCancelled(DatabaseError databaseError) {

        }
    });
}
Atif Rizwan
  • 645
  • 2
  • 8
  • 17
  • Refer to below link. This answer may help you: https://stackoverflow.com/a/14812104/4832356 – SiSa Jul 17 '17 at 18:14
  • I know how to download image using Picasso but i want to set that image in marker. – Atif Rizwan Jul 17 '17 at 18:35
  • Your question has been answered here https://stackoverflow.com/questions/34586876/how-can-i-create-a-speech-bubble-border-for-a-google-marker-custom-icon-using-pi – Nithin NS Oct 17 '17 at 10:36

1 Answers1

2

After too much research I found a way, but you will need Glide to work. This code is in Kotlin. Once you have the url with the image in storage firebase. Call Glide this way to transform the url link in a bitmap. Thanks to glide this is easy:

       var bitmapFinal : Bitmap?

        Glide.with(this)
         .asBitmap()
         .load(link)
         .into(object : CustomTarget<Bitmap>(){
            override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {

                bitmapFinal = createUserBitmapFinal(resource)  //here we will insert the bitmap we got with the link in a placehold with white border.

                val mark1 = mMap.addMarker(MarkerOptions().position(latLng).title("Você está aqui").icon(BitmapDescriptorFactory.fromBitmap(bitmapFinal)))

                mark1.tag=0

                mMap.setOnMarkerClickListener (this@MapsActivity)

            }
            override fun onLoadCleared(placeholder: Drawable?) {
                // this is called when imageView is cleared on lifecycle call or for
                // some other reason.
                // if you are referencing the bitmap somewhere else too other than this imageView
                // clear it here as you can no longer have the bitmap
            }
        })

At this point, you could insert the bitmap (resource) directly in marker, just tweeking the code above. But if you want to use a placeholder with a white border of any other thing, use this code, whereas bitmapInicial is the bitmap you just get in Glide above:

private fun createUserBitmapFinal(bitmapInicial: Bitmap?): Bitmap? {
    var result: Bitmap? = null
    try {
        result = Bitmap.createBitmap(dp(62f), dp(76f), Bitmap.Config.ARGB_8888) //change the size of the placeholder 
        result.eraseColor(Color.TRANSPARENT)
        val canvas = Canvas(result)
        val drawable: Drawable = resources.getDrawable(R.drawable.placeholder) 
        drawable.setBounds(0, 0, dp(62f), dp(76f)) //change the size of the placeholder, but you need to maintain the same proportion of the first line
        drawable.draw(canvas)
        val roundPaint = Paint(Paint.ANTI_ALIAS_FLAG)
        val bitmapRect = RectF()
        canvas.save()

        if (bitmapInicial != null) {
            val shader =
                BitmapShader(bitmapInicial, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
            val matrix = Matrix()
            val scale: Float = dp(104f) / bitmapInicial.width.toFloat()  //reduce or augment here change the size of the original bitmap inside the placehoder. But you need to adjust the line bitmapRect with the same proportion
            matrix.postTranslate(5f, 5f) 
            matrix.postScale(scale, scale)
            roundPaint.shader = shader
            shader.setLocalMatrix(matrix)
            bitmapRect[10f, 10f, 104f+10f]=104f+10f    //change here too to change the size
            canvas.drawRoundRect(bitmapRect, 56f, 56f, roundPaint)  
        }

        canvas.restore()
        try {
            canvas.setBitmap(null)
        } catch (e: java.lang.Exception) {
        }
    } catch (t: Throwable) {
        t.printStackTrace()
    }
    return result
}

fun dp(value: Float): Int {
    return if (value == 0f) {
        0
    } else Math.ceil(resources.displayMetrics.density * value.toDouble()).toInt()
}

fonts: How does one use glide to download an image into a bitmap?

Thiago Silva
  • 670
  • 6
  • 18
  • hey. the bitmap is actually very small in the placeholder and I'm not able to figure out how to perfectly fit it in the placeholder. Can you please tell me which is the height and width in the code, etc? if it makes sense. Thank you – perpetualdarkness Jun 24 '21 at 05:44
  • Hi man. I´m only working with Flutter now, so no easy way to test and help you. But I think you can use this line to increase the size of the bitmap: bitmapFinal= Bitmap.createBitmap(dp(62f), dp(76f), Bitmap.Config.ARGB_8888) //change the size of the bitmap messing with dp´s. You can track the example in the second method i´ve providaded as I used this to change the size of the placeholder, that is a bitmap too. hope it helps you. Let me know please. – Thiago Silva Jun 25 '21 at 17:43
  • Hey can you check out my question on stackoverflow about the same? https://stackoverflow.com/questions/68131621/how-to-set-image-in-google-marker-with-a-border-in-android – perpetualdarkness Jun 26 '21 at 15:29
  • I did try messing with dp's but the profile photo just doesn't seem to fit. – perpetualdarkness Jun 26 '21 at 15:30