I’m trying to migrate our Google Maps from the original pin type (google.maps.Marker) to the newer Advanced Marker type (google.maps.marker.AdvancedMarkerElement). I’m trying to do this with minimum changes to existing code, which would appear to have either skipped something or left some incompatible elements in place. I’m having a problem where instead of rendering a map pin at the target location, it’s rendering the text which is meant to appear in the marker’s InfoWindow when it gets clicked.

Screen shot of faulty map pin rendering

Any insights?

Pertinent javascript:

    var mapOptions = {
        mapId: "TIG_MAP",
        zoom: 10
    }
    ...
    mapOptions.bounds = bounds;
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    ...
    var styleMarker1 = new google.maps.marker.AdvancedMarkerElement({
        map: theMap,
        position: psn,
        title: theLabel.text,
        content: contentObject //the Info Window content
    });

    var infowindow = new google.maps.InfoWindow({ });

    google.maps.event.addListener(styleMarker1, 'click', function () {
        infowindow.setContent(this.content);
        infowindow.open(map, this);
    });

The description of the migration process sounded like all that was required to produce the legacy behavior with the new marker type was to modify the loading call to specify the advanced markers and make sure to add a new required element (mapID) to the specification of the map itself. This doesn’t seem to be the case as it’s not rendering as expected.