I try to put multiple markers (the new 2024 API) with a loop, on Google Maps, but only the last is shown.

My code :

 let map;
        async function initMap(center, pk, partner) {
            const centre = { lat: Number(coord[0]), lng: Number(coord[1]) };
            // Request needed libraries.
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
            // The map, centered
            map = new Map(document.getElementById("map"), {
                zoom: 15,
                center: centre,
                mapId: "DEMO_MAP_ID",
            });
            // A marker with a URL pointing to a PNG.
            const startFlag = document.createElement("img");
            startFlag.src = "images/icones/depart.png";
            const freePkFlag = document.createElement("img");
            freePkFlag.src = "images/icones/parking_free.png";
            const payantPkFlag = document.createElement("img");
            payantPkFlag.src = "images/icones/parking.png";
            const partnerFlag = document.createElement("img");
            partnerFlag.src = "images/icones/partner.png";
 var tabPin = new Array();
            //création de marqueur
           
            function createMarker(position, type, titre = "") {
                var coord = position.split('*');
                newMarker = new AdvancedMarkerElement({
                    map,
                    position: { lat: position[0], lng: position[1] },
                    content: type,
                    title: titre,
                });
                tabPin.push(newMarker);
            }
            // le départ
            createMarker(center, startFlag, "point de départ");
            for (var i = 0; i < pk["free"].length; i++) {
                createMarker(pk["free"][i]["GPS"], freePkFlag);
            }
            for (var i = 0; i < pk["payant"].length; i++) {
                createMarker(pk["payant"][i]["GPS"], payantPkFlag);
            }
            for (var i = 0; i < partner.length; i++) {
                createMarker(partner[i]["GPS"], partnerFlag);
            }
            for (var i = 0; i < tabPin.length; i++) {
                console.log(tabPin[i]);
            }
        }

I try with (in the createmarker function):

• const newMarker =
• var newMarker =
• newMarker =
  Same result!

The result of the log is that all the markers are exist with the right GPS.

enter image description here

Thanks for your help