Google Places Autocomplete

Make an autocomplete address field using Google Place Autocomplete api

by Ismail Ibraheem Shurrab

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&amp;dummy=.js"></script>
<label for="searchTextField">Please Insert an address:</label>
<br>
<input id="searchTextField" type="text" size="50">
    
    
    <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete">https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete</a>    
    
    
<!--       $scope.getAddress = function(viewValue) {
          var params = {address: viewValue, sensor: false, components :"country:NZ"};
          return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {params: params})
          .then(function(res) {
      return res.data.results;
          }); -->

JavaScript

// https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

var input = document.getElementById('searchTextField');
var options = {
    componentRestrictions: {
        country: 'nz'
    }
};

var autocomplete = new google.maps.places.Autocomplete(input, options);

google.maps.event.addListener(autocomplete, 'place_changed', function () {

    var place = autocomplete.getPlace();
    var lat = place.geometry.location.lat();
    var long = place.geometry.location.lng();
    alert(lat + ", " + long);

});