Item: Custom Google Places Autocomplete
Rating: 3.4
Author: 1kohei1

1 Downloads
34 Views
Tweet
Download Now View Demo

HTML
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Custom Google Places Autocomplete</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  
  <link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc4/angular-material.css'>

  
  
</head>

<body>

  <div ng-controller="AppController as controller" ng-app="app" layout="column">
  <form ng-submit="controller.submit()">
    <md-input-container md-no-float>
      <input ng-model="controller.a" googleplace on-changed="controller.b()" aria-label="aa" placeholder=""/>
    </md-input-container>
    Address: {{ controller. a }}
  </form>
  {{ controller.changed }}
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js'></script>
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDvivYcq13YuQqAde0UKwtnVflecI-7XEk&libraries=places'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/1kohei1/custom-google-places-autocomplete-NrWxQr */
(function() {
  'use strict';

  var app = angular.module('app', ['ngMaterial']);
  app.controller('AppController', AppController);

  function AppController() {
    var _this = this;
    
    _this.submit = function() {
      console.log('submit');
    }
    
    _this.changed = '';
    
    _this.b = function() {
      console.log('changed');
      _this.changed = 'changed';
    }
  }
  
  app.directive('googleplace', function() {
    return {
      require: 'ngModel',
      scope: {
        onChanged: '&'
      },
      link: function(scope, element, attrs, model) {
        var options = {
          types: []
        };
        
        // Create autocomplete instance
        scope.autocomplete = new google.maps.places.Autocomplete(element[0], options);
        
        google.maps.event.addListener(scope.autocomplete, 'place_changed', function() {
          scope.$apply(function() {
            model.$setViewValue(element.val());
            scope.onChanged();
          });
        });
        
        element.on('keydown', function(e) {
          if (e.which === 13 && model.$viewValue !== element.val()) {
            e.preventDefault();
          }
        });
      }
    }
  });
})();

Comments

More from 1kohei1

Custom Google Places Autocomplete

In this example below you will see how to do a Custom Google Places Autocomplete with some HTML / CSS and Javascript

Technologies

Comments

More from 1kohei1

SVG.js playground

RxJS playground

RxJS drag capture drag complete

Observable connect

You Might Also Like

Ivan N FreeCodeCamp : Build a Personal Portfolio Webpage

Simple sticky navbar

A Pen by carlos ramirez

bottom right box (margin)

A Pen by kunigamaeno

namecrad

A Pen by tahjay

glsl-bloom