angularjs ngmap autocomplete

by beaver71

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=places,visualization,drawing,geometry,places"></script>

<div ng-app="app">
    <div ng-controller="MyCtrl as vm">
      Enter your city: <br/>
      <input places-auto-complete size=80
        ng-model="vm.address"
        component-restrictions="{country:'us'}"
        types="{{types}}"
        ng-focus="vm.geolocate()"
        strict-bounds="true"
        circle-bounds="{{vm.mybounds}}"
        on-place-changed="vm.placeChanged()" /> <br/>
     <input type="checkbox"
       ng-model="vm.usebounds">use bounds
        <br/>
      <div ng-show="vm.place">
        Address = {{vm.place.formatted_address}} <br/>
        Location: {{vm.place.geometry.location}}<br/>
      </div>
      <hr>
      bounds: {{vm.mybounds}}
    </div>
    <ng-map></ng-map>
</div>

JavaScript

angular.module("app", ['ngMap']).controller("MyCtrl", function($scope, NgMap) {
    var vm = this;
    //vm.types = "['geocode']";
    vm.types = "['establishment']";
    vm.usebounds = false;
    
    vm.placeChanged = function() {
        vm.place = this.getPlace();
        console.log('location', vm.place.geometry.location);
        vm.map.setCenter(vm.place.geometry.location);
    }
    
    vm.geolocate = function() {
      if (navigator.geolocation) {
      	console.log("geolocate");
        navigator.geolocation.getCurrentPosition(function(position) {
          var geolocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
          console.log("position", position);
          if (vm.usebounds) {
            vm.mybounds = {
              center: geolocation,
              radius: position.coords.accuracy
            };
            $scope.$apply();
          }
          vm.map.setCenter(geolocation);  
        });
      }
    };
    
    NgMap.getMap().then(function(map) {
      	vm.map = map;
    });

});