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.

class FirstFragment : Fragment()
{
 override fun onCreateView(
     inflater: LayoutInflater, container: ViewGroup?,
     savedInstanceState: Bundle?
 ): View? {
     return inflater.inflate(R.layout.fragment_first, container, false)
 }
 override fun onViewCreated(view: View, savedInstanceState: Bundle?)
 {
     super.onViewCreated(view, savedInstanceState)
     view.findViewById<Button>(R.id.button_first).setOnClickListener
     {
         findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment)
     }
 }
}

The first fragment.

class SecondFragment : Fragment()
{
 private var mainMapView: MapView? = null
 override fun onCreateView(
     inflater: LayoutInflater, container: ViewGroup?,
     savedInstanceState: Bundle?
 ): View? {
     return inflater.inflate(R.layout.fragment_second, container, false)
 }
 override fun onViewCreated(view: View, savedInstanceState: Bundle?)
 {
     super.onViewCreated(view, savedInstanceState)
     view.findViewById<Button>(R.id.button_second).setOnClickListener
     {
         findNavController().navigate(R.id.action_SecondFragment_to_FirstFragment)
     }
     val mapSurface = view.findViewById<GemSurfaceView>(R.id.gem_surface)
     mapSurface.onScreenCreated = { screen ->
         // Defines an action that should be done after the screen is created.
         SdkCall.execute {
             /*
             Define a rectangle in which the map view will expand.
             Predefined value of the offsets is 0.
             Value 1 means the offset will take 100% of available space.
              */
             val mainViewRect = RectF(0.0f, 0.0f, 1.0f, 1.0f)
             // Produce a map view and establish that it is the main map view.
             val mapView = MapView.produce(screen, mainViewRect)
             mainMapView = mapView
         }
     }
 }
 override fun onDestroy()
 {
     super.onDestroy()
     SdkCall.execute {
         // Release the map view along with the resources.
         mainMapView?.release()
     }
 }
}

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