Menambahkan Peta dengan Penanda

Pengantar

Contoh Peta dengan Penanda

Tutorial ini menunjukkan cara menambahkan peta Google ke aplikasi Flutter Anda. Peta tersebut mencakup penanda, yang juga disebut pin, untuk menunjukkan lokasi tertentu.

Mendapatkan kode

Lakukan clone atau download repositori contoh Flutter. Kode contoh ini dapat ditemukan di direktori google_maps.

Menyiapkan project pengembangan

Pastikan Anda telah menyelesaikan langkah-langkah yang dijelaskan dalam panduan Menyiapkan proyek Flutter sebelum melanjutkan topik ini.

1. Mengimpor Google Maps untuk paket Flutter

  1. Buka file main.dart Anda di IDE pilihan Anda.
  2. Periksa bahwa pernyataan impor berikut telah ditambahkan ke file tersebut:
import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Menambahkan Google Maps ke aplikasi Flutter Anda

Dalam widget Scaffold, tambahkan widget GoogleMap sebagai isi. 

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

  • Opsi markerId berfungsi untuk melabeli penanda Anda.
  • Opsi position berfungsi untuk menetapkan tempat kemunculan penanda di peta Anda.

3. Membuat dan menjalankan aplikasi

Mulai aplikasi Flutter menggunakan salah satu opsi berikut:

  1. Dari IDE Anda, klik tombol Run.
  2. Dari command line, jalankan flutter run.

Anda akan melihat peta dengan penanda yang berpusat di Sydney di pantai timur Australia, sama seperti gambar di halaman ini.

Pemecahan masalah

  • Jika peta tidak muncul, pastikan Anda telah mendapatkan kunci API dan menambahkannya ke aplikasi.
  • Jika Anda menggunakan ID paket iOS untuk membatasi kunci API, edit kunci ini agar dapat menambahkan ID paket tersebut untuk aplikasi: com.google.examples.map-with-marker.
  • Pastikan Anda memiliki koneksi WiFi atau GPS yang baik.
  • Gunakan Flutter DevTools untuk melihat log dan men-debug aplikasi.
  • Anda dapat mempelajari lebih lanjut cara Menjalankan aplikasi Flutter.

4. Memahami kode

Kode ini dapat ditemukan di GitHub.

  1. Impor paket yang diperlukan dan inisialisasi aplikasi. 
       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. Buat peta yang berpusat di 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. Tambahkan widget yang diperlukan untuk menampilkan Peta di aplikasi. 
    @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. Tambahkan widget penanda untuk menambahkan widget tersebut ke aplikasi Anda. 
       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. Tambahkan jendela info ke penanda. 
          const Marker(
            markerId: const MarkerId("Sydney"),
            position: LatLng(-33.86, 151.20),
            infoWindow: InfoWindow(
               title: "Sydney",
               snippet: "Capital of New South Wales",
            ), // InfoWindow
      ), //Marker
      ...
    Secara default, paket Google Maps for Flutter menampilkan konten jendela info saat pengguna mengetuk penanda. Anda tidak perlu menambahkan pemroses klik untuk penanda jika sudah puas menggunakan perilaku default.

Selamat! Anda telah membuat aplikasi Flutter yang menampilkan peta Google dengan penanda untuk menunjukkan lokasi tertentu dan memberikan informasi tambahan di jendela info. Anda juga telah mempelajari cara menggunakan paket Google Maps for Flutter.