FlutterでGoogle Mapsのカスタムマーカーを作成する方法


以下に、シンプルで簡単な方法といくつかのコード例を示します。

  1. まず、google_maps_flutterパッケージをプロジェクトに追加します。pubspec.yamlファイルに以下の依存関係を追加します。
dependencies:
  google_maps_flutter: ^2.0.6
  1. カスタムマーカーを作成するには、BitmapDescriptor.fromAssetImageメソッドを使用します。このメソッドを使用すると、画像リソースからマーカーのアイコンを作成することができます。
import 'package:google_maps_flutter/google_maps_flutter.dart';
final markerIcon = await BitmapDescriptor.fromAssetImage(
  ImageConfiguration(devicePixelRatio: 2.5),
  'assets/custom_marker.png',
);
import 'package:google_maps_flutter/google_maps_flutter.dart';
final marker = Marker(
  markerId: MarkerId('custom_marker'),
  position: LatLng(35.6895, 139.6917),
  icon: markerIcon,
);
GoogleMap(
  markers: {marker},
  initialCameraPosition: CameraPosition(
    target: LatLng(35.6895, 139.6917),
    zoom: 12,
  ),
);

上記のコードでは、'assets/custom_marker.png'という画像ファイルを使用してカスタムマーカーを作成しています。適宜、自分のプロジェクトに合わせた画像ファイルを指定してください。

これで、FlutterでGoogle Mapsのカスタムマーカーを作成する方法がわかりました。これを応用して、さまざまなアイコンやデザインを持つマーカーを作成することができます。