Fragment Map¶
In this guide you will learn how to render
an interactive map centered on a desired location.
The map is fully 3D, supporting pan, pinch-zoom,
rotate and tilt.
Setup¶
First, get an API key token, see the
Getting Started guide.
Download the Maps & Navigation SDK for Android archive file
Download the HelloFragment project
archive file or clone the project with Git
See the Configure Android Example guide.
Run the example¶
In Android Studio, from the File
menu, select Sync Project with Gradle Files
An android device should be connected via USB cable.
Press SHIFT+F10 to compile, install and run the example on the
android device.
How it works¶

You can open the MainActivity.kt file to see how an interactive map is rendered in a fragment.
1class FirstFragment : Fragment()
2{
3 override fun onCreateView(
4 inflater: LayoutInflater, container: ViewGroup?,
5 savedInstanceState: Bundle?
6 ): View? {
7 return inflater.inflate(R.layout.fragment_first, container, false)
8 }
9 override fun onViewCreated(view: View, savedInstanceState: Bundle?)
10 {
11 super.onViewCreated(view, savedInstanceState)
12 view.findViewById<Button>(R.id.button_first).setOnClickListener
13 {
14 findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment)
15 }
16 }
17}
The first fragment.
1class SecondFragment : Fragment()
2{
3 private var mainMapView: MapView? = null
4 override fun onCreateView(
5 inflater: LayoutInflater, container: ViewGroup?,
6 savedInstanceState: Bundle?
7 ): View? {
8 return inflater.inflate(R.layout.fragment_second, container, false)
9 }
10 override fun onViewCreated(view: View, savedInstanceState: Bundle?)
11 {
12 super.onViewCreated(view, savedInstanceState)
13 view.findViewById<Button>(R.id.button_second).setOnClickListener
14 {
15 findNavController().navigate(R.id.action_SecondFragment_to_FirstFragment)
16 }
17 val mapSurface = view.findViewById<GemSurfaceView>(R.id.gem_surface)
18 mapSurface.onScreenCreated = { screen ->
19 // Defines an action that should be done after the screen is created.
20 SdkCall.execute {
21 /*
22 Define a rectangle in which the map view will expand.
23 Predefined value of the offsets is 0.
24 Value 1 means the offset will take 100% of available space.
25 */
26 val mainViewRect = RectF(0.0f, 0.0f, 1.0f, 1.0f)
27 // Produce a map view and establish that it is the main map view.
28 val mapView = MapView.produce(screen, mainViewRect)
29 mainMapView = mapView
30 }
31 }
32 }
33 override fun onDestroy()
34 {
35 super.onDestroy()
36 SdkCall.execute {
37 // Release the map view along with the resources.
38 mainMapView?.release()
39 }
40 }
41}
The second fragment.
Each of the 2 fragments has a button to navigate to the other fragment,
see res/navigation/nav_graph.xml in the project.
The
SecondFragment
also renders a map.
First it creates a view in the fragment, onCreateView
and then it overrides the
onViewCreated
function which defines themapSurface.onScreenCreated
callback to create a MapView
instance
when a drawing surface is available:val mapView = MapView.produce(screen, mainViewRect)
and the map is rendered.