How to get longitude and latitude from flutter_map after tapping somewhere in the map?

Issue

I need to get longitue and latitude back after selecting a spot inside the map, so I tap somewhere in a map, and it returns lat and long information, I’m able to launch the map, add places, but I just can’t choose a place and get a callback with that information, I’ve found solutions for googlemaps, but not for flutter_map, thanks a lot !!

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';

import 'package:latlong2/latlong.dart' as latlng;
import 'package:flutter_map_tappable_polyline/flutter_map_tappable_polyline.dart';

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
    @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Map'),
      ),
      body: FlutterMap(
        options: new MapOptions(
          center: latlng.LatLng(-23.5732052, -46.6331934),
          zoom: 18.0,
          plugins: [
            TappablePolylineMapPlugin(),
          ],
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: "https://api.mapbox.com/styles/v1/dxxx/ckwii7q6bxxrauou3d/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZGVtaWFuMjAyMSIsImEiOiJjxxxxxxxxxxxxxxxxxxxaWs1In0.2x2m7ka-KZwzBR5XXgYkXQ",
            subdomains: ['a', 'b', 'c'],
            additionalOptions: {
              'accessToken':'pk.eyJ1IjoiZGVxxxxxxxxxxxxxxxxxxxxxxxxxxcHgxNXZoMnB1dGVvOWViaWs1In0.2x2m7ka-KZwzBR5XXgYkXQ',
              'id': 'mapbox.mapbox-streets-v8',
            },
            attributionBuilder: (_) {
              return Text("© OpenStreetMap contributors");
            },
          ),
          TappablePolylineLayerOptions(
            // Will only render visible polylines, increasing performance
              polylineCulling: true,
              polylines: [
                TaggedPolyline(
                  points: [latlng.LatLng(-22.5732052, -47.6331934), latlng.LatLng(-22.5732052, -47.6331934)],

                  tag: "My Polyline", // An optional tag to distinguish polylines in callback
                  // ...all other Polyline options
                ),
              ],
              onTap: (polylines, tapPosition) => print('Tapped: ' +
                  polylines.map((polyline) => polyline.tag).join(',') +
                  ' at ' +
                  tapPosition.globalPosition.toString()),

              onMiss: (tapPosition) {
                print('No polyline was tapped at position ' +
                    tapPosition.globalPosition.toString());
              }
          ),
          MarkerLayerOptions(
            markers: [
              Marker(
                width: 40.0,
                height: 40.0,
                point:  latlng.LatLng(-23.5732052, -46.6331934),
                builder: (ctx) =>
                    Container(
                      child: FlutterLogo(),
                    ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Solution

I am using the package:google_maps_flutter package, but if you do not want to use that package the procedure should still be the same. Simply add a ontap() to the map widget.

child: GoogleMap(
        onTap: (latLng) {
          print('${latLng.latitude}, ${latLng.longitude}');
        },

For you package it seems to be like this:

options: MapOptions(
                    center: LatLng(45.5231, -122.6765),
                    zoom: 13.0,
                    onTap: _handleTap),

Answered By – Andreas Toresäter

Answer Checked By – David Goodson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.