[flutter] How to apply custom markers to Google maps(google map에 custom marker를 적용하는 방법)

How to apply custom markers to Google maps

[flutter] google map에 custom marker를 적용하는 방법

 

문제 상황 (a problem situation)

 

google map에 표시하는 marker의 아이콘을 커스텀하여 사용하고 싶습니다.

(ex. 개인 png파일 등을 적용하고 싶음)

 

(I would like to customize the marker icon displayed on Google map.

(ex. Want to apply personal png file, etc.))

 

 

 

 

해결 방법 (Workaround)

 

1. 아래와 같이 사전에 필요한 함수 선언 (Declare pre-required functions as shown below)

import 'dart:ui' as ui;

Future<Uint8List> getBytesFromAsset(String path, int width) async {
  ByteData data = await rootBundle.load(path);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(), targetWidth: width);
  ui.FrameInfo fi = await codec.getNextFrame();
  return (await fi.image.toByteData(format: ui.ImageByteFormat.png)).buffer.asUint8List();
}

 

2. google map에 들어가는 marker에 아래와 같이 커스텀 markerIcon을 적용 (Apply a custom marker icon to markers in Google Maps as follows)

final Uint8List markerIcon = await getBytesFromAsset('assets/images/flutter.png', 100);
final Marker marker = Marker(icon: BitmapDescriptor.fromBytes(markerIcon));