اضافه کردن نقشه با نشانگر
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
مقدمه
این آموزش به شما نشان می دهد که چگونه یک نقشه گوگل را به برنامه Flutter خود اضافه کنید. این نقشه شامل یک نشانگر است که پین نیز نامیده می شود تا مکان خاصی را نشان دهد.
دریافت کد
مخزن نمونه فلاتر را کلون یا دانلود کنید. کد نمونه را می توان در فهرست راهنمای google_maps یافت.
راه اندازی پروژه توسعه خود
قبل از ادامه این موضوع مطمئن شوید که مراحل ذکر شده در راهنمای پروژه راه اندازی فلاتر را تکمیل کرده اید.
1. بسته Google Maps for Flutter را وارد کنید
- فایل
main.dart خود را در IDE دلخواه خود باز کنید. - بررسی کنید که عبارت import زیر به فایل اضافه شده است:
import 'package:google_maps_flutter/google_maps_flutter.dart';
2. Google Maps را به برنامه Flutter خود اضافه کنید
در ویجت Scaffold ، ویجت GoogleMap به عنوان بدنه اضافه کنید.
GoogleMap(
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
markers: {
const Marker(
markerId: MarkerId('Sydney'),
position: LatLng(-33.86, 151.20),
)
},
)- گزینه
markerId نشانگر شما را برچسب گذاری می کند. - گزینه
position را تعیین می کند که نشانگر روی نقشه شما ظاهر شود.
3. برنامه خود را بسازید و اجرا کنید
برنامه Flutter را با استفاده از یکی از گزینه های زیر راه اندازی کنید:
- از IDE خود، روی دکمه
Run کلیک کنید - از خط فرمان،
flutter run اجرا کنید.
شما باید نقشه ای را با یک نشانگر در مرکز سیدنی در ساحل شرقی استرالیا، مشابه تصویر این صفحه ببینید.
عیب یابی
- اگر نقشه‌ای را نمی‌بینید، بررسی کنید که یک کلید API دریافت کرده‌اید و آن را به برنامه اضافه کرده‌اید.
- اگر از شناسه بسته iOS برای محدود کردن کلید API استفاده کرده‌اید، کلید را ویرایش کنید تا شناسه بسته برای برنامه اضافه شود:
com.google.examples.map-with-marker . - اطمینان حاصل کنید که اتصال WiFi یا GPS خوبی دارید.
- از Flutter DevTools برای مشاهده گزارش‌ها و اشکال‌زدایی برنامه استفاده کنید.
- می‌توانید درباره اجرای برنامه Flutter اطلاعات بیشتری کسب کنید.
4. درک کد
این کد را می توانید در GitHub پیدا کنید.
- بسته های لازم را وارد کنید و برنامه را مقداردهی اولیه کنید.
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();
} - یک نقشه با مرکز سیدنی، استرالیا ایجاد کنید.
class _MyAppState extends State<MyApp> {
late GoogleMapController mapController;
final LatLng _center = const LatLng(-33.86, 151.20);
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
} - ویجت های مورد نیاز برای نمایش نقشه در یک برنامه را اضافه کنید.
@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
}
} - ویجت های نشانگر را اضافه کنید تا ویجت را به برنامه خود اضافه کنید.
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
... - یک پنجره اطلاعات به نشانگر اضافه کنید.
const Marker(
markerId: const MarkerId("Sydney"),
position: LatLng(-33.86, 151.20),
infoWindow: InfoWindow(
title: "Sydney",
snippet: "Capital of New South Wales",
), // InfoWindow
), //Marker
... به طور پیش‌فرض، بسته Google Maps for Flutter محتوای پنجره اطلاعات را زمانی که کاربر روی یک نشانگر ضربه می‌زند، نمایش می‌دهد. اگر از رفتار پیش‌فرض راضی هستید، نیازی به افزودن یک کلیک شنونده برای نشانگر نیست.
تبریک می گویم! شما یک برنامه Flutter ساخته اید که نقشه گوگل را با یک نشانگر برای نشان دادن یک مکان خاص و ارائه اطلاعات اضافی در پنجره اطلاعات نمایش می دهد. همچنین نحوه استفاده از بسته Google Maps for Flutter را یاد گرفته اید.
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده Oracle و/یا شرکتهای وابسته به آن است.
تاریخ آخرین بهروزرسانی 2025-09-03 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-09-03 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003eThis tutorial provides a step-by-step guide on integrating a Google map with a marker into your Flutter application.\u003c/p\u003e\n"],["\u003cp\u003eYou will learn how to import the necessary package, add the Google Map widget, and position a marker using latitude and longitude coordinates.\u003c/p\u003e\n"],["\u003cp\u003eThe tutorial covers troubleshooting common issues like API key setup, connectivity problems, and debugging techniques.\u003c/p\u003e\n"],["\u003cp\u003eIt also includes a detailed explanation of the code, breaking down the process of initializing the map, adding markers, and displaying information windows.\u003c/p\u003e\n"],["\u003cp\u003eYou can find the complete source code on GitHub for easy reference and implementation in your projects.\u003c/p\u003e\n"]]],["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"],null,["# Adding a Map with Marker\n\nIntroduction\n------------\n\nThis tutorial shows you how to add a Google map to your Flutter app. The map\nincludes a marker, also called a pin, to indicate a specific location.\n\nGetting the code\n----------------\n\nClone or download the [Flutter samples\nrepository](https://github.com/flutter/samples/). The [sample\ncode](https://github.com/flutter/samples/tree/main/google_maps) can be found in\nthe `google_maps` directory.\n\nSetting up your development project\n-----------------------------------\n\nBe sure you've completed the steps outlined in the [Set up a Flutter project](/maps/flutter-package/config)\nguide before continuing with this topic.\n\n1. Import the Google Maps for Flutter package\n---------------------------------------------\n\n1. Open your `main.dart` file in your preferred IDE.\n2. Verify that following import statement has been added to the file:\n\n```python\nimport 'package:google_maps_flutter/google_maps_flutter.dart';\n```\n\n2. Add Google Maps to your Flutter app\n--------------------------------------\n\nWithin the `Scaffold` widget, add a `GoogleMap` widget as\nthe body. \n\n```gdscript\nGoogleMap(\n initialCameraPosition: CameraPosition(\n target: _center,\n zoom: 11.0,\n ),\n markers: {\n const Marker(\n markerId: MarkerId('Sydney'),\n position: LatLng(-33.86, 151.20),\n )\n },\n)\n```\n\n\u003cbr /\u003e\n\n- The `markerId` option labels your marker.\n- The `position` option sets where the marker appears on your map.\n\n3. Building and running your app\n--------------------------------\n\nStart the Flutter app using one of the following options:\n\n1. From your IDE, click the `Run` button\n2. From the command line, run `flutter run`.\n\nYou should see a map with a marker centered on Sydney on the east coast of\nAustralia, similar to the image on this page.\n\n### Troubleshooting\n\n- If you don't see a map, check that you've obtained an [API key](https://developers.google.com/maps/documentation/ios-sdk/config#get-key) and added it to the app.\n- 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`.\n- Ensure that you have a good WiFi or GPS connection.\n- Use the [Flutter DevTools](https://docs.flutter.dev/tools/devtools/overview) to view logs and debug the app.\n- You can learn more about [Running a Flutter](/maps/flutter-package/(https:/docs.flutter.dev/get-started/test-drive?tab=vscode) app.\n\n4. Understanding the code\n-------------------------\n\nThis code can be found on\n[GitHub](https://github.com/flutter/samples/tree/main/google_maps).\n\n1. Import the necessary packages and initialize the app. \n\n ```python\n import 'package:flutter/material.dart';\n import 'package:google_maps_flutter/google_maps_flutter.dart';\n\n void main() =\u003e runApp(const MyApp());\n\n class MyApp extends StatefulWidget {\n const MyApp({super.key});\n\n @override\n State\u003cMyApp\u003e createState() =\u003e _MyAppState();\n }\n ```\n2. Create a map centered on Sydney, Australia. \n\n ```gdscript\n class _MyAppState extends State\u003cMyApp\u003e {\n \r\n late GoogleMapController mapController;\n \r\n final LatLng _center = const LatLng(-33.86, 151.20);\n \r\n void _onMapCreated(GoogleMapController controller) {\n mapController = controller;\n }\n ```\n3. Add the widgets needed to display a Map in an app. \n\n ```gdscript\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n home: Scaffold(\n appBar: AppBar(\n title: const Text('Maps Sample App'),\n backgroundColor: Colors.green[700],\n ),\n body: GoogleMap(\n onMapCreated: _onMapCreated,\n initialCameraPosition: CameraPosition(\n target: _center,\n zoom: 11.0,\n ), // CameraPosition\n ), // GoogleMap\n ), // Scaffold\n ); // MaterialApp\n }\n }\n ```\n4. Add the markers widgets to add the widget to your app. \n\n ```gdscript\n body: GoogleMap(\n onMapCreated: _onMapCreated,\n initialCameraPosition: CameraPosition(\n target: _center,\n zoom: 11.0,\n ),\n markers: {\n const Marker(\n markerId: const MarkerId(\"Sydney\"),\n position: LatLng(-33.86, 151.20),\n ), // Marker\n }, // markers\n ), // GoogleMap\n ...\n ```\n5. Add an info window to the marker. \n\n ```gdscript\n const Marker(\n markerId: const MarkerId(\"Sydney\"),\n position: LatLng(-33.86, 151.20),\n infoWindow: InfoWindow(\n title: \"Sydney\",\n snippet: \"Capital of New South Wales\",\n ), // InfoWindow\n ), //Marker\n ...\n ```\n 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.\n\nCongratulations! You've built an Flutter app that displays a Google map with a\nmarker to indicate a particular location and provide additional information in\nan info window. You've also learned how to use the Google Maps for Flutter package."]]
