添加标记和信息窗口而不刷新页面

我正试图在地图上放置多个标记。为此，我遵循了的程序

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?csw=1

演示

但在这里，一旦用户开始键入另一个标记，第一个标记就会被第二个标记取代。为此，我在autocomplete函数中初始化了标记，以便在用户输入第二个标记时创建另一个标记。这很好。另一个标记被钉住了。但一旦点击标记，它将不会产生信息窗口，因为信息窗口在自动完成函数中。

我需要所有标记的信息窗口。

<script>
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(-33.8688, 151.2195),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);
            var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);
            var infowindow = new google.maps.InfoWindow();

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var marker = new google.maps.Marker({
                    map: map
                });
                infowindow.close();
                marker.setVisible(false);
                input.className = '';
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    // Inform the user that the place was not found and return.
                    input.className = 'notfound';
                    return;
                }
                // If the place has a geometry, then present it on a map.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);  // Why 17? Because it looks good.
                }
                var address = '';
                if (place.address_components) {
                    address = [
                        (place.address_components[0] && place.address_components[0].short_name || ''),
                        (place.address_components[1] && place.address_components[1].short_name || ''),
                        (place.address_components[2] && place.address_components[2].short_name || '')
                    ].join(' ');
                }
                marker.setIcon(/** @type {google.maps.Icon} */({
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(35, 35),
                }));
                if (address.length != 0) {
                    address = place.name + ', ' + address;
                } else {
                    address = place.name;
                }
                marker.setPosition(place.geometry.location);
                marker.setTitle(address);
                marker.setVisible(true);
                infowindow.setContent('<div><strong>' + marker.title + '</strong><br>');
                infowindow.open(map, marker);
            });

        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

在这里，infowindow将不起作用，因为没有操作监听器。所以我写了下面的代码。

       google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });

但它不会起作用，因为这里的标记超出了范围变量。如何做到这一点？请帮助