I believe the answer marked as accepted is not correct - scroll down there is a better solution offered by Christian Robles.

I have the code shown below, the moment I place the second marker the 1st one is not rendered - I'm stumped. If I remove the content: pinBackground.element, both are rendered again:

const pinBackground = new PinElement({
  background: "#FBBC04",
});

new google.maps.marker.AdvancedMarkerElement({
    map,
        title: 'wittebergstudio',
        content: pinBackground.element,
    position: {
      lat: -28.507,
      lng: 27.933
    }
  });

new google.maps.marker.AdvancedMarkerElement({
    map,
        title: 'rusendalcottages',
        content: pinBackground.element,
    position: {
      lat: -28.506,
      lng: 27.940
    }
  });

Different color pins/marker