## Introduction

![Map with Marker Example](https://developers.google.com/static/maps/flutter-package/images/map-with-marker.png)

This tutorial shows you how to add a Google map to your Flutter app. The map
includes a marker, also called a pin, to indicate a specific location.

## Getting the code

Clone or download the [Flutter samples
repository](https://github.com/flutter/samples/). The [sample
code](https://github.com/flutter/samples/tree/main/google_maps) can be found in
the `google_maps` directory.

## Setting up your development project

Be sure you've completed the steps outlined in the [Set up a Flutter project](https://developers.google.com/maps/flutter-package/config.md.txt)
guide before continuing with this topic.

## 1. Import the Google Maps for Flutter package

1. Open your `main.dart` file in your preferred IDE.
2. Verify that following import statement has been added to the file:

```
import 'package:google_maps_flutter/google_maps_flutter.dart';
```

## 2. Add Google Maps to your Flutter app

Within the `Scaffold` widget, add a `GoogleMap` widget as
the body.

```
GoogleMap(
   initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
   ),
   markers: {
      const Marker(
         markerId: MarkerId('Sydney'),
         position: LatLng(-33.86, 151.20),
      )
   },
)
```

<br />

- The `markerId` option labels your marker.
- The `position` option sets where the marker appears on your map.

## 3. Building and running your app

Start the Flutter app using one of the following options:

1. From your IDE, click the `Run` button
2. From the command line, run `flutter run`.

You should see a map with a marker centered on Sydney on the east coast of
Australia, similar to the image on this page.

### Troubleshooting

- If you don't see a map, check that you've obtained an [API key](https://developers.google.com/maps/documentation/ios-sdk/config.md.txt#get-key) and added it to the app.
- If you used the iOS bundle identifier to restrict the API key, edit the key to add the bundle identifier for the app: `com.google.examples.map-with-marker`.
- Ensure that you have a good WiFi or GPS connection.
- Use the [Flutter DevTools](https://docs.flutter.dev/tools/devtools/overview) to view logs and debug the app.
- You can learn more about [Running a Flutter](https://developers.google.com/maps/flutter-package/(https:/docs.flutter.dev/get-started/test-drive?tab=vscode) app.

## 4. Understanding the code

This code can be found on
[GitHub](https://github.com/flutter/samples/tree/main/google_maps).

1. Import the necessary packages and initialize the app.

   ```
      import 'package:flutter/material.dart';
      import 'package:google_maps_flutter/google_maps_flutter.dart';

      void main() => runApp(const MyApp());

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

      @override
         State<MyApp> createState() => _MyAppState();
      }
   ```
2. Create a map centered on Sydney, Australia.

   ```
   class _MyAppState extends State<MyApp> {
      
      late GoogleMapController mapController;
      
      final LatLng _center = const LatLng(-33.86, 151.20);
      
      void _onMapCreated(GoogleMapController controller) {
         mapController = controller;
      }
   ```
3. Add the widgets needed to display a Map in an app.

   ```
   @override
   Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: const Text('Maps Sample App'),
             backgroundColor: Colors.green[700],
           ),
           body: GoogleMap(
               onMapCreated: _onMapCreated,
               initialCameraPosition: CameraPosition(
                 target: _center,
                 zoom: 11.0,
               ), // CameraPosition
           ), // GoogleMap
         ), // Scaffold
       ); // MaterialApp
     }
   }
   ```
4. Add the markers widgets to add the widget to your app.

   ```
      body: GoogleMap(
         onMapCreated: _onMapCreated,
         initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
         ),
         markers: {
            const Marker(
                  markerId: const MarkerId("Sydney"),
                  position: LatLng(-33.86, 151.20),
               ), // Marker
         }, // markers
      ), // GoogleMap
      ...
   ```
5. Add an info window to the marker.

   ```
         const Marker(
               markerId: const MarkerId("Sydney"),
               position: LatLng(-33.86, 151.20),
               infoWindow: InfoWindow(
                  title: "Sydney",
                  snippet: "Capital of New South Wales",
               ), // InfoWindow
         ), //Marker
         ...
   ```
   By default, the Google Maps for Flutter package displays the content of the info window when the user taps a marker. There's no need to add a click listener for the marker if you're happy to use the default behavior.

Congratulations! You've built an Flutter app that displays a Google map with a
marker to indicate a particular location and provide additional information in
an info window. You've also learned how to use the Google Maps for Flutter package.