Skip to content

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

Fragment example Android screenshot

Fragment example Android screenshot
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

Android example screenshot

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 the
mapSurface.onScreenCreated callback to create a MapView instance when a drawing surface is available:
val mapView = MapView.produce(screen, mainViewRect) and the map is rendered.

Android Examples

Maps SDK for Android Examples can be downloaded or cloned with Git