AngularJS Google Maps Search/Auto-Complete - google-maps

Question

I am using Angular UI's Google Maps directives.
I would like to use a text box for the user to enter a location and with auto-complete, load the location in the maps canvas when user selects from auto-complete drop down.
How would i go about doing that using these directives ?
Thanks

Answer 1

This feature is not supported yet and is under construction. Refer: https://github.com/nlaplante/angular-google-maps/issues/383

Answer 2

The auto-complete location is supported by Angular UI Google Maps directives
Here's your search textbox and map canvas.
<input id="pac-input" class="controls" type="text" placeholder="Search for a location" ng-model="model.searchAddress" />
<div ui-map="model.locationMap" ui-options="mapOptions" id="map_canvas" class="map"
style="height: 420px; width: 420px;" ui-event="{'map-click': 'setMarker($event, $params)'}"></div>
Here's JS code that you should put into controller associated with your map and search textbox. This code taps into Google Maps API,
var searchAddressInput = document.getElementById('pac-input');
var mapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(53.5085011, -6.2154598), //south east corner
new google.maps.LatLng(53.5585011, -6.2654598) //north west corner
);
var mapOptions = {
center: new google.maps.LatLng(53.5085011, -6.2154598),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
bounds: mapBounds
};
var autocomplete = new google.maps.places.Autocomplete(searchAddressInput, mapOptions);
//set the bounds of autocomplete to map's current viewport
autocomplete.bindTo('bounds', $scope.model.locationMap);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
onPlaceChanged();
});
In the code above you are associating autocomplete object with your searchbox, then binding the onPlaceChanged() function to it, once one of the suggested locations is clicked.
This is the code that will be executed
function onPlaceChanged() {
var place = autocomplete.getPlace();
$scope.model.locationMap.panTo(place.geometry.location);
$scope.model.locationMap.setZoom(14);
//place pin on the map
marker.setPosition(new google.maps.LatLng(place.geometry.location.k, place.geometry.location.B));
}
That would be all. One more word of advice though. If you happen to be using an autocomplete for a Google Map in the modal window, you have to add this snippet into your CSS:
div.pac-container {
z-index: 1050 !important;
}
Bootstrap modal has a z-index of 900 something, so the autocomplete suggestions would appear behind it. You wouldn't get any JS errors, so it's not an ideal situation, cause you donn't know what the hell is going on. Changing z-index ensures that autocomplete suggestions are on the top.