[Flutter]Google Mapを表示させる

google_maps_flutter | Flutter Package

pubspec.yamlに以下を追加

dependencies:
 google_maps_flutter: ^1.0.6

まずはこちらでAPI keyを取得する

Geo-location APIs  |  Google Maps Platform  |  Google Cloud

Androidの場合
API keyを以下に含める

android/app/src/main/AndroidManifest.xml:

<manifest ...
 <application ...
   <meta-data android:name="com.google.android.geo.API_KEY"
              android:value="YOUR KEY HERE"/> 

 
iOSの場合

API keyを以下に含める
ios/Runner/AppDelegate.m:

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
   didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 [GMSServices provideAPIKey:@"YOUR KEY HERE"];
 [GeneratedPluginRegistrant registerWithRegistry:self];
 return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

又は

ios/Runner/AppDelegate.swift:

import UIKit
import Flutter
import GoogleMaps
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
 override func application(
   _ application: UIApplication,
   didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
 ) -> Bool {
   GMSServices.provideAPIKey("YOUR KEY HERE")
   GeneratedPluginRegistrant.register(with: self)
   return super.application(application, didFinishLaunchingWithOptions: launchOptions)
 }
}

これでflutterのウィジェットから呼び出せる

flutter/plugins

こちらのサンプルをそのまま出力すると

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Google Maps Demo',
     home: MapSample(),
   );
 }
}
class MapSample extends StatefulWidget {
 @override
 State<MapSample> createState() => MapSampleState();
}
class MapSampleState extends State<MapSample> {
 Completer<GoogleMapController> _controller = Completer();
 static final CameraPosition _kGooglePlex = CameraPosition(
   target: LatLng(37.42796133580664, -122.085749655962),
   zoom: 14.4746,
 );
 static final CameraPosition _kLake = CameraPosition(
     bearing: 192.8334901395799,
     target: LatLng(37.43296265331129, -122.08832357078792),
     tilt: 59.440717697143555,
     zoom: 19.151926040649414);
 @override
 Widget build(BuildContext context) {
   return new Scaffold(
     body: GoogleMap(
       mapType: MapType.hybrid,
       initialCameraPosition: _kGooglePlex,
       onMapCreated: (GoogleMapController controller) {
         _controller.complete(controller);
       },
     ),
     floatingActionButton: FloatingActionButton.extended(
       onPressed: _goToTheLake,
       label: Text('To the lake!'),
       icon: Icon(Icons.directions_boat),
     ),
   );
 }
 Future<void> _goToTheLake() async {
   final GoogleMapController controller = await _controller.future;
   controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
 }
}

以下の様な画面が表示される様になる