- 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>