Add a polygon to a map

Select platform: Android iOS

Polygons on a 3D map

The following code sample demonstrates how to add a 3D polygon and position it in 3D space by calling the addPolygon method. To use this code sample, follow the instructions in Setup and Add a 3D map to your app to set up your Android Studio project with a basic 3D map. Then, add the following code to the MainActivity.kt file:

// Add imports and define variables
import com.google.android.gms.maps3d.model.LatLngAltitude
import com.google.android.gms.maps3d.model.polygonOptions

val zooOutline = """
    39.7508987, -104.9565381
    39.7502883, -104.9565489
    39.7501976, -104.9563557
    39.7501481, -104.955594
    39.7499171, -104.9553043
    39.7495872, -104.9551648
    39.7492407, -104.954961
    39.7489685, -104.9548859
    39.7484488, -104.9548966
    39.7481189, -104.9548859
    39.7479539, -104.9547679
    39.7479209, -104.9544567
    39.7476487, -104.9535341
    39.7475085, -104.9525792
    39.7474095, -104.9519247
    39.747525, -104.9513776
    39.7476734, -104.9511844
    39.7478137, -104.9506265
    39.7477559, -104.9496395
    39.7477477, -104.9486203
    39.7478467, -104.9475796
    39.7482344, -104.9465818
    39.7486138, -104.9457878
    39.7491005, -104.9454874
    39.7495789, -104.945938
    39.7500491, -104.9466998
    39.7503213, -104.9474615
    39.7505358, -104.9486954
    39.7505111, -104.950648
    39.7511215, -104.9506587
    39.7511173, -104.9527187
    39.7511091, -104.9546445
    39.7508987, -104.9565381""".trimIndent()
        .split("\n")
        .map { line -> line.split(",").map { it.trim().toDouble() } }
        .map { coords ->
            latLngAltitude {
                latitude = coords[0]
                longitude = coords[1]
                altitude = 0.0
            }
        }

val zooPolygonOptions = polygonOptions {
    outerCoordinates = zooOutline
    fillColor = Color.argb(70, 255, 255, 0)
    strokeColor = Color.GREEN
    strokeWidth = 3.0
    altitudeMode = AltitudeMode.CLAMP_TO_GROUND
}

val zooPolygon = googleMap3D.addPolygon(zooPolygonOptions)

...

// Add to the onMap3DViewReady method, after the googleMap3D object has been initialized
googleMap3D.setCamera(
    camera {
        center = latLngAltitude {
            latitude = 39.748477
            longitude = -104.947575
            altitude = 1610.0
        }
        heading = 290.0
        tilt = 47.0
        range = 2251.0
    }
)

Listen for polygon click events

To listen for click events on a polygon, call setClickListener on the polygon object. The following example shows how to set a click listener on a polygon:

polygon.setClickListener {
    lifecycleScope.launch(Dispatchers.Main) {
        Toast.makeText(this@PolygonsActivity, "Check out the Museum!", Toast.LENGTH_SHORT).show()
    }
}

Note that the click handler does not run on the Main (or UI) thread. If you want to make changes to the UI (such as showing a Toast message), you must switch to the Main thread. For Kotlin, you can do this using lifecycleScope.launch(Dispatchers.Main).