ng-map-autocomplete
Version:
Google maps autocomplete directive for AngularJS
148 lines (121 loc) • 4.52 kB
HTML
<html ng-app="Test">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div ng-controller="TestCtrl" class="container">
<div class="page-header">
<h1>ngMapAutocomplete</h1>
</div>
<div class="row">
<div class='col-md-6'>
<form id="form" role="form" name="but" ng-submit="processForm()">
<div class="input-group">
<input type="text" id="Autocomplete2" ng-model="autocomplete" class="form-control" ng-map-autocomplete options="options" details="details"/>
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Submit Form</button>
</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" ng-model="form.typesEnabled">
Types
</label>
</div>
<div class="indent">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="geocode" checked ng-model="form.type" ng-disabled="!form.typesEnabled">
Geocode
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="establishment" ng-model="form.type" ng-disabled="!form.typesEnabled">
Establishment
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="(regions)" ng-model="form.type" ng-disabled="!form.typesEnabled">
Regions
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios4" value="(cities)" ng-model="form.type" ng-disabled="!form.typesEnabled">
Cities
</label>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" ng-model="form.boundsEnabled">
Bounds
</label>
</div>
<div class="indent">
<div class="title">Southwest Corner</div>
<label>
lat:
<input type="number" ng-model="form.bounds.SWLat" ng-disabled="!form.boundsEnabled">
</label>
<label>
lng:
<input type="number" ng-model="form.bounds.SWLng" ng-disabled="!form.boundsEnabled">
</label>
<div class="title">Northeast Corner</div>
<label>
lat:
<input type="number" ng-model="form.bounds.NELat" ng-disabled="!form.boundsEnabled">
</label>
<label>
lng:
<input type="number" ng-model="form.bounds.NELng" ng-disabled="!form.boundsEnabled">
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" ng-model="form.componentEnabled">
Country
</label>
</div>
<div class="indent">
<select class="form-control" ng-model="form.country" ng-disabled="!form.componentEnabled">
<option>ca</option>
<option>us</option>
<option>gb</option>
</select>
</div>
<br><br>
<div class="checkbox">
<label>
<input type="checkbox" value="" ng-model="form.watchEnter">
Watch Enter
</label>
</div>
</form>
</div>
<div class='col-md-6'>
<div class="panel panel-default">
<div class="panel-heading">$scope.autocomplete</div>
<div class="panel-body">
<pre>{{autocomplete}}</pre>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">$scope.details</div>
<div class="panel-body">
<pre>{{details | json}}</pre>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script type="text/javascript" src="/examples/advanced.js"></script>
<script type="text/javascript" src="/src/ng-map-autocomplete.js"></script>
</body>
</html>