Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davidepedone/angular-google-places-map
AngularJS directive for google maps and places autocomplete
https://github.com/davidepedone/angular-google-places-map
Last synced: 2 days ago
JSON representation
AngularJS directive for google maps and places autocomplete
- Host: GitHub
- URL: https://github.com/davidepedone/angular-google-places-map
- Owner: davidepedone
- License: mit
- Created: 2015-05-13T15:41:25.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-19T23:14:38.000Z (almost 8 years ago)
- Last Synced: 2024-11-10T03:08:35.040Z (8 days ago)
- Language: JavaScript
- Homepage:
- Size: 547 KB
- Stars: 7
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-google-places-map
Angular directive for Google Places Autocomplete created putting together code from [this package](https://github.com/kuhnza/angular-google-places-autocomplete) and [this sample code](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete).
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:
```bash
bower install --save angular-google-places-map
```
or using npm with:
```
npm install --save angular-google-places-map
```
and add libraries to your page:
```html
```
inject dependency inside your app:
```javascript
angular.module('myModule',['ngPlacesMap']);
```
finally place element inside your page:
```html
```
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:
```html
```
and then inside javascript:
```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](sample/empty.html)
### Init with a place
Add attribute to html element:
```html
```
and then inside javascript:
```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](sample/init.html)
### Init with a place and a fallback
Add attributes to html element:
```html
```
and then inside javascript:
```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](sample/fallback.html)
### Custom callback function
Add attribute to html element:
```html
```
and then inside javascript:
```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](sample/callback.html)