Как добавить маркер на карту Google с показом замкнутого многоугольника

Question

Я использую образцы карт Google для отображения многоугольника, а затем пример, аналогичный psuedo, для отображения маркеров на основе кликов.Я хочу иметь возможность отображать маркеры на отображаемом треугольнике.Если я удаляю или комментирую слушателя bermudaTriangle, то ничего не происходит, когда я нажимаю на треугольник.Если я не показываю треугольник и не удаляю bermudaTriangle.setMap (map), это работает.Так как я могу заставить это работать над показанным треугольником?Мои попытки закомментированы в коде.

См. Комментарии в коде.

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polygon Arrays</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
             * element that contains the map. */
        #map {
            height: 400px;
            min-height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="map"></div>
    <script>

        // This example creates a simple polygon representing the Bermuda Triangle.
        // When the user clicks on the polygon an info window opens, showing
        // information about the polygon's coordinates.

        var map;
        var infoWindow;

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 5,
                center: { lat: 24.886, lng: -70.268 },
                mapTypeId: 'terrain'
            });

            // Define the LatLng coordinates for the polygon.
            var triangleCoords = [
                    { lat: 25.774, lng: -80.190 },
                    { lat: 18.466, lng: -66.118 },
                    { lat: 32.321, lng: -64.757 }
            ];

            // Construct the polygon.
            var bermudaTriangle = new google.maps.Polygon({
                paths: triangleCoords,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillColor: '#FF0000',
                fillOpacity: 0.05
            });

            bermudaTriangle.setMap(map);

            // Add a listener for the click event.
            bermudaTriangle.addListener('click', showArrays);
            //bermudaTriangle.addListener('click', new google.maps.event.trigger(map, 'click'));
            //google.maps.event.addListener(bermudaTriangle, 'click', function () {
            //  new google.maps.event.trigger(map, 'click');
            //});
            //infoWindow = new google.maps.InfoWindow;

            google.maps.event.addListener(map, 'click', function (e) {
                var resultColor =
                        google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) ?
                        'blue' :
                        'red';

                var resultPath =
                        google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) ?
                        // A triangle.
                        "m 0 -1 l 1 2 -2 0 z" :
                        google.maps.SymbolPath.CIRCLE;

                console.log("Color: " + resultColor + " Path: " + resultPath);

                new google.maps.Marker({
                    position: e.latLng,
                    map: map,
                    icon: {
                        path: resultPath,
                        fillColor: resultColor,
                        fillOpacity: .2,
                        strokeColor: 'white',
                        strokeWeight: .5,
                        scale: 10
                    }
                });
            });
        }

        /** @this {google.maps.Polygon} */
        function showArrays(event) {
            // Since this polygon has only one path, we can call getPath() to return the
            // MVCArray of LatLngs.
            var vertices = this.getPath();

            var contentString = '<b>Bermuda Triangle polygon</b><br>' +
                    'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
                    '<br>';

            // Iterate over the vertices.
            for (var i = 0; i < vertices.getLength() ; i++) {
                var xy = vertices.getAt(i);
                contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
                        xy.lng();
            }

            // Replace the info window's content and position.
            infoWindow.setContent(contentString);
            infoWindow.setPosition(event.latLng);

            infoWindow.open(this.map);

            new google.maps.event.trigger(map, 'click');
        }

        $(window).on('load', function () {
            try {
                initMap();
            }
            catch (e) {
                console.log("Error: " + e.message);
            }
        });

    </script>



    <script async defer
        type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=****************************">
    </script>

</asp:Content>

Я хочу увидеть треугольники на многоугольнике многоугольника, когда нажимаю внутри многоугольника.