I'm currently working on a store finder app for DHL which can be viewed at storefinder.hashfff.com/app/index.html
In this app I am using the angular-google-maps library which provides some neat features, although I think working with the Google Maps API straight up would have been a better option as Googles API documentation is more detailed, however, being new to Angular I thought it would help.
My searchbox is tied to an event listener called "place_changed", which fires after the Autocomplete is set which takes autocomplete as a parameter.
events: {
place_changed: function(autocomplete) {
var searchString = autocomplete.gm_accessors_.place.Sc.formattedPrediction;
var searchCountry = searchString.split(',').pop().trim();
var searchCity = searchString.split(',');
var jsonQuery = "http://dhl.hashfff.com/api/dhl_store_finder_api.php/?country=" + searchCountry;
// Filter search results by search term. City, Address or Country
$.getJSON(jsonQuery , function(data) {
$scope.$apply(function() {
$scope.stores = _.filter(data, function(search) {
console.log(search.address2.toLowerCase().indexOf(searchCity[0].toLowerCase()));
return search.city.toLowerCase() == searchCity[0].toLowerCase() || search.address2.toLowerCase().indexOf(searchCity[0].toLowerCase()) > -1 || search.country.toLowerCase().indexOf(searchCity[0].toLowerCase()) > -1;
});
$('.cd-panel-search').addClass('is-visible');
});
});
place = autocomplete.getPlace();
if (place.address_components) {
// For each place, get the icon, place name, and location.
newMarkers = [];
var bounds = new google.maps.LatLngBounds();
var marker = {
id:place.place_id,
place_id: place.place_id,
name: place.address_components[0].long_name,
latitude: place.geometry.location.lat(),
longitude: place.geometry.location.lng(),
options: {
visible:false
},
templateurl:'window.tpl.html',
templateparameter: place
};
newMarkers.push(marker);
bounds.extend(place.geometry.location);
$scope.map.bounds = {
northeast: {
latitude: bounds.getNorthEast().lat(),
longitude: bounds.getNorthEast().lng()
},
southwest: {
latitude: bounds.getSouthWest().lat(),
longitude: bounds.getSouthWest().lng()
}
}
_.each(newMarkers, function(marker) {
marker.closeClick = function() {
$scope.selected.options.visible = false;
marker.options.visble = false;
return $scope.$apply();
};
marker.onClicked = function() {
$scope.selected.options.visible = false;
$scope.selected = marker;
$scope.selected.options.visible = true;
};
});
$scope.map.markers = newMarkers;
}
}
}
What happens is that after the autocomplete fires, it goes to the searched place but the zoom is set to maximum which is too close. I am aware that map.setZoom(5) is the usual answer but I do not have the map object available in this event listener.
I hope somebody has experience with the Google Maps Angular directive and could give me a hand. If you require any other code I'll be happy to update the query.
The creation of the bounds is useless, because when a LatLngBounds does have the same NE and SW(that's the case in your example, because you only have a single place/location), you may simply set the center of the map:
$scope.map.center={
latitude: bounds.getNorthEast().lat(),
longitude: bounds.getNorthEast().lng()
};
The difference : the zoom of the map will not be modified(as it does when fitBounds will be used)
when you want to set a zoom use eg:
$scope.map.zoom=5;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.