angular-google-places-map

Angular directive for Google Places Autocomplete created putting together code from this package and this sample code.

This directive provides the autocomplete function from Google Places Autocomplete library and shows picked location on a map.

How to use

Install agular-google-places-map as a bower package, with:

bower install --save angular-google-places-map

or using npm with:

npm install --save angular-google-places-map

and add libraries to your page:

<!-- Google Places API -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script src="../dist/js/ngplacesmap.min.js"></script>
<!-- Style (optional) -->
<link rel="stylesheet" href="../dist/ngplacesmap.min.css">

inject dependency inside your app:

angular.module('myModule',['ngPlacesMap']);

finally place element inside your page:

<places-map></places-map>

Without any attribute this plugin is pretty useless, it just shows a map (centered in Italy) with an input field for search place. Let's add some fancy feature.

Scope var

Add attribute to html element:

<places-map picked="result"></places-map>

and then inside javascript:

angular.module( 'myModule', ['ngPlacesMap'] )
.controller( 'myCtrl', function( $scope ){
	$scope.result = null;
});

Now when a place is picked from input the result will be available inside this scope var. Full example page here

Init with a place

Add attribute to html element:

<places-map address="initAddress"></places-map>

and then inside javascript:

angular.module( 'myModule', ['ngPlacesMap'] )
.controller( 'myCtrl', function( $scope ){
	$scope.initAddress = {
		place_id : "ChIJ31GTk67GhkcRPw6Nl8LeRdQ",
		geometry : {
			location : {
				A : 45.464679,
				F : 9.190770100000009
			}
		},
		zoom : 7 // optional, default value: 15
	};
});

The map will be initialized with a marker in the given location. Full example page here

Init with a place and a fallback

Add attributes to html element:

<places-map address="initAddress" fallback="fallbackAddress"></places-map>

and then inside javascript:

angular.module( 'myModule', ['ngPlacesMap'] )
.controller( 'myCtrl', function( $scope ){

	/*
	 * We are trying to init map with an empty address object,
	 * for example something goes wrong retrieving stored address
	 */
	$scope.initAddress = {};

	$scope.fallbackAddress = {
		lat: 46.1355055,
		lng: 9.566074500000013,
		zoom: 10 // optional, default value: 5
	}
});

In this example map will be initialized without marker but centered in the fallback location. Full example page here

Custom callback function

Add attribute to html element:

<places-map custom-callback="customCallbackFunction( pickedPlace )"></places-map>

and then inside javascript:

angular.module('sample', ['ngPlacesMap'])
.controller('MainCtrl', function ( $scope ) {  
	$scope.customCallbackFunction = function( pickedPlace ){
		console.log( pickedPlace );
	}
});

Now every time that a place is picked, our custom callback function will be invoked. Full example page here