Home > Net >  How Can i retrieve coordinates from ListTile to Get All Markers in Google Map flutters
How Can i retrieve coordinates from ListTile to Get All Markers in Google Map flutters

Time:06-23

Using json I called up a list of clients, I showed it using a widget Listview and Listile like this .. But I didn't know how to display each customer's marker on the Google Map page despite several attempts.. thanks for all I have this Home page

Page ListView

with This Code:

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final HomeController _homeController = Get.put(HomeController());

  @override
  void initState() {
    super.initState();
    setState(() {
      _homeController.getPartners();
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MainContainer(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Get.to(MapMarkers());
          },
          backgroundColor: Colors.blue,
          child: const Icon(Icons.map),
        ),
        isAppBar: true,
        appBarTitle: 'home',
        padding: 20.0,
        actions: [
          IconButton(
            onPressed: () {
              showLogoutDialog();
            },
            icon: Icon(Icons.exit_to_app),
          )
        ],
        child: Obx(
          () {
            return new ListView.builder(
              shrinkWrap: true,
              physics: ScrollPhysics(),
              itemCount: _homeController.listOfPartners.length,
              itemBuilder: (context, index) {
                Records mydata = _homeController.listOfPartners[index];

                _callNumber() async {
                  final number = mydata.phone;
                  print(number);
                  await FlutterPhoneDirectCaller.callNumber(number!);
                }

                if (index.isEven) return new Divider();
                return new ListTile(
                  leading: ClipRRect(
                    borderRadius: BorderRadius.circular(8.0),
                    child: mydata.image512!.isNotEmpty
                        ? Image.memory(
                            base64.decode(mydata.image512!),
                            height: 40,
                            width: 40,
                          )
                        : Icon(
                            Icons.person,
                            color: AppColors.grey,
                            size: 40,
                          ),
                  ),
                  title: new Text(mydata.name!,
                      style: TextStyle(
                        color: Color.fromARGB(255, 35, 62, 195),
                      )),
                  subtitle: new Text(mydata.partner_latitude.toString()  
                      ", "  
                      mydata.partner_longitude.toString()),
                  isThreeLine: true,
                  trailing: Container(
                    height: 50.0,
                    width: 50.0,
                    child: TextButton(
                      onPressed: _callNumber,
                      child: Icon(Icons.phone_rounded),
                    ),
                  ),
                  onTap: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => PartnerDetails(mydata)));
                  },
                );
              },
            );
          },
        ));
  }
}

I want to Set mydata.partner_latitude and mydata.partner_longitude like !markers

i tried this Code

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:get/get.dart';
import 'package:odoo_common_code_latest/src/home/controller/home_controller.dart';
import 'package:odoo_common_code_latest/src/home/model/res_partner_model.dart';




class MapMarkers extends StatefulWidget {
  @override
  _MapMarkersState createState() => _MapMarkersState();
}

class _MapMarkersState extends State<MapMarkers> {
  // bach kanjib les information dyal data li kayen f home.dart
  ////////////////////////////////////////////////////////////
  final _homeController = Get.put(HomeController());

  List<Records> records = <Records>[];
  List<Records> mydata = <Records>[];
  List<Marker> _markers = [];

  void setMarkers() async {
    var notes = await _homeController.getPartners();
    final myCoordinates = await mydata;
    List<Marker> markers = myCoordinates.map((n) {
      LatLng point = LatLng(n.partner_latitude!, n.partner_longitude!);

      return Marker(
        markerId: MarkerId(n.name!),
      );
    }).toList();

    setState(() {
      _markers.clear();
      _markers = markers;
      markers.addAll(markers);
    });
  }

  @override
  void initState() {
    super.initState();
    print("debuuuuuuut");
    print(_markers);
    print("aftar");
    setState(() {
      print(_markers);
    });

    print('fiiiiiiiin');
    // _homeController.getPartners();
    setMarkers();
  }

  // var myMarkers = HashSet<Marker>();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(title: Text("!map markers")),
        body: Stack(
          children: [
            GoogleMap(
              myLocationButtonEnabled: true,
              myLocationEnabled: true,
              initialCameraPosition: CameraPosition(
                target: LatLng(5.7434382, -5.7869064),
                zoom: 12,
              ),
              onMapCreated: (GoogleMapController googleMapController) {
                setState(() {
                  _markers.addAll(_markers);
                });
              },
              // markers: _markers.toSet(),
              markers: Set<Marker>.of(_markers),
              // gestureRecognizers: Set()
              //   ..add(Factory<EagerGestureRecognizer>(
              //       () => EagerGestureRecognizer())),
              // markers: _marker.toSet(),
            ),
            Container(
              child: Image.asset(
                'assets/images/splash.png',
                width: 50,
              ),
              alignment: Alignment.topCenter,
            ),
            Container(
              child: Text(
                'Set.of([marker])',
                style: TextStyle(fontSize: 20),
              ),
              alignment: Alignment.bottomCenter,
            )
          ],
        ));
  }
}

page google map

CodePudding user response:

i find the Solution

the first is

List<Marker> _markers = [];
  void getMarkers() async {
    for (int index = 0;
        index < _homeController.listOfPartners.length;
        index  ) {
      print("================================================================");
      print(_homeController.listOfPartners[index].name);
      print(LatLng(_homeController.listOfPartners[index].partner_latitude!,
          _homeController.listOfPartners[index].partner_longitude!));
      print("================================================================");
      // if (_homeController.listOfPartners.length != null) {
      //     for (int i = 0; i < _homeController.listOfPartners.length; i  ) {
      // MarkerId markerId = new MarkerId(i.toString());
      // _markers.clear();
      _markers.add(Marker(
        markerId: MarkerId(_homeController.listOfPartners[index].id.toString()),
        position: LatLng(
            _homeController.listOfPartners[index].partner_latitude!,
            _homeController.listOfPartners[index].partner_longitude!),
        infoWindow: InfoWindow(
            onTap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => PartnerDetails(
                          _homeController.listOfPartners[index])));
            },
            title: _homeController.listOfPartners[index].name!,
            snippet: _homeController.listOfPartners[index].email!),
      ));
      setState(() {});
    }
  }

and

 markers: _markers.toSet(),
  • Related