Skip to main content
GuidesAPI ReferenceExamplesFAQ

Get started with maps

Estimated reading time: 3 minutes

The Maps SDK for Flutter delivers powerful mapping capabilities, enabling developers to effortlessly integrate dynamic map views into their applications. Core features include embedding and customizing map views, controlling displayed locations, and fine-tuning map properties. At the center of the mapping API is the GemMap, a subclass of StatefulWidget, offering a wide range of configurable options.

Display a map​

The following code demonstrates how to show a map view. This is the main.dart file.

import 'package:flutter/material.dart';

import 'package:gem_kit/core.dart';
import 'package:gem_kit/map.dart';

const projectApiToken = String.fromEnvironment('GEM_TOKEN');

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Hello Map',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void dispose() {
    GemKit.release();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepPurple[900],
        title: const Text('Hello Map', style: TextStyle(color: Colors.white)),
      ),
      body: const GemMap(
        appAuthorization: projectApiToken,
        onMapCreated: _onMapCreated,
      ),
    );
  }

  void _onMapCreated(GemMapController mapController) {
    // Code executed when the map is initialized
  }
}
hello_map
Displaying a default day map

The GemMap widget includes a callback, onMapCreated, which is triggered once the map has finished initializing. It also provides a GemMapController to enable additional map functionalities.

const GemMap(
  appAuthorization: projectApiToken,
  onMapCreated: _onMapCreated,
),
tip

Multiple GemMap widgets can be instantiated within a single application, allowing for the display of different data on each map. Each GemMap is independently controlled via its respective GemMapController.

Note that certain settings, such as language, overlay visibility, and position tracking, are shared across all GemMap instances within the application.

Set the SDK language​

To configure the SDK's language, select a language from the SdkSettings.languageList getter and assign it using the SdkSettings.language setter.

Language? engLang = SdkSettings.languageList.where((lang) => lang.languagecode == 'eng').first;
SdkSettings.language = engLang;
Note

The languagecode follows the ISO 639-3 standard. Multiple variants may exist for a single language code. Further filtering can be applied using the regionCode field within the Language object, which adheres to the ISO 3166-1 standard.

tip

This operation modifies the language used for search results, category names, instructions, and all texts returned by the SDK.

Note

The language of the TTS instructions is different from the SDK language and it can be set using the SdkSettings.setTTSLanguage method. More details can be found inside the voice guidance guide.

To ensure the map uses the same language all over the world, use the following code:

SdkSettings.mapLanguage = MapLanguage.automatic;

To show location names in their native language (where available) for the respective region, use this code:

SdkSettings.mapLanguage = MapLanguage.native;