自定义Places API自动填充用户界面

Question

是否有关于如何根据Google Maps Places API自动完成搜索的预测来自定义UI的资源？

我自己的UI已准备好填充places服务的结果。我只是不知道如何将数据输出到新UI中。

Thats what I have

Thats what I want to achieve

关于API，这就是我所有的JavaScript，

function initAutocomplete() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer({
            suppressMarkers: true,
            polylineOptions: {
                strokeColor: "#21D56D",
                strokeWeight: 4.5
            },
        });

        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 48.175473, lng: 16.377493},
            zoom: 12,
            mapTypeId: 'roadmap',
            disableDefaultUI: true,
            styles: [
                {
                    "featureType": "poi",
                    "elementType": "labels.text",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "poi.business",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                }
            ]
        });

        directionsDisplay.setMap(map);

        var onChangeHandler = function() {
            calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        document.getElementById('app-go').addEventListener('click', onChangeHandler);


        var input = document.getElementById('pac-input');
        var autocomplete = new google.maps.places.Autocomplete(input, {
            componentRestrictions: {country: 'at'}
        });

        var input = document.getElementById('pac-input2');
        var autocomplete = new google.maps.places.Autocomplete(input, {
            componentRestrictions: {country: 'at'}
        });

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {

            directionsService.route({
                origin: document.getElementById('pac-input').value,
                destination: document.getElementById('pac-input2').value,
                travelMode: 'DRIVING'
            }, function(response, status) {
                if (status === 'OK') {
                    directionsDisplay.setDirections(response);

                    var route = response.routes[0].legs[0];

                    createMarker(route.start_location);
                    createMarker(route.end_location);

                } else {
                    window.alert('Request failed due to ' + status);
                }
            });
        }

        function createMarker(latlng, title) {

            var marker = new google.maps.Marker({
                position: latlng,
                title: title,
                icon: {
                    url: 'images/pin2.svg',
                    size: new google.maps.Size(20, 20),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(12, 10),
                    scaledSize: new google.maps.Size(15, 15)
                },
                map: map
            });
        }
    }