การเพิ่มแผนที่ด้วยเครื่องหมาย
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
บทนำ
บทแนะนำนี้จะแสดงวิธีเพิ่ม Google Maps ลงในแอป Flutter แผนที่จะมีเครื่องหมายหรือที่เรียกว่าหมุดเพื่อระบุตำแหน่งที่เฉพาะเจาะจง
การรับรหัส
โคลนหรือดาวน์โหลดที่เก็บตัวอย่าง Flutter คุณดูโค้ด
ตัวอย่างได้ใน
ไดเรกทอรี google_maps
การตั้งค่าโปรเจ็กต์การพัฒนา
โปรดตรวจสอบว่าคุณได้ทำตามขั้นตอนที่ระบุไว้ในคำแนะนำตั้งค่าโปรเจ็กต์ Flutter
แล้วก่อนที่จะดำเนินการต่อในหัวข้อนี้
1. นำเข้าแพ็กเกจ Google Maps สำหรับ Flutter
- เปิดไฟล์
main.dart ใน IDE ที่ต้องการ
- ตรวจสอบว่าได้เพิ่มคำสั่งนำเข้าต่อไปนี้ลงในไฟล์แล้ว
import 'package:google_maps_flutter/google_maps_flutter.dart';
2. เพิ่ม Google Maps ลงในแอป Flutter
เพิ่มวิดเจ็ต GoogleMap เป็นเนื้อหาภายในวิดเจ็ต Scaffold
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
- ตรวจสอบว่าคุณมีการเชื่อมต่อ Wi-Fi หรือ 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 สำหรับ Flutter จะแสดงเนื้อหาของหน้าต่างข้อมูล
เมื่อผู้ใช้แตะเครื่องหมาย คุณไม่จำเป็นต้องเพิ่มเครื่องมือฟังการคลิก
สำหรับเครื่องหมายหากต้องการใช้ลักษณะการทำงานเริ่มต้น
ยินดีด้วย คุณได้สร้างแอป Flutter ที่แสดงแผนที่ Google พร้อมเครื่องหมายเพื่อระบุตำแหน่งที่เฉพาะเจาะจงและให้ข้อมูลเพิ่มเติมในหน้าต่างข้อมูล นอกจากนี้ คุณยังได้เรียนรู้วิธีใช้แพ็กเกจ Google Maps สำหรับ Flutter ด้วย
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-29 UTC
[null,null,["อัปเดตล่าสุด 2025-08-29 UTC"],[[["\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."]]
