Web Programming examples

Google Maps,AngularJS

Google Maps for AngularJS Place Autocomplete(v2.4.1)

  • AngularJS : 1.5.9
  • Google Maps for AngularJS : 2.4.1
  • include file
  • angular.min.js, lodash.underscore.min.js, angular-simple-logger.min.js,angular-google-maps.min.js
Click on map.
<div ng-controller="MyCtrl">
<div class="row">
  <div class="col-sm-12">
    <ui-gmap-google-map 
      id="map-canvas"
      center="map.center"
      zoom="map.zoom"
      draggable="true"
      options="map.options"
      control="map.control"
      events="map.events"
    >
      <ui-gmap-marker idKey="map.marker.id" coords="map.marker" icon="map.marker.icon"  
                options="map.marker.options">
        <ui-gmap-window show="map.marker.showWindow"
                options="map.window.options"
                templateUrl="map.window.templateUrl"
                templateParameter="map.window.templateParameter"
          >
        </ui-gmap-window>
      </ui-gmap-marker>
    </ui-gmap-google-map>
    
    <div id="type-selector" class="well well-sm">
      <form class="form-inline">
        <div class="radio">
          <label>
            <input type="radio" name="type" id="changetype-all" checked>
            All
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="type" id="changetype-establishment">
            Establishments
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="type" id="changetype-geocode">
            Geocodes
          </label>
        </div>
      </form>
    </div>
    <input id="pac-input" class="form-control" type="text" placeholder="Enter a location">
  </div>
</div>
</div>
var mapApp = angular.module('googleMapApp', ['uiGmapgoogle-maps']);

mapApp.config(
    ['uiGmapGoogleMapApiProvider', function(GoogleMapApiProviders) {
        GoogleMapApiProviders.configure({
          key: 'your Google Map api key',
          v: '3', //defaults to latest 3.X anyhow
          libraries: 'weather,geometry,visualization,places'
        });
    }]
);

mapApp.controller("MyCtrl",['$scope', 'uiGmapGoogleMapApi', function ($scope,uiGmapGoogleMapApi) {
  angular.extend($scope, {
    map: {
      center: {
        latitude: 35.681382,
        longitude: 139.766084
      },
      options: {
        maxZoom: 20,
        minZoom: 3
      },
      zoom: 15,
      control: {},
      marker: {id: 1},
      window: {
        templateUrl: 'assets/templates/place4.html',
        templateParameter: {
          name: '',
          address: ''
        },
        options: {
          pixelOffset: {
            height: -50,
            width: 20
          }
        }
      },
      events: { 
        projection_changed: function (map, eventName, originalEventArgs) {
          var types = document.getElementById('type-selector');
          var input = document.getElementById('pac-input');
          map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
          map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
          var defaultBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(35.690903370337175, 139.74145889282227),
            new google.maps.LatLng(35.67166118960477, 139.780855178833)
          );
          var options = {
            bounds: defaultBounds,
            types: ['establishment']
          };
          var autocomplete = new google.maps.places.Autocomplete(input,options);

          autocomplete.bindTo('bounds', map);
          google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
              return;
            } 
            if (place.geometry.viewport) {
              map.fitBounds(place.geometry.viewport);
            } else {
              map.setCenter(place.geometry.location);
              map.setZoom(17);
            }
            $scope.map.marker.latitude = place.geometry.location.lat();
            $scope.map.marker.longitude = place.geometry.location.lng();
            $scope.map.marker.id = 1;
            $scope.map.marker.icon = place.icon;
            
            $scope.map.marker.showWindow = true;
            var address = '';
            if (place.address_components) {
              address = [
               (place.address_components[0] && place.address_components[0].short_name || ''),
               (place.address_components[1] && place.address_components[1].short_name || ''),
               (place.address_components[2] && place.address_components[2].short_name || '')
              ].join(' ');
            }
            $scope.map.window.templateParameter.name = place.name;
            $scope.map.window.templateParameter.address = address;
          });
          var setupClickListener = function (id, types) {
            var radioButton = document.getElementById(id);
            google.maps.event.addDomListener(radioButton, 'click', function() {
              autocomplete.setTypes(types);
            });
          }
          setupClickListener('changetype-all', []);
          setupClickListener('changetype-establishment', ['establishment']);
          setupClickListener('changetype-geocode', ['geocode']);
        }
      }
    }
  });
  uiGmapGoogleMapApi.then(function(maps) {});
}]);


(assets/templates/place4.html)
<div>
  <strong>{{ parameter.name }}</strong><br />
  {{ parameter.address }}
</div>