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?