Markers

Code blocks that are used to modify the styles of map markers

Place a Circle shape and show toast if clicked

- Posted in Markers by

If user clicks a circle, show a toast message.

1️⃣ Declare variables for a circle. Ensure that the clickable property is set to true.

1
2
3
    val circles = CircleOptions()
        .radius(10.0) 
        .clickable(true)   


2️⃣ Place the circle on the map, and add a tag to identify each placement.

1
 mMap.addCircle(circles.center(LatLng(25.16828, 121.44430))).tag = "haha"


3️⃣ Initialize setOnCircleClickListener to listen for user clicks, then show a toast message if the clicked circle matches the tag.

      mMap.setOnCircleClickListener {

          if (it.tag == "haha") {

              Toast.makeText(
                  applicationContext,
                  "haha message haha",
                  Toast.LENGTH_SHORT
              ).show()
          }
          else {
              Toast.makeText(
                  applicationContext,
                  "This is a test message",
                  Toast.LENGTH_SHORT
              ).show()
          }
      }

Place Ground Overlay and show toast if clicked

- Posted in Markers by

If user clicks a ground overlay, show a toast message.

1️⃣ Declare variables for a ground overlay to be placed on the map. Ensure that the clickable property is set to true.

    val mGOLatLng = LatLng(25.12299, 121.46196)
    val mGOMapOpt = GroundOverlayOptions()
        .image(BitmapDescriptorFactory.fromResource(R.drawable.SampleImage))
        .position(mGOLatLng, 100f)
        .clickable(true)


2️⃣ Place the ground overlay on the map, and add a tag to identify each placement.

    mMap.addGroundOverlay(mGOMapOpt)?.tag = "haha"


3️⃣ Initialize setOnGroundOverlayClickListener to listen for user clicks, then show a toast message if the clicked overlay matches the tag.

      mMap.setOnGroundOverlayClickListener {

       if (it.tag == "haha") {

           Toast.makeText(
               applicationContext,
               "This is a haha message",
               Toast.LENGTH_SHORT
           ).show()
       }
    }

Function to convert a vector asset to bitmap

- Posted in Markers by

Function to convert a vector asset to bitmap

1️⃣ First, add the giveMeBitmapDescriptor function:

private fun giveMeBitmapDescriptor(
    context: Context,
    iconPrm: Int
): BitmapDescriptor? {
    val background = ContextCompat.getDrawable(context, iconPrm)
    background!!.setBounds(0, 0, background.intrinsicWidth, background.intrinsicHeight)
    val bitmap = Bitmap.createBitmap(
        background.intrinsicWidth,
        background.intrinsicHeight,
        Bitmap.Config.ARGB_8888
    )
    val canvas = Canvas(bitmap)
    background.draw(canvas)
    val r = Rect()
    canvas.getClipBounds(r)
    val cHeight: Int = r.height()
    val cWidth: Int = r.width()
    val paint = Paint()
    paint.setTextAlign(Paint.Align.LEFT)
    paint.getTextBounds("text 1234567890", 0, "text 0002".length, r)
    val x: Float = cWidth / 2f - r.width() / 2f - r.left
    val y: Float = cHeight / 2f + r.height() / 2f - r.bottom
    canvas.drawText("sample text", x, y, paint)
    return BitmapDescriptorFactory.fromBitmap(bitmap)
}



2️⃣ Then set marker options as usual, but use the giveMeBitmapDescriptor to declare the icon:

    val markerOptionSVG = MarkerOptions()
        .position(LatLng(25.16828, 121.44430))
        .title("test")
        .snippet("sLcl2")
        .icon(giveMeBitmapDescriptor(this,R.drawable.SampleVectorImage))

    mMap.addMarker(markerOptionSVG)


Source:
[1] https://stackoverflow.com/questions/17837510/map-markers-with-text-in-google-maps-android-api-v2

Add a circle on the map

- Posted in Markers by

Add a circle on the map.

val circle: Circle = mMap.addCircle(
    CircleOptions()
        .center(LatLng(25.105497, 121.597366))
        .radius(10.0)
        .strokeColor(Color.RED)
        .fillColor(Color.BLUE)
        .clickable(true);
)