Flutter : how to use google maps

Dr_Skele·2023년 3월 28일
0

Flutter

목록 보기
18/19

Guide to google maps on flutter
https://codelabs.developers.google.com/codelabs/google-maps-in-flutter?hl=en#0

How to get current location
https://pub.dev/packages/geolocator

With latitude and longitude, a marker can be set on the google map.


class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Google Office Locations'),
          backgroundColor: Colors.green[700],
        ),
        body: FutureBuilder(
            future: Geolocator.getCurrentPosition(),
            builder: (context, snapshot) {
              var location = snapshot.data;
              if (snapshot.hasData && location is Position) {
                print(
                    '${snapshot.data!.latitude}, ${snapshot.data!.longitude}');

                return GoogleMap(
                    initialCameraPosition: CameraPosition(
                      target: LatLng(location.latitude, location.longitude),
                      zoom: 11,
                    ),
                    markers: {
                      Marker(
                        markerId: MarkerId(
                            (location.timestamp ?? DateTime.now()).toString()),
                        position: LatLng(location.latitude, location.longitude),
                        infoWindow: InfoWindow(
                          title: 'location',
                          snippet: 'snippet',
                        ),
                      ),
                    } 
                    );
              }
              return Center(
                child: CircularProgressIndicator(),
              );
            }),
      ),
    );
  }
}

GoogleMap widget also provides 'onMapCreated' parameter which is called when map is generated, so instead of using FutureBuilder, location can be obtained after map generation and set the marker afterward using setState().

profile
Tireless And Restless Debugging In Source : TARDIS

3개의 댓글

comment-user-thumbnail
2025년 1월 6일

This post is very helpful! The guide on using Google Maps in Flutter is clear and detailed. Utilizing Geolocator to get the current my location and display it on the map is a great feature. Thank you, Dr_Skele, for sharing this useful code and information!

답글 달기
comment-user-thumbnail
2025년 5월 2일

You can use Google Maps too, right? Since they use satellite images, can’t you monitor what’s going on in different regions? Like, I was thinking this might be useful for farmers so they don’t have to be at the field or farm all the time and can watch remotely.

답글 달기
comment-user-thumbnail
2025년 5월 2일

Google Maps is probably not that effective. It’s more like just maps, really, and for monitoring crop health or the stuff you’re talking about, it’s better to use special platforms like EOSDA. For farmers and agronomists, these are super useful tools to remotely and properly keep track of what’s going on with the crops and make decisions about irrigation, fertilizers, where and how much. And that’s just a small part of where satellite data can be used.

답글 달기