Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.google.com/maps/flutter-plugin/map-with-marker below:

Adding a Map with Marker | Google Maps for Flutter

Stay organized with collections Save and categorize content based on your preferences.

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.

Clone or download the Flutter samples repository. The sample code can be found in the google_maps directory.

Be sure you've completed the steps outlined in the Set up a Flutter project guide before continuing with this topic.

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';

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),
      )
   },
)

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

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.

• If you don't see a map, check that you've obtained an API 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 to view logs and debug the app.
• You can learn more about Running a Flutter app.

This code can be found on GitHub.

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.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-08-14 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-14 UTC."],[[["This tutorial provides a step-by-step guide on integrating a Google map with a marker into your Flutter application."],["You will learn how to import the necessary package, add the Google Map widget, and position a marker using latitude and longitude coordinates."],["The tutorial covers troubleshooting common issues like API key setup, connectivity problems, and debugging techniques."],["It also includes a detailed explanation of the code, breaking down the process of initializing the map, adding markers, and displaying information windows."],["You can find the complete source code on GitHub for easy reference and implementation in your projects."]]],["To add a Google Map to a Flutter app, first, import the `google_maps_flutter` package. Within the `Scaffold` widget, add a `GoogleMap` widget, setting the `initialCameraPosition` and `markers`. Each marker requires a `markerId` and `position`. Run the app using the IDE or command line (`flutter run`). To add information to a marker use `infoWindow`. Debugging involves checking for an API key, connection issues, and using Flutter DevTools. The code is also available on Github.\n"]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4