angular google map searchbox - places_changed is not called from the $route.current controller

706 views Asked by At

I'm having an issue with angular google maps and the search box. Even if the ng-view onLoad works as expected, after typing in the search box, the places_changed callbacks are not called from the correct controller but only from the first one (and the default) defined in $routeProvider.

You can find more details below:

Part of the template:

<div ng-controller="map">
    <div>
        <script type="text/ng-template" id="searchbox.tpl.html">
            <input type="text" placeholder="Search Place..." class="google-maps-search">
        </script>

        <ui-gmap-google-map center='map.center' events="map.events"  options="map.options" zoom='map.zoom'>
            <ui-gmap-search-box template="map.searchbox.template" events="map.searchbox.events" position="BOTTOM_RIGHT"></ui-gmap-search-box>
            <ui-gmap-marker coords="map.marker.coords" options="map.marker.options" events="map.marker.events" idkey="map.marker.id"></ui-gmap-marker>
            <ui-gmap-markers models="mapMarkers" coords="'self'" icon="'icon'">
                <ui-gmap-windows show="show">
                    <div ng-non-bindable>{{title}}</div>
                </ui-gmap-windows>
            </ui-gmap-markers>
        </ui-gmap-google-map>
    </div>

    <div><div ng-view="" onload="renderView()"></div></div>

Part of the parent controller:

app.controller('map', function ($scope, $log, $location) {
    $scope.map = {
        events: {
            click: function(map, eventName, args) {}
        },
        marker:  {
            id: 0,
            coords: {
                latitude: $scope.lat,
                longitude: $scope.lng
            },
            options: { draggable: true }
        },
        searchbox: {
            template: 'searchbox.tpl.html',
            events: {
                places_changed: function (searchBox) {}
            }
        }
    };
});

And the following in each of the children controllers (defined in $routeProvider):

$scope.map.searchbox.events.places_changed = function (searchBox) {
    var place = searchBox.getPlaces();
    if (!place || place == 'undefined' || place.length == 0) {
        console.log('no place data :(');
        return;
    }

    $scope.lat = place[0].geometry.location.lat();
    $scope.lng = place[0].geometry.location.lng();
    $scope.map.center = {
        "latitude": $scope.lat,
        "longitude": $scope.lng
    };


    $scope.renderView();
};

Do you have any ideas?

0

There are 0 answers