Add Google Maps to the background (#5)

* Added .env file for Google Map API key

* Added google_maps_flutter

* Added map widget to home page

* Maps is working on first try

.vscode/launch.json

@@ -16,7 +16,7 @@
       "cwd": "src\\client",
       "request": "launch",
       "type": "dart",
-      "args": ["-d", "chrome"]
+      "args": ["-d", "chrome", "--dart-define-from-file=.env"],
     },
   ]
 }

src/client/.env.template

@@ -0,0 +1 @@
+GOOGLE_MAPS_API_KEY=

src/client/.gitignore

@@ -17,6 +17,7 @@ migrate_working_dir/
 *.ipr
 *.iws
 .idea/
+.env
 
 # The .vscode folder contains launch configuration and tasks you configure in
 # VS Code which you may wish to be included in version control, so this line

src/client/lib/services.dart

@@ -1,8 +1,10 @@
 /// Defines and manages the different services used by the app.
 library;
 
+
 import "src/services/api.dart";
 import "src/services/service.dart";
+import "src/services/maps.dart";
 
 /// A [Service] that manages all other services used by the app.
 class Services extends Service {
@@ -12,8 +14,10 @@ class Services extends Service {
   // Define your services here
   final api = ApiService();
 
+  final maps = GoogleMapsService();
+
 	/// The different services to initialize, in this order.
-	List<Service> get services => [api];
+	List<Service> get services => [api, maps];
 
 	@override
 	Future<void> init() async {

src/client/lib/src/pages/home.dart

@@ -1,5 +1,6 @@
 import "package:client/data.dart";
 import "package:flutter/material.dart";
+import "package:google_maps_flutter/google_maps_flutter.dart";
 
 import "package:client/view_models.dart";
 import "package:client/widgets.dart";
@@ -78,6 +79,18 @@ class HomePage extends ReactiveWidget<HomeModel> {
                 "Get on at ${step.enter.lat}, ${step.enter.long}\n"
                 "Get off at ${step.exit.lat}, ${step.exit.long}",
               ),
+            SizedBox(
+              width: 300,
+              height: 300,
+              child: model.isGoogleReady
+                ? const GoogleMap(
+                  initialCameraPosition: CameraPosition(
+                    target: LatLng(42.10125081757972, -75.94181323552698),
+                    zoom: 14,
+                  ),
+                )
+                : const Center(child: CircularProgressIndicator()),
+            ),
           ],
         ),
       ),

src/client/lib/src/services/maps.dart

@@ -0,0 +1,12 @@
+import "package:web/web.dart";
+import "service.dart";
+
+class GoogleMapsService extends Service {
+  @override
+  Future<void> init() async {
+    const key = String.fromEnvironment("GOOGLE_MAPS_API_KEY");
+    final script = document.createElement("script") as HTMLScriptElement;
+    script.src = "https://maps.googleapis.com/maps/api/js?key=$key";
+    document.head?.appendChild(script);
+  }
+}

src/client/lib/src/view_models/home.dart

@@ -19,6 +19,14 @@ class HomeModel extends ViewModel {
   double? get endLongitude => double.tryParse(endLongitudeController.text);
 
   bool isSearching = false;
+  bool isGoogleReady = false;
+
+  @override
+  Future<void> init() async {
+    await Future<void>.delayed(const Duration(seconds: 2));
+    isGoogleReady = true;
+    notifyListeners();
+  }
 
   Future<void> search() async {
     final start = (lat: startLatitude, long: startLongitude);

src/client/pubspec.lock

@@ -1,6 +1,14 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  args:
+    dependency: transitive
+    description:
+      name: args
+      sha256: d0481093c50b1da8910eb0bb301626d4d8eb7284aa739614d2b394ee09e3ea04
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.7.0"
   async:
     dependency: transitive
     description:
@@ -17,6 +25,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.2"
+  build_cli_annotations:
+    dependency: transitive
+    description:
+      name: build_cli_annotations
+      sha256: b59d2769769efd6c9ff6d4c4cede0be115a566afc591705c2040b707534b1172
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
   characters:
     dependency: transitive
     description:
@@ -41,6 +57,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.19.1"
+  convert:
+    dependency: transitive
+    description:
+      name: convert
+      sha256: b30acd5944035672bc15c6b7a8b47d773e41e2f17de064350988c5d02adb1c68
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.2"
   csslib:
     dependency: transitive
     description:
@@ -49,6 +73,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.2"
+  dhttpd:
+    dependency: "direct dev"
+    description:
+      name: dhttpd
+      sha256: "2e24765d7569b8e0a02a441e3cf96f09cca69dfecba646e7e9f6b3ab45a2f3fe"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.0"
   fake_async:
     dependency: transitive
     description:
@@ -62,6 +94,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_plugin_android_lifecycle:
+    dependency: transitive
+    description:
+      name: flutter_plugin_android_lifecycle
+      sha256: "5a1e6fb2c0561958d7e4c33574674bda7b77caaca7a33b758876956f2902eea3"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.27"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -80,6 +120,54 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "14.8.1"
+  google_maps:
+    dependency: transitive
+    description:
+      name: google_maps
+      sha256: "4d6e199c561ca06792c964fa24b2bac7197bf4b401c2e1d23e345e5f9939f531"
+      url: "https://pub.dev"
+    source: hosted
+    version: "8.1.1"
+  google_maps_flutter:
+    dependency: "direct main"
+    description:
+      name: google_maps_flutter
+      sha256: b42ff7f3875a5eedbe388d883100561b85c62beed1c39ad66dd60537c75bb424
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.12.0"
+  google_maps_flutter_android:
+    dependency: transitive
+    description:
+      name: google_maps_flutter_android
+      sha256: "0ede4ae8326335c0c007c8c7a8c9737449263123385e2bdf49f3e71103b2dc2e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.16.0"
+  google_maps_flutter_ios:
+    dependency: transitive
+    description:
+      name: google_maps_flutter_ios
+      sha256: ef72c822930ce69515cb91c10cd88cfb8b26296f765808a43cbc9a10eaffacfe
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.15.0"
+  google_maps_flutter_platform_interface:
+    dependency: transitive
+    description:
+      name: google_maps_flutter_platform_interface
+      sha256: "970c8f766c02909c7be282dea923c971f83a88adaf07f8871d0aacebc3b07bb2"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.11.1"
+  google_maps_flutter_web:
+    dependency: transitive
+    description:
+      name: google_maps_flutter_web
+      sha256: a45786ea6691cc7cdbe2cf3ce2c2daf4f82a885745666b4a36baada3a4e12897
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.12"
   html:
     dependency: "direct main"
     description:
@@ -160,6 +248,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.16.0"
+  mime:
+    dependency: transitive
+    description:
+      name: mime
+      sha256: "41a20518f0cb1256669420fdba0cd90d21561e560ac240f26ef8322e45bb7ed6"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.0"
   path:
     dependency: transitive
     description:
@@ -168,6 +264,38 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.9.1"
+  plugin_platform_interface:
+    dependency: transitive
+    description:
+      name: plugin_platform_interface
+      sha256: "4820fbfdb9478b1ebae27888254d445073732dae3d6ea81f0b7e06d5dedc3f02"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.8"
+  sanitize_html:
+    dependency: transitive
+    description:
+      name: sanitize_html
+      sha256: "12669c4a913688a26555323fb9cec373d8f9fbe091f2d01c40c723b33caa8989"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
+  shelf:
+    dependency: transitive
+    description:
+      name: shelf
+      sha256: e7dd780a7ffb623c57850b33f43309312fc863fb6aa3d276a754bb299839ef12
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.2"
+  shelf_static:
+    dependency: transitive
+    description:
+      name: shelf_static
+      sha256: c87c3875f91262785dade62d135760c2c69cb217ac759485334c5857ad89f6e3
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.3"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -197,6 +325,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.4"
+  stream_transform:
+    dependency: transitive
+    description:
+      name: stream_transform
+      sha256: ad47125e588cfd37a9a7f86c7d6356dde8dfe89d071d293f80ca9e9273a33871
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.1"
   string_scanner:
     dependency: transitive
     description:
@@ -254,7 +390,7 @@ packages:
     source: hosted
     version: "15.0.0"
   web:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: web
       sha256: "868d88a33d8a87b18ffc05f9f030ba328ffefba92d6c127917a2ba740f9cfe4a"
@@ -263,4 +399,4 @@ packages:
     version: "1.1.1"
 sdks:
   dart: ">=3.7.0-0 <4.0.0"
-  flutter: ">=3.22.0"
+  flutter: ">=3.27.0"

src/client/pubspec.yaml

@@ -10,8 +10,10 @@ dependencies:
   flutter:
     sdk: flutter
   go_router: ^14.2.7
+  google_maps_flutter: ^2.12.0
   html: ^0.15.5
   http: ^1.3.0
+  web: ^1.1.1
 
 dev_dependencies:
   dhttpd: ^4.1.0