Map marker is not showing

[supunTE]

I integrated the Kakao map plugin into a Flutter app, and the map is displayed correctly. The center point also works well. However, I encountered an issue where the map marker is not showing up. Upon investigation, I found the following information in the console.

I/chromium(11002): [INFO:CONSOLE(4)] "A parser-blocking, cross site (i.e. different eTLD+1) script, http://t1.daumcdn.net/mapjsapi/js/libs/drawing/1.2.6/drawing.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.", source: https://dapi.kakao.com/v2/maps/sdk.js?autoload=true&appkey=1f792e7c212dea6433f9272775ce47d6&libraries=services,clusterer,drawing (4)

Component Code

import 'package:flutter/material.dart';
import 'package:kakao_map_plugin/kakao_map_plugin.dart';

class KakaoMapComponent extends StatefulWidget {
  final String appKey;
  final LatLng latLng;
  final String? caption;
  final double? height;
  final double? width;

  const KakaoMapComponent({
    super.key,
    required this.appKey,
    required this.latLng,
    this.caption,
    this.height = 200,
    this.width,
  });

  @override
  State<KakaoMapComponent> createState() => _KakaoMapComponentState();
}

class _KakaoMapComponentState extends State<KakaoMapComponent> {
  @override
  void initState() {
    AuthRepository.initialize(appKey: widget.appKey);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    late KakaoMapController mapController;
    Set<Marker> markers = {};

    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: SizedBox(
        height: widget.height,
        width: widget.width,
        child: KakaoMap(
          onMapCreated: ((controller) async {
            mapController = controller;

            // TODO: Marker not showing up
            markers.add(Marker(
              markerId: UniqueKey().toString(),
              latLng: widget.latLng,
            ));

            setState(() {});
          }),
          markers: markers.toList(),
          center: widget.latLng,
        ),
      ),
    );
  }
}

Result I got

[johyunchol]

I discovered the issue late after it was opened. Have you already resolved it during this time? I checked why the markers weren't appearing, and it turns out the issue was with the location of the markers object. If you declare markers inside the build function, a rebuild can occur when the state changes through setState, causing the markers object to be reinitialized. In this case, unintentional behavior where markers don't appear might occur.

You can see in the example/overlay_1_marker_screen.dart sample that the markers object is created outside the build function.

Since I wrote this content in Korean and translated it into English, it might sound a bit awkward.

import 'package:flutter/material.dart';
import 'package:kakao_map_plugin/kakao_map_plugin.dart';

class KakaoMapComponent extends StatefulWidget {
  final String appKey;
  final LatLng latLng;
  final String? caption;
  final double? height;
  final double? width;

  const KakaoMapComponent({
    super.key,
    required this.appKey,
    required this.latLng,
    this.caption,
    this.height = 200,
    this.width,
  });

  @override
  State<KakaoMapComponent> createState() => _KakaoMapComponentState();
}

class _KakaoMapComponentState extends State<KakaoMapComponent> {
  late KakaoMapController mapController;
  Set<Marker> markers = {};

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: SizedBox(
        height: widget.height,
        width: widget.width,
        child: KakaoMap(
          onMapCreated: ((controller) async {
            mapController = controller;

            // TODO: Marker not showing up
            markers.add(Marker(
              markerId: UniqueKey().toString(),
              latLng: widget.latLng,
            ));

            setState(() {});
          }),
          markers: markers.toList(),
          center: widget.latLng,
        ),
      ),
    );
  }
}

result :

 

[johyunchol]

I will consider it resolved and close the issue. If the same problem happens again, please feel free to reopen the same issue.