angularjs中的google地点仅适用于一个页面，但不适用于另一个页面

Question

我正在尝试使用我的angularjs应用中的谷歌地图实现谷歌自动完成功能。

我可以在一个页面中运行自动填充

任何帮助表示赞赏!!!

CONTORLLER ONE

var mapStyle = [
            {
                "featureType": "landscape.man_made", "elementType": "geometry", "stylers": [{"color": "#2E2E2E"}]
            },
            {
                "elementType": "labels.text.stroke", "stylers": [{"color": "#ffffff"}]
            },
            {
                "featureType": "poi", "elementType": "geometry", "stylers": [{"color": "#808080"}]
            },
            {
                "featureType": "road", "elementType": "geometry.fill", "stylers": [{"color": "#BDBDBD"}]
            },
            {
                "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{"color": "#808080"}]
            },
            {
                "elementType": "labels.text.fill", "stylers": [{"color": "#848484"}]
            },
            {
                "featureType": "transit.line", "elementType": "geometry", "stylers": [{"color": "#ffffff"}]
            }
        ];

        var options = {
            center: new google.maps.LatLng(49.246292, -123.116226),
            zoom: 12,
            disableDefaultUI: true,
            fit: true,
            styles: mapStyle
        }
        var map = new google.maps.Map(
            document.getElementById("map"), options
        );
        //bounds
        var bounds = new google.maps.LatLngBounds();

        //inputs
        var fromInput = ( document.getElementById('fromInput'));
        var toInput = ( document.getElementById('toInput'));

        var fromAndToArray = [];

        //polyline
        var polyLine = new google.maps.Polyline({
            map: map,
            path: [],
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        var toAutocomplete = new google.maps.places.Autocomplete(toInput);
        var fromAutocomplete = new google.maps.places.Autocomplete(fromInput);


        fromAutocomplete.bindTo('bounds', map);
        toAutocomplete.bindTo('bounds', map);


        var infowindow = new google.maps.InfoWindow();
        var fromMarker = new google.maps.Marker({
            map: map,
            anchorPoint: new google.maps.Point(0, -29)
        });

        var toMarker = new google.maps.Marker({
            map: map,
            anchorPoint: new google.maps.Point(0, -29)
        });

        addAutocompleteListerenr(fromAutocomplete, fromMarker, false);
        addAutocompleteListerenr(toAutocomplete, toMarker, true);


        /**
         * private function
         * @param locs
         */

        function drawPolyLine(locs) {
            if (angular.isDefined(locs[0])) {
                polyLine.setPath(locs);
            }
        }

        function addAutocompleteListerenr(aInstance, marker, isToMarker) {
            aInstance.addListener('place_changed', function () {
                infowindow.close();
                marker.setVisible(false);
                var place = aInstance.getPlace();
                if (!place.geometry) {
                    window.alert("Autocomplete's returned place contains no geometry");
                    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(8);  // Why 17? Because it looks good.
                }
                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)
                }));
                marker.setPosition(place.geometry.location);
                marker.setVisible(true);
                //extend the bounds to include each marker's position
                bounds.extend(marker.position);

                if (isToMarker) {
                    $scope.newTrip.toPlace = place.name;
                    fromAndToArray[1] = place.geometry.location;
                } else {
                    $scope.newTrip.fromPlace = place.name;
                    fromAndToArray[0] = place.geometry.location;
                }
                drawPolyLine(fromAndToArray);
                //now fit the map to the newly inclusive bounds
                map.fitBounds(bounds);

                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(' ');
                }

                infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
                infowindow.open(map, marker);
            });


        };

HTML ONE

<div id="map" class="googlemapcontainer"></div>

<input id="fromInput"
       class="from"
       name="Your email address here"
       placeholder="From"
       type="text">

<input id="toInput"
       class="to"
       name="to"
       placeholder="To" type="text">

当我尝试在第二页中运行相同的代码并修改为

时

CONTROLLER TWO

SAMW as CONTROLLER ONE，修改为

var map = new google.maps.Map(
            document.getElementById("mapRequest"), options
        );
        //bounds
        var bounds = new google.maps.LatLngBounds();

        //inputs
        var fromRequest = ( document.getElementById('fromRequest'));
        var toRequest = ( document.getElementById('toRequest'));

HTML TWO

<div id="mapRequest" class="googlemapcontainer"></div>

<input id="fromRequest"
       class="from"
       name="Your email address here"
       placeholder="From"
       type="text">

<input id="toRequest"
       class="to"
       name="to"
       placeholder="To" type="text">

第二页中的自动填充无效。

我错过了什么吗？有更好的方法吗？

感谢您的回答