|
| 1 | +<p align="center"> |
| 2 | + <img height="256px" width="256px" style="text-align: center;" src="https://cdn.rawgit.com/angular-material-extensions/google-maps-autocomplete/master/demo/src/assets/logo.svg"> |
| 3 | +</p> |
| 4 | + |
| 5 | +# google-maps-autocomplete - Autocomplete input component for google-maps built with angular material design |
| 6 | + |
| 7 | +[](https://badge.fury.io/js/google-maps-autocomplete), |
| 8 | +[](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) |
| 9 | +[](https://coveralls.io/github/angular-material-extensions/google-maps-autocomplete?branch=master) |
| 10 | +[](https://travis-ci.org/angular-material-extensions/google-maps-autocomplete) |
| 11 | +[](https://circleci.com/gh/angular-material-extensions/google-maps-auto) |
| 12 | +[](https://david-dm.org/angular-material-extensions/google-maps-autocomplete) |
| 13 | +[](https://david-dm.org/angular-material-extensions/google-maps-autocomplete#info=devDependencies) |
| 14 | +[](https://greenkeeper.io/) |
| 15 | +[](https://github.com/angular-material-extensions/google-maps-auto/blob/master/LICENSE) |
| 16 | + |
| 17 | +## Built by and for developers :heart: |
| 18 | +Do you have any question or suggestion ? Please do not hesitate to contact us! |
| 19 | +Alternatively, provide a PR | open an appropriate issue [here](https://github.com/angular-material-extensions/google-maps-auto/issues) |
| 20 | + |
| 21 | +If did you like this project, support [angular-material-extensions](https://github.com/angular-material-extensions) |
| 22 | +by starring :star: and sharing it :loudspeaker: |
| 23 | + |
| 24 | +## Table of Contents |
| 25 | +- [Demo](#demo) |
| 26 | +- [Dependencies](#dependencies) |
| 27 | +- [Peer Dependencies](#peerDependencies) |
| 28 | +- [Additional Requirements - material (Include a theme)](#additional-requirements-material-theme) |
| 29 | +- [Additional Requirements - material icons](#additional-requirements-material-icons) |
| 30 | +- [Installation](#installation) |
| 31 | +- [Usage](#usage) |
| 32 | +- [Documentation](#documentation) |
| 33 | +- [Run Demo App Locally](#run-demo-app-locally) |
| 34 | +- [Development](#development) |
| 35 | +- [Other Angular Libraries](#other-angular-libraries) |
| 36 | +- [Support](#support) |
| 37 | +- [License](#license) |
| 38 | + |
| 39 | +<a name="demo"/> |
| 40 | + |
| 41 | +## [Demo](https://angular-material-extensions.github.io/google-maps-auto) |
| 42 | + |
| 43 | +View all the directives and components in action at [https://angular-material-extensions.github.io/google-maps-auto](https://angular-material-extensions.github.io/google-maps-auto) |
| 44 | + |
| 45 | +<a name="dependencies"/> |
| 46 | + |
| 47 | +## Dependencies |
| 48 | +* [Angular](https://angular.io) (*requires* Angular 2 or higher) |
| 49 | + |
| 50 | +<a name="peerDependencies"/> |
| 51 | + |
| 52 | +### Requirements (peer dependencies): |
| 53 | +- [angular material v6.2.1](https://www.npmjs.com/package/@angular/material) |
| 54 | +- [angular cdk v6.0.2](https://www.npmjs.com/package/@angular/cdk) |
| 55 | +- [angular animations v6.0.5](https://www.npmjs.com/package/@angular/animations) |
| 56 | +- [angular forms v6.0.5](https://www.npmjs.com/package/@angular/forms) |
| 57 | + |
| 58 | +```bash |
| 59 | +npm i @angular/cdk @angular/material @angular/animations @angular/forms |
| 60 | +``` |
| 61 | + |
| 62 | +<a name="additional-requirements-material-theme"/> |
| 63 | + |
| 64 | +### Additional requirements Theme (Material Design) |
| 65 | +- [angular material theme](https://material.angular.io/guide/getting-started#step-4-include-a-theme) |
| 66 | + |
| 67 | +<a name="additional-requirements-material-icons"/> |
| 68 | + |
| 69 | +## Additional Requirements - Import the material design icons [learn more](https://material.angular.io/guide/getting-started#step-6-optional-add-material-icons) |
| 70 | + |
| 71 | +- The easiest way to import material design icons is to provide a link in your `index.html` file like below: |
| 72 | + |
| 73 | +```html |
| 74 | +<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
| 75 | +``` |
| 76 | + |
| 77 | +- alternative solution: |
| 78 | + |
| 79 | +1. Install of the official npm module of the material design icons |
| 80 | + |
| 81 | +```bash |
| 82 | +npm i -s material-design-icons |
| 83 | +``` |
| 84 | + |
| 85 | +2. Import them in your `angular.json` file |
| 86 | + |
| 87 | +```json |
| 88 | +"styles": [ |
| 89 | + "styles.css", |
| 90 | + "../node_modules/material-design-icons/iconfont/material-icons.css" |
| 91 | + ], |
| 92 | +``` |
| 93 | + |
| 94 | +---- |
| 95 | + |
| 96 | +<a name="installation"/> |
| 97 | + |
| 98 | +## [Installation](https://angular-material-extensions.github.io/google-maps-auto/getting-started) |
| 99 | + |
| 100 | +Install above dependencies via *npm*. |
| 101 | + |
| 102 | +Now install `@angular-material-extensions/google-maps-autocomplete` via: |
| 103 | +```shell |
| 104 | +npm install --save @angular-material-extensions/google-maps-autocomplete |
| 105 | +``` |
| 106 | + |
| 107 | +##### SystemJS |
| 108 | +>**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle. |
| 109 | +In your systemjs config file, `map` needs to tell the System loader where to look for `@angular-material-extensions/google-maps-autocomplete`: |
| 110 | +```js |
| 111 | +map: { |
| 112 | + '@angular-material-extensions/google-maps-autocomplete': 'node_modules/@angular-material-extensions/google-maps-autocomplete/bundles/google-maps-autocomplete.umd.js', |
| 113 | +} |
| 114 | +``` |
| 115 | +--- |
| 116 | + |
| 117 | +Once installed you need to import the main module: |
| 118 | +```js |
| 119 | +import { LibModule } from '@angular-material-extensions/google-maps-autocomplete'; |
| 120 | +``` |
| 121 | +The only remaining part is to list the imported module in your application module. The exact method will be slightly |
| 122 | +different for the root (top-level) module for which you should end up with the code similar to (notice ` LibModule .forRoot()`): |
| 123 | +```js |
| 124 | +import { LibModule } from '@angular-material-extensions/google-maps-autocomplete'; |
| 125 | + |
| 126 | +@NgModule({ |
| 127 | + declarations: [AppComponent, ...], |
| 128 | + imports: [LibModule.forRoot(), ...], |
| 129 | + bootstrap: [AppComponent] |
| 130 | +}) |
| 131 | +export class AppModule { |
| 132 | +} |
| 133 | +``` |
| 134 | + |
| 135 | +Other modules in your application can simply import ` LibModule `: |
| 136 | + |
| 137 | +```js |
| 138 | +import { LibModule } from '@angular-material-extensions/google-maps-autocomplete'; |
| 139 | + |
| 140 | +@NgModule({ |
| 141 | + declarations: [OtherComponent, ...], |
| 142 | + imports: [LibModule, ...], |
| 143 | +}) |
| 144 | +export class OtherModule { |
| 145 | +} |
| 146 | +``` |
| 147 | + |
| 148 | +<a name="usage"/> |
| 149 | + |
| 150 | +## [Usage](https://angular-material-extensions.github.io/google-maps-auto/getting-started) |
| 151 | + |
| 152 | +<a name="documentation"/> |
| 153 | + |
| 154 | +## [Documentation](https://angular-material-extensions.github.io/google-maps-auto/doc/index.html) |
| 155 | + |
| 156 | +Please checkout the full documentation [here](https://angular-material-extensions.github.io//google-maps-auto/doc/index.html) |
| 157 | +or follow the official [tutorial](https://angular-material-extensions.github.io//google-maps-auto/getting-started) |
| 158 | + |
| 159 | + |
| 160 | +<a name="run-demo-app-locally"/> |
| 161 | + |
| 162 | +## Run Demo App Locally |
| 163 | + |
| 164 | +- [clone this repo](https://github.com/angular-material-extensions/google-maps-auto.git) by running |
| 165 | +```bash |
| 166 | +$ git clone https://github.com/angular-material-extensions/google-maps-auto.gi |
| 167 | +``` |
| 168 | + |
| 169 | +- link the **@angular-material-extensions/google-maps-auto** package |
| 170 | +use gulp globally |
| 171 | +```bash |
| 172 | +$ gulp link |
| 173 | +``` |
| 174 | + |
| 175 | +use gulp locally |
| 176 | +```bash |
| 177 | +$ npx gulp link |
| 178 | +``` |
| 179 | +for some mac os users, you may use the sudo command with gulp |
| 180 | +use gulp with sudo |
| 181 | +```bash |
| 182 | +$ sudo gulp link |
| 183 | +``` |
| 184 | +or locally |
| 185 | +```bash |
| 186 | +$ sudo npx gulp link |
| 187 | +``` |
| 188 | + |
| 189 | +- navigate to the demo app directory |
| 190 | +```bash |
| 191 | +$ cd demo |
| 192 | +``` |
| 193 | + |
| 194 | +- install the dependencies |
| 195 | +```bash |
| 196 | +$ npm i |
| 197 | +``` |
| 198 | + |
| 199 | +- run/start/serve the app |
| 200 | +```bash |
| 201 | +$ npm run start |
| 202 | +``` |
| 203 | +or |
| 204 | +```bash |
| 205 | +$ ng serve --open |
| 206 | +``` |
| 207 | +- the app is now hosted by `http://localhost:4200/` |
| 208 | + |
| 209 | + |
| 210 | +<a name="development"/> |
| 211 | + |
| 212 | +## Development |
| 213 | + |
| 214 | +1. clone this [repo](https://github.com/angular-material-extensions/google-maps-auto.git) |
| 215 | +2. Install the dependencies by running `npm i` |
| 216 | +3. build the library `npm run build` or `gulp build` |
| 217 | +To generate all `*.js`, `*.d.ts` and `*.metadata.json` files: |
| 218 | + |
| 219 | +```bash |
| 220 | +$ npm run build |
| 221 | +``` |
| 222 | + |
| 223 | +4. Link the library |
| 224 | + - on windows `gulp link` or locally `npx gulp link` |
| 225 | + - on mac/linux `sudo gulp link` or locally `sudo npx gulp link` |
| 226 | + |
| 227 | + 5. Navigate to the demo app's directory |
| 228 | + - `cd demo` |
| 229 | + _ `npm i` |
| 230 | + _ `npm start` |
| 231 | + |
| 232 | +extras |
| 233 | +To lint all `*.ts` files: |
| 234 | + |
| 235 | +```bash |
| 236 | +$ npm run lint |
| 237 | +``` |
| 238 | +<a name="other-angular-libraries"/> |
| 239 | + |
| 240 | +## Other Angular Libraries |
| 241 | +- [ngx-auth-firebaseui](https://github.com/AnthonyNahas/ngx-auth-firebaseui) |
| 242 | +- [ngx-material-pages](https://github.com/AnthonyNahas/ngx-material-pages) |
| 243 | +- [ngx-material-password-strength](https://github.com/AnthonyNahas/ngx-material-password-strength) |
| 244 | +- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts) |
| 245 | +- [@angular-material-extensions/combination-generator](https://github.com/angular-material-extensions/combination-generator) |
| 246 | + |
| 247 | +<a name="support"/> |
| 248 | + |
| 249 | +## Support |
| 250 | ++ Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de) |
| 251 | ++ or open an appropriate [issue](https://github.com/angular-material-extensions/google-maps-auto/issues) |
| 252 | ++ let us chat on [Gitter](https://gitter.im/angular-material-extensions/Lobby) |
| 253 | + |
| 254 | + Built by and for developers :heart: we will help you :punch: |
| 255 | + |
| 256 | + |
| 257 | +## License |
| 258 | + |
| 259 | +Copyright (c) 2018 [Anthony Nahas](https://github.com/AnthonyNahas). Licensed under the MIT License (MIT) |
| 260 | + |
0 commit comments