‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

הגדרה של פרויקט Flutter

לפני שמגדירים פרויקט Flutter, צריך לוודא שביצעתם את השלבים המקדימים שמפורטים בקטע לפני שמתחילים. אחרי שמפעילים את החיוב ויוצרים מפתח API, אפשר להגדיר את פרויקט Flutter שבו משתמשים כדי לפתח את האפליקציה.

שלב 1: מתקינים את התוכנה הנדרשת

כדי ליצור פרויקט באמצעות חבילת מפות Google ל-Flutter, צריך להתקין את Flutter SDK ולהגדיר את סביבת הפיתוח לפלטפורמת היעד. פרטים נוספים זמינים במדריך להתקנת Flutter.

שלב 2: התקנת החבילה של מפות Google ל-Flutter בפרויקט חדש

‫Flutter מציעה את חבילת מפות Google ל-Flutter כפלאגין ל-Flutter.

יוצרים את פרויקט Flutter ומוסיפים את הפלאגין של מפות Google.

יוצרים פרויקט Flutter חדש באמצעות `flutter create`:
```
  flutter create google_maps_in_flutter --platforms=android,ios,web
  
  Creating project google_maps_in_flutter...
  [Listing of created files elided]
  Wrote 127 files.

  All done!
```
קוד האפליקציה נמצא ב-google_maps_in_flutter/lib/main.dart. כדי להריץ את האפליקציה, מקלידים:
```
  cd google_maps_in_flutter
  flutter run
```
האפליקציה הזו מיועדת ל-iOS, ל-Android ולאינטרנט. בשלב הזה, Google Maps SDK לא תומך באפליקציות למחשב מחוץ לדפדפן.

מוסיפים לפרויקט את הפלאגין של חבילת מפות Google ל-Flutter.

flutter pub add google_maps_flutter
  
  Resolving dependencies...
  [Listing of dependencies elided]

  Changed 14 dependencies!

שלב 3: מגדירים את גרסת הפלטפורמה

Android

מגדירים את גרסת ה-SDK המינימלית ל-Android.

פותחים את קובץ התצורה android/app/build.gradle בסביבת הפיתוח המשולבת (IDE) המועדפת.

משנים את הערך של android.defaultConfig.minSdkVersion ל-21:

  android {
    //...
    defaultConfig {
        applicationId "com.example.google_maps_in_flutter"
        minSdkVersion 21     // Set to 21
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
    //...
  }

כשמגדירים את defaultConfig, צריך לציין ApplicationID ייחודי משלכם.
מסנכרנים את השינויים בפרויקט עם Gradle.

iOS

מגדירים את גרסת הפלטפורמה המינימלית של iOS.

פותחים את קובץ התצורה ios/Podfile בסביבת הפיתוח המשולבת (IDE) המועדפת.

מוסיפים את השורות הבאות לתחילת קובץ ה-Podfile:

  # Set platform to 14.0 to enable latest Google Maps SDK
  platform :ios, '14.0'

שלב 4: מוסיפים את מפתח ה-API לפרויקט

בקטע לפני שמתחילים, יצרתם מפתח API לאפליקציה. עכשיו צריך להוסיף את המפתח הזה לפרויקט ב-Flutter. ב-Flutter, צריך להוסיף את מפתח ה-API הזה לכל פלטפורמות היעד: iOS,‏ Android ואינטרנט.

בדוגמאות הבאות, מחליפים את הערך YOUR_API_KEY במפתח ה-API שלכם.

Android

כדי לייעל את המשימה הזו, מומלץ להשתמש בפלאגין של Secrets Gradle ל-Android.

כדי להתקין את Secrets Gradle Plugin for Android ולשמור את מפתח ה-API:

ב-Android Studio, פותחים את הקובץ build.gradle.kts או build.gradle ברמה העליונה ומוסיפים את הקוד הבא לבלוק plugins.

Kotlin

plugins {
    // ...
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin") version "2.0.1" apply false
}

Groovy

plugins {
    // ...
    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin' version '2.0.1' apply false
}

פותחים את הקובץ build.gradle.kts או build.gradle ברמת המודול ומוסיפים את הקוד הבא לרכיב plugins.

Kotlin

plugins {
    id("com.android.application")
    // ...
    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
}

Groovy

plugins {
    id 'com.android.application'
    // ...
    id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
}

אם אתם משתמשים ב-Android Studio, סנכרנו את הפרויקט עם Gradle.
פותחים את הקובץ secrets.properties בספרייה ברמה העליונה ומוסיפים את הקוד הבא. מחליפים את YOUR_API_KEY במפתח ה-API שלכם. חשוב להוסיף את secrets.properties לקובץ .gitignore (או להחריג אותו בדרך אחרת ממערכת ניהול הגרסאות) כדי לא להכניס את מפתח ה-API לניהול הגרסאות.
הערה: אם הקובץ secrets.properties לא קיים, צריך ליצור אותו באותה תיקייה שבה נמצא הקובץ local.properties.
```
MAPS_API_KEY=YOUR_API_KEY
```
יוצרים את הקובץ local.defaults.properties בספרייה ברמה העליונה, באותה תיקייה שבה נמצא הקובץ secrets.properties, ואז מוסיפים את הקוד הבא.

הערה: צריך להזין את הקוד בדיוק כמו שהוא מופיע. לא מחליפים את הערך DEFAULT_API_KEY במפתח ה-API.
```
MAPS_API_KEY=DEFAULT_API_KEY
```
המטרה של הקובץ הזה היא לספק מיקום גיבוי למפתח ה-API אם הקובץ secrets.properties לא נמצא, כדי שה-builds לא ייכשלו. זה יכול לקרות אם משכפלים את האפליקציה ממערכת בקרת גרסאות שבה לא מופיע secrets.properties, ועדיין לא יצרתם קובץ secrets.properties באופן מקומי כדי לספק את מפתח ה-API.
בקובץ AndroidManifest.xml, עוברים אל com.google.android.geo.API_KEY ומעדכנים את המאפיין android:value באופן הבא:
```
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />
    
```
הערה: com.google.android.geo.API_KEY הוא שם המטא-נתונים המומלץ למפתח ה-API. מפתח עם השם הזה יכול לשמש לאימות בכמה ממשקי API שמבוססים על מפות Google בפלטפורמת Android, כולל Flutter SDK. כדי לשמור על תאימות לדורות קודמים, ה-API תומך גם בשם com.google.android.maps.v2.API_KEY. השם הקודם הזה מאפשר אימות רק ל-Android Maps API v2. אפליקציה יכולה לציין רק שם אחד של מטא-נתונים של מפתח API. אם מציינים את שניהם, ה-API מקפיץ הודעת שגיאה.

ב-Android Studio, פותחים את הקובץ build.gradle.kts או build.gradle ברמת המודול ועורכים את המאפיין secrets. אם המאפיין secrets לא קיים, מוסיפים אותו.

עורכים את המאפיינים של הפלאגין כדי להגדיר את propertiesFileName לערך "secrets.properties", את defaultPropertiesFileName לערך "local.defaults.properties", ואת כל שאר המאפיינים.

Kotlin

secrets {
    // To add your Maps API key to this project:
    // 1. If the secrets.properties file does not exist, create it in the root directory (the same folder as the root local.properties file).
    // 2. Add this line, where YOUR_API_KEY is your API key:
    //        MAPS_API_KEY=YOUR_API_KEY
    propertiesFileName = "secrets.properties"

    // A properties file containing default secret values. This file can be
    // checked in version control.
    defaultPropertiesFileName = "local.defaults.properties"
}

Groovy

secrets {
    // To add your Maps API key to this project:
    // 1. If the secrets.properties file does not exist, create it in the root directory (the same folder as the root local.properties file).
    // 2. Add this line, where YOUR_API_KEY is your API key:
    //        MAPS_API_KEY=YOUR_API_KEY
    propertiesFileName = "secrets.properties"

    // A properties file containing default secret values. This file can be
    // checked in version control.
    defaultPropertiesFileName = "local.defaults.properties"
}

הערה: כמו שמוצג למעלה, com.google.android.geo.API_KEY הוא שם המטא-נתונים המומלץ למפתח ה-API. אפשר להשתמש במפתח עם השם הזה כדי לבצע אימות למספר ממשקי API שמבוססים על מפות Google בפלטפורמת Android, כולל Flutter SDK. כדי לשמור על תאימות לדורות קודמים, ה-API תומך גם בשם com.google.android.maps.v2.API_KEY. השם הקודם הזה מאפשר אימות רק ל-Android Maps API v2. אפליקציה יכולה לציין רק שם אחד של מטא-נתונים של מפתח API. אם מציינים את שניהם, ה-API גורם לחריגה.

iOS

מוסיפים את מפתח ה-API לקובץ AppDelegate.swift.

פותחים את הקובץ ios/Runner/AppDelegate.swift בפרויקט Flutter באמצעות סביבת הפיתוח המשולבת (IDE) המועדפת.
כדי להוסיף את חבילת מפות Google ל-Flutter לאפליקציה, מוסיפים את הצהרת הייבוא הבאה:

import GoogleMaps

מוסיפים את מפתח ה-API ל-application(_:didFinishLaunchingWithOptions:) method, ומחליפים את YOUR_API_KEY במפתח ה-API שלכם:
```
GMSServices.provideAPIKey("YOUR_API_KEY")
```
שומרים וסוגרים את הקובץ AppDelegate.swift.

הקובץ AppDelegate.swift המלא אמור להיראות כך:

import UIKit
import Flutter
import GoogleMaps  // Add this import

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: Add your Google Maps API key
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

פיתוח אתרים

מוסיפים את מפתח ה-API לקובץ האפליקציה index.html.

פותחים את הקובץ web/index.html בפרויקט Flutter באמצעות סביבת הפיתוח המשולבת (IDE) המועדפת.

מוסיפים את תג הסקריפט הבא בתוך התג <head>, ומחליפים את YOUR_API_KEY במפתח ה-API.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

שומרים וסוגרים את הקובץ index.html.

המקטע head המלא של index.html אמור להיראות כך:

    <head>
      <base href="/">
      
      <meta charset="UTF-8">
      <meta content="IE=Edge" http-equiv="X-UA-Compatible">
      <meta name="description" content="A new Flutter project.">
      
      <!-- iOS meta tags & icons -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="apple-mobile-web-app-title" content="google_maps_in_flutter">
      <link rel="apple-touch-icon" href="icons/Icon-192.png">
      
      <script>
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
          key: "YOUR_API_KEY",
          v: "weekly",
          // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
          // Add other bootstrap parameters as needed, using camel case.
          });
      </script>
      
      <title>google_maps_in_flutter</title>
      <link rel="manifest" href="manifest.json">
    </head>

שלב 5: מוסיפים מפה

בדוגמה הבאה אפשר לראות איך מוסיפים מפה פשוטה לאפליקציית Flutter חדשה.

פותחים את הקובץ lib/main.dart בפרויקט Flutter באמצעות סביבת הפיתוח המשולבת (IDE) המועדפת.

מוסיפים או מעדכנים שיטות בשיטה הראשית שמוגדרת כברירת מחדל באפליקציה כדי ליצור ולאתחל מופע של mapController.

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

מפעילים אמולטורים או מכשירים שבהם רוצים להריץ את האפליקציה.
מריצים את האפליקציה. הפלט אמור להיראות כך:
```
  flutter run

   
    Multiple devices found:
    Android phone (mobile) • emulator-5554 • android-arm64  • Android 13 (API 33) (emulator)
    iPhone (mobile)  • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
    Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.124
    [1]: Android phone
    [2]: iPhone
    [3]: Chrome
    
    Please choose one (To quit, press "q/Q"): 
```
מקלידים את מספר הפלטפורמה שרוצים להפעיל. בכל פעם שתפעילו את flutter run, ‏ Flutter יציג לכם את האפשרויות האלה. אם במערכת הפיתוח שלכם לא פועל אמולטור או מכשיר בדיקה מחובר, Flutter אמור לבחור לפתוח את Chrome.

בכל פלטפורמה אמורה להופיע מפה שבמרכזה סידני, אוסטרליה. אם המפה לא מופיעה, צריך לוודא שמפתח ה-API נוסף לפרויקט היעד המתאים.

השלבים הבאים

עכשיו, כשיש לכם מפתח API ופרויקט Flutter, אתם יכולים ליצור ולהריץ אפליקציות. בחבילה של מפות Google ל-Flutter יש הרבה מדריכים ואפליקציות לדוגמה שיכולים לעזור לכם להתחיל. מידע נוסף זמין במקורות המידע הבאים:

מדריך בנושא הוספת מפה עם סמן
Codelabs ל-Flutter עם Google Maps Platform
דוגמאות קוד ב-GitHub

הגדרה של פרויקט Flutter קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

שלב 1: מתקינים את התוכנה הנדרשת

שלב 2: התקנת החבילה של מפות Google ל-Flutter בפרויקט חדש

שלב 3: מגדירים את גרסת הפלטפורמה

Android

iOS

שלב 4: מוסיפים את מפתח ה-API לפרויקט

Android

Kotlin

Groovy

Kotlin

Groovy

Kotlin

Groovy

iOS

פיתוח אתרים

שלב 5: מוסיפים מפה

השלבים הבאים

הגדרה של פרויקט Flutter