programmatically parse <shape> into polygon object google map / angular ngmap

I am trying to access shape and parse/ convert it to Polygon object so I can retrieve getPath().getArrays()

Is there any way I can just retrieve the <shape> from the html and use it in my controller?

$scope.insertAt = function (event) {
            const shape = document.getElementById('polygon');
            const polygon = new google.maps.Polygon(shape);
            console.log("Polygon ", polygon);
            // error here --> polygon.getPath().getArray();
        };

<shape name="polygon" id="polygon" stroke-color="#FF0000"
                       stroke-opacity="1.0"
                       stroke-weight="2"
                       draggable="true"
                       geodesic="false"
                       editable="true"
                       insert-at="{{insertAt()}}"
                       paths="{{mappedGeoCoordinates}}" >
                </shape>

Thanks

You are trying to turn the shape directly into a polygon, but you need to get the paths from the shape first, and pass those.

const shape = document.getElementById('polygon');
const paths = shape.getAttribute("paths");
const polygon = new google.maps.Polygon({ paths });

I'm not sure what your $scope.insertAt is. Presume this is your own attribute?