Hello everyone, welcome back at porkaone. On this occasion we will learn how to display a map in Flutter and provide markers. Are you curious? Come on, follow the tutorial below.

In our tutorial this time, we will create a simple application that displays a map. Then there is a marker and if you tap this marker, a bottom sheet will appear in the form of information about that place.

Apart from that, this time we didn't use Google Maps. We will use openstreetmap instead. If you have credit card problems and have difficulty using Google Maps, OpenStreetmap could be the solution. Scroll to the bottom of this article to see the final results.

Read Another Article ✨

📰 1. How to Create a Select Dropdown with API in Flutter  read more

📰 2. How to Create a Select Input Dropdown in Flutter  read more

📰 3. How to Make a QR Code Scanner in Flutter ENV read more

📰 4. How to Display Youtube Videos in Flutter  read more

How to Create a Map in Flutter and Add Markers

1. Create a new project with the name you want. Use the latest version of flutter. For flutter I use version 2.10 with sdk: ">=2.16.2 <3.0.0"

2. Open the pubspec.yaml file then add the flutter_map: and latlong: ^0.6.1 packages, follow the example as shown in the image below. And don't forget to save the file so the package can be downloaded.

3. Open the main.dart file then replace it with the script below.

import 'package:flutter/material.dart';
  import 'package:flutter_map/flutter_map.dart';
  import 'package:latlong2/latlong.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          body: OpenStreetMapWidget(),
        ),
      );
    }
  }
  
  class OpenStreetMapWidget extends StatefulWidget {
    @override
    State<OpenStreetMapWidget> createState() => _OpenStreetMapWidgetState();
  }
  
  class _OpenStreetMapWidgetState extends State<OpenStreetMapWidget> {
    void _showDetailsSheet(
        BuildContext context, String name, String about, String latlng) {
      showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (BuildContext context) {
          return SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(name),
                  ),
                  Divider(),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Expanded(
                      child: Text(
                        about,
                        softWrap: true,
                      ),
                    ),
                  ),
                  Divider(),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Expanded(
                      child: Text(
                        'LatLong: '+latlng,
                        softWrap: true,
                      ),
                    ),
                  ),
                  Divider(),
                ],
              ),
            ),
          );
        },
      );
    }
  
    @override
    Widget build(BuildContext context) {
      List<Marker> markers = [
        Marker(
          width: 80.0,
          height: 80.0,
          point: LatLng(-2.9917713, 104.7624691), // marker coordinat
          builder: (ctx) => InkWell(
            onTap: () {
              _showDetailsSheet(
                  context,
                  'Ampera Bridge',
                  'Ampera Bridge, the icon of the capital city of South Sumatra, is a bridge erected on the Sumatran route that stretches over the Musi River. Built to link two areas, Ampera Bridge connects Seberang Ilir and Seberang Ulu, and further serves as a primary route for locals on a daily basis.',
                  '-2.9917713, 104.7624691');
            },
            child: Container(
              child: Icon(
                Icons.place,
                size: 40,
                color: Colors.red,
              ),
            ),
          ),
        ),
      ];
  
      return FlutterMap(
        options: MapOptions(
          center: LatLng(-2.9917713, 104.7624691),
          zoom: 14.0, // Tingkat zoom awal
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            subdomains: ['a', 'b', 'c'],
          ),
          MarkerLayerOptions(
            markers: markers,
          ),
        ],
      );
    }
  }

Explanation of the script above:

1. The OpenStreetMapWidget class is an instance of StatefulWidget, which means that this widget has a state that can change. In it, we implement the build() function which will render the OpenStreetMap map view.
2. In the build() function, we create a list of markers containing one marker. A marker is an object that represents a marker on a map. Here, we set several properties such as width, height, point (marker coordinates), and builder (function to render the marker display).
3. The _showDetailsSheet() function is used to display a modal bottom sheet when the user taps a marker on the map. A bottom sheet modal is an interface component that appears from the bottom of the screen and presents additional information or actions.\
4. Inside _showDetailsSheet(), we use showModalBottomSheet() to display the modal bottom sheet. We define the context and build the bottom sheet modal view using the SingleChildScrollView, Container, and Column widgets.
5. List<Marker> markers = [ ... ]: Creates a list of markers containing Marker objects. Each Marker represents a marker on the map.
6. return FlutterMap(...);: Returns a FlutterMap widget that displays a map with predefined configurations and layers.
7. MapOptions(...): Set configurations for the map display such as center and initial zoom level.
8. TileLayerOptions(...): Sets a map tile layer from OpenStreetMap with the specified template URL.
9. MarkerLayerOptions(...): Sets a marker layer on the map using previously defined markers.

4. After all the steps have been completed, please run the emulator. If successful, the display will look like the image below.

It's easy isn't it?, now you can create an Android application that can display maps. You can also display markers and display the information in them. Improve your maps application again by using Google Maps, API data and other features.

That's it for this tutorial on How to Make a Map in Flutter and Add Markers. Hopefully this short tutorial is useful. If there is something you don't understand, please ask directly in the comments column below. That's all and receive a salary.