CODEWITHSUNDEEP
google-mapsangular-ui
Koder
Koder

Reputation: 1914

AngularJS Google Maps Search/Auto-Complete

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

Upvotes: 0

Views: 3991

Answers (2)

codeepic
codeepic

Reputation: 4102

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.

Upvotes: 0

user1749672
user1749672

Reputation: 116

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

Upvotes: 1

Related Questions