{"id":13808890,"url":"https://github.com/angular-material-extensions/google-maps-autocomplete","last_synced_at":"2025-04-07T14:11:36.145Z","repository":{"id":43363785,"uuid":"137520712","full_name":"angular-material-extensions/google-maps-autocomplete","owner":"angular-material-extensions","description":"Autocomplete input component and directive for google-maps built with angular and material design |","archived":false,"fork":false,"pushed_at":"2024-09-21T08:56:14.000Z","size":72423,"stargazers_count":170,"open_issues_count":8,"forks_count":66,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-31T13:15:37.589Z","etag":null,"topics":["angular","angular-library","angular6-component","angular6-library","autocomplete","autocomplete-search","google-maps-api","material","material-design","material-extensions"],"latest_commit_sha":null,"homepage":"https://angular-material-extensions.github.io/google-maps-autocomplete","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular-material-extensions.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"angular-material-extensions","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":"npm/@angular-material-extensions/google-maps-autocomplete","community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://github.com/AnthonyNahas","anahas.de"]}},"created_at":"2018-06-15T18:36:45.000Z","updated_at":"2025-02-05T02:00:40.000Z","dependencies_parsed_at":"2024-06-18T14:01:02.483Z","dependency_job_id":"4b899a13-7c26-49bb-872a-67d5a4a3b3f2","html_url":"https://github.com/angular-material-extensions/google-maps-autocomplete","commit_stats":{"total_commits":349,"total_committers":10,"mean_commits":34.9,"dds":"0.11747851002865328","last_synced_commit":"9f1e78e51e2b38f94d6a1fa57af6a32fa167d80c"},"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-material-extensions%2Fgoogle-maps-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-material-extensions%2Fgoogle-maps-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-material-extensions%2Fgoogle-maps-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-material-extensions%2Fgoogle-maps-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-material-extensions","download_url":"https://codeload.github.com/angular-material-extensions/google-maps-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247666008,"owners_count":20975787,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-library","angular6-component","angular6-library","autocomplete","autocomplete-search","google-maps-api","material","material-design","material-extensions"],"created_at":"2024-08-04T01:01:54.348Z","updated_at":"2025-04-07T14:11:36.121Z","avatar_url":"https://github.com/angular-material-extensions.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n \u003cimg alt=\"angular-material-extensions's logo\"\n height=\"256px\" width=\"256px\" style=\"text-align: center;\" \n src=\"https://cdn.rawgit.com/angular-material-extensions/google-maps-autocomplete/master/assets/angular-material-extensions-logo.svg\"\u003e\n\u003c/p\u003e\n\n# @angular-material-extensions/google-maps-autocomplete - Autocomplete input component for google-maps built with angular material design\n\n[![npm version](https://badge.fury.io/js/%40angular-material-extensions%2Fgoogle-maps-autocomplete.svg)](https://badge.fury.io/js/%40angular-material-extensions%2Fgoogle-maps-autocomplete)\n[![npm demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://angular-material-extensions.github.io/google-maps-autocomplete)\n[![Join the chat at https://gitter.im/angular-material-extensions/Lobby](https://badges.gitter.im/angular-material-extensions/Lobby.svg)](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Coverage Status](https://coveralls.io/repos/github/angular-material-extensions/google-maps-autocomplete/badge.svg?branch=master)](https://coveralls.io/github/angular-material-extensions/google-maps-autocomplete?branch=master)\n[![Build Status](https://travis-ci.org/angular-material-extensions/google-maps-autocomplete.svg?branch=master)](https://travis-ci.org/angular-material-extensions/google-maps-autocomplete)\n[![CircleCI branch](https://img.shields.io/circleci/project/github/angular-material-extensions/google-maps-autocomplete/master.svg?label=circleci)](https://circleci.com/gh/angular-material-extensions/google-maps-autocomplete)\n[![Greenkeeper Badge](https://badges.greenkeeper.io/angular-material-extensions/google-maps-autocomplete.svg)](https://greenkeeper.io/)\n[![license](https://img.shields.io/github/license/angular-material-extensions/google-maps-autocomplete.svg?style=flat-square)](https://github.com/angular-material-extensions/google-maps-autocomplete/blob/master/LICENSE)\n[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/gdi2290/awesome-angular)\n\n\n\u003cp align=\"center\"\u003e\n \u003cimg alt=\"@angular-material-extensions/google-maps-autocomplete\" style=\"text-align: center;\"\n src=\"https://raw.githubusercontent.com/angular-material-extensions/google-maps-autocomplete/HEAD/assets/demo1.gif\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003cimg alt=\"@angular-material-extensions/google-maps-autocomplete\" style=\"text-align: center;\"\n src=\"https://raw.githubusercontent.com/angular-material-extensions/google-maps-autocomplete/HEAD/assets/v3.0.0/search.gif\"\u003e\n\u003c/p\u003e\n\n\n`Please use lib v8 only with angular v15`\n\n## Built by and for developers :heart:\n\nDo you have any question or suggestion ? Please do not hesitate to contact us!\nAlternatively, provide a PR | open an appropriate\nissue [here](https://github.com/angular-material-extensions/google-maps-auto/issues)\n\nIf did you like this project, support [angular-material-extensions](https://github.com/angular-material-extensions)\nby starring :star: and sharing it :loudspeaker:\n\n## Table of Contents\n\n- [Demo](#demo)\n- [Dependencies](#dependencies)\n- [Peer Dependencies](#peerDependencies)\n- [Additional Requirements - material (Include a theme)](#additional-requirements-material-theme)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Documentation](#documentation)\n- [Run Demo App Locally](#run-demo-app-locally)\n- [Development](#development)\n- [Other Angular Libraries](#other-angular-libraries)\n- [Support](#support)\n- [License](#license)\n\n\u003ca name=\"demo\"/\u003e\n\n## [Demo](https://angular-material-extensions.github.io/google-maps-autocomplete)\n\nView all the directives and components in action\nat [https://angular-material-extensions.github.io/google-maps-autocomplete](https://angular-material-extensions.github.io/google-maps-autocomplete)\n\n\u003ca name=\"dependencies\"/\u003e\n\n## Dependencies\n\n* [Angular](https://angular.io) (*requires* Angular latest | we are using already v16 ;)\n\noptional\n\n```bash\nnpm i -D @types/googlemaps \n```\n\n\u003ca name=\"installation\"/\u003e\n\n## [Installation](https://angular-material-extensions.github.io/google-maps-autocomplete/getting-started)\n\n## 1. Install via *ng add*. (Recommended)\n\nIf Angular Material Design is not setup, just\nrun `ng add @angular/material` [learn more](https://material.angular.io/guide/getting-started)\n\nNow add the library via the `angular schematics` and everything will be setup for you\n\n```shell\nng add @angular-material-extensions/google-maps-autocomplete\n```\n\n## 2. Install via *npm*. (Alternative)\n\nNow install `@angular-material-extensions/google-maps-autocomplete` via:\n\n```shell\nnpm install --save @angular-material-extensions/google-maps-autocomplete\n```\n\n\u003ca name=\"peerDependencies\"/\u003e\n\n### Requirements (peer dependencies):\n\nfor the ui input component, please consider installing the following packages\n\n- [angular animations v16.x](https://www.npmjs.com/package/@angular/animations)\n- [angular forms v16.x](https://www.npmjs.com/package/@angular/forms)\n- [angular material v16.x](https://www.npmjs.com/package/@angular/material)\n- [angular cdk v16.x](https://www.npmjs.com/package/@angular/cdk)\n\n```bash\nng add @angular/material \n```\n\n\u003ca name=\"additional-requirements-material-theme\"/\u003e\n\n### Additional requirements Theme (Material Design)\n\n- [angular material theme](https://material.angular.io/guide/getting-started#step-4-include-a-theme)\n\n---\n\nOnce installed you need to import the main module:\n\n```js\nimport {MatGoogleMapsAutocompleteModule} from '@angular-material-extensions/google-maps-autocomplete';\n```\n\nThe only remaining part is to list the imported module in your application module. The exact method will be slightly\ndifferent for the root (top-level) module for which you should end up with the code similar to (\nnotice ` MatGoogleMapsAutocompleteModule.forRoot()`):\n\n```js\nimport {MatGoogleMapsAutocompleteModule} from '@angular-material-extensions/google-maps-autocomplete';\n\n@NgModule({\n declarations: [AppComponent, ...],\n imports: [\n MatGoogleMapsAutocompleteModule.forRoot('YOUR_GOOGLE_MAPS_API_KEY'), ...],\n bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nOther modules in your application can simply import ` MatGoogleMapsAutocompleteModule `:\n\n```js\nimport {MatGoogleMapsAutocompleteModule} from '@angular-material-extensions/google-maps-autocomplete';\n\n@NgModule({\n declarations: [OtherComponent, ...],\n imports: [\n MatGoogleMapsAutocompleteModule, ...],\n})\nexport class OtherModule {\n}\n```\n\n\u003ca name=\"usage\"/\u003e\n\n## [Usage](https://angular-material-extensions.github.io/google-maps-autocomplete/getting-started)\n\n### As directive\n\nadd `matGoogleMapsAutocomplete` to your target html input element to enable the google maps autocomplete api as feature\n\n```html\n\n\u003cmat-form-field\u003e\n \u003cmat-label\u003eAddress \u003c\u003c using the directive \u003e\u003e\u003c/mat-label\u003e\n \u003cinput matInput\n matGoogleMapsAutocomplete\n [country]=\"de\"\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\n (onLocationSelected)=\"onLocationSelected($event)\"\u003e\n\u003c/mat-form-field\u003e\n```\n\n### As components\n\n#### or alternatively use `mat-google-maps-auto-complete`, the UI wrapper\n\nadd `mat-google-maps-auto-complete` element to your template\n\n### `mat-google-maps-auto-complete`\n\n```html\n\n\u003cmat-google-maps-autocomplete [appearance]=\"appearance.OUTLINE\"\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\n (onLocationSelected)=\"onLocationSelected($event)\"\u003e\n\u003c/mat-google-maps-autocomplete\u003e\n```\n\nA customized `mat-google-maps-autocomplete`\n\n```html\n\n\u003cmat-google-maps-autocomplete country=\"us\"\n type=\"address\"\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\n (onLocationSelected)=\"onLocationSelected($event)\"\u003e\n\u003c/mat-google-maps-autocomplete\u003e\n```\n\ncombine the result of the `mat-google-maps-autocomplete` with a google map instance\n\n```html\n\n\u003cdiv class=\"container\" fxLayout=\"column\" fxLayoutAlign=\"center\"\u003e\n\n \u003cdiv fxFlex fxFlexAlign=\"center\"\n class=\"autocomplete-container\"\n [ngStyle.xs]=\"{'min-width.%': 100}\"\n [ngStyle.sm]=\"{'width.%': 70}\"\u003e\n \u003cmat-google-maps-autocomplete (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\n (onLocationSelected)=\"onLocationSelected($event)\"\n (onGermanAddressMapped)=\"onGermanAddressMapped($event)\"\u003e\n \u003c/mat-google-maps-autocomplete\u003e\n \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\nin your component, the code will be similar to --\u003e\n\n```typescript\nimport {Component, OnInit, ViewEncapsulation} from '@angular/core';\nimport {Title} from '@angular/platform-browser';\nimport {Location, Appearance, GermanAddress} from '@angular-material-extensions/google-maps-autocomplete';\nimport {} from '@types/googlemaps';\nimport PlaceResult = google.maps.places.PlaceResult;\n\n@Component({\n selector: 'app-home',\n templateUrl: './home.component.html',\n styleUrls: ['./home.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class HomeComponent implements OnInit {\n\n public appearance = Appearance;\n public zoom: number;\n public latitude: number;\n public longitude: number;\n public selectedAddress: PlaceResult;\n\n constructor(private titleService: Title) {\n }\n\n ngOnInit() {\n this.titleService.setTitle('Home | @angular-material-extensions/google-maps-autocomplete');\n\n this.zoom = 10;\n this.latitude = 52.520008;\n this.longitude = 13.404954;\n\n this.setCurrentPosition();\n\n }\n\n private setCurrentPosition() {\n if ('geolocation' in navigator) {\n navigator.geolocation.getCurrentPosition((position) =\u003e {\n this.latitude = position.coords.latitude;\n this.longitude = position.coords.longitude;\n this.zoom = 12;\n });\n }\n }\n\n onAutocompleteSelected(result: PlaceResult) {\n console.log('onAutocompleteSelected: ', result);\n }\n\n onLocationSelected(location: Location) {\n console.log('onLocationSelected: ', location);\n this.latitude = location.latitude;\n this.longitude = location.longitude;\n }\n\n onGermanAddressMapped($event: GermanAddress) {\n console.log('onGermanAddressMapped', $event);\n }\n\n}\n\n```\n\n#### Reactive Forms Example\n\n```html\n\n\u003cform [formGroup]=\"addressFormGroup\"\u003e\n \u003cmat-search-google-maps-autocomplete formControlName=\"address\"\u003e\n \u003c/mat-search-google-maps-autocomplete\u003e\n\n // OR\n\n \u003cmat-google-maps-autocomplete formControlName=\"address\"\u003e\n \u003c/mat-google-maps-autocomplete\u003e\n\n\u003c/form\u003e\n```\n\n```typescript\n\nimport {Component, OnInit} from '@angular/core';\nimport {FormControl, FormGroup} from '@angular/forms';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit {\n\n addressFormGroup: FormGroup;\n\n ngOnInit(): void {\n this.addressFormGroup = new FormGroup({\n address: new FormControl(),\n });\n\n this.addressFormGroup.get('address').valueChanges.subscribe(value =\u003e console.log('value changed', value))\n }\n}\n\n```\n\n\u003ca name=\"api\"/\u003e\n\n### API - for more info please visit the official documentation [Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/places-autocomplete?hl=en)\n\n### `matGoogleMapsAutocomplete`\n\n| option | bind | type | default | description |\n|:-----------------------|:----------:|:-------------------:|:---------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| \n| value | `Input()` | PlaceResult ; | - |\n| address | `Input()` | PlaceResult | string; | - | \n| country | `Input()` | string | string[]; | - | can be used to restrict results to specific groups. Currently, you can use componentRestrictions to filter by up to 5 countries. Countries must be passed as as a two-character, ISO 3166-1 Alpha-2 compatible country code. Multiple countries must be passed as a list of country codes. \n| placeIdOnly | `Input()` | boolean | - | can be used to instruct the Autocomplete widget to retrieve only Place IDs. On calling getPlace() on the Autocomplete object, the PlaceResult made available will only have the place id, types and name properties set. You can use the returned place ID with calls to the Places, Geocoding, Directions or Distance Matrix services. \n| strictBounds | `Input()` | boolean | - | is a boolean specifying whether the API must return only those places that are strictly within the region defined by the given bounds. The API does not return results outside this region even if they match the user input. \n| types | `Input()` | string[] | - | An array of types specifies an explicit type or a type collection, as listed in the supported types below. If nothing is specified, all types are returned. In general only a single type is allowed. The exception is that you can safely mix the geocode and establishment types, but note that this will have the same effect as specifying no types. Supported types are listed below. |\n| type | `Input()` | string | - |\n| autoCompleteOptions | `Input()` | AutocompleteOptions | - | all above inputs in one object! The passed data to this object will be merged with the input if they exists \n| onChange | `Output()` | PlaceResult | string | null | - | event when the input form value changed\n| onAutocompleteSelected | `Output()` | PlaceResult | - | the event will be fired when a place has been selected via the google maps autocomplete component \n| onGermanAddressMapped | `Output()` | GermanAddress | - | the event will be fired when a place has been selected and mapped to the german address interface |\n| onLocationSelected | `Output()` | Location | - | the event will be fired when a place has been selected via the google maps autocomplete component |\n\n#### Supported Types\n\n| type | description |\n|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| geocode | instructs the Places service to return only geocoding results, rather than business results. |\n| address | instructs the Places service to return only geocoding results with a precise address. | \n| establishment | instructs the Places service to return only business results. |\n| regions | instructs the Places service to return any result matching the following types: locality, sublocality, postal_code, country, administrative_area1, administrative_area2 |\n| cities | instructs the Places service to return results that match either locality or administrative_area3. |\n\n### `mat-google-maps-autocomplete`\n\neverything included in `matGoogleMapsAutocomplete` + the following\n\n| option | bind | type | default | description |\n|:------------------|:---------:|:----------:|:---------------------------:|:--------------------| \n| addressLabelText | `Input()` | string; | Address using the component | self explanatory \n| placeholderText | `Input()` | string; | Please enter the address | self explanatory \n| requiredErrorText | `Input()` | string; | The address is required | self explanatory \n| invalidErrorText | `Input()` | string; | The address is not valid | self explanatory \n| appearance | `Input()` | Appearance | string; | Appearance.STANDARD | Style the `mat-form-field` by setting the appearance option : standard, fill, outline or legacy\n\n### `mat-search-google-maps-autocomplete`\n\n| option | bind | type | default | description |\n|:----------------------|:----------:|:---------------------------:|:----------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| \n| searchBarAppearance | `Input()` | Appearance | string; | Appearance.STANDARD | Style the `mat-form-field` of the search input bar only - by setting the appearance option : standard, fill, outline or legacy\n| appearance | `Input()` | Appearance | string; | Appearance.STANDARD | Style the `mat-form-field` by setting the appearance option : standard, fill, outline or legacy\n| searchAddressLabel | `Input()` | string; | `Search Address` | input label \n| streetNameLabel | `Input()` | string; | `Street` | input label \n| streetNumberLabel | `Input()` | string; | `Nr.` | input label \n| postalCodeLabel | `Input()` | string; | `PLZ` | input label \n| vicinityLabel | `Input()` | string; | `Locality` | input label \n| localityLabel | `Input()` | string; | `Locality` | input label \n| showVicinity | `Input()` | boolean; | `false` | input label - whether to display the vecinity \n| readonly | `Input()` | boolean; | `false` | readonly input \n| disableSearch | `Input()` | boolean; | `false` | disabled users to search a place \n| value | `Input()` | `GermanAddress`; | - | the initial value of the component \n| country | `Input()` | string | string[]; | - | can be used to restrict results to specific groups. Currently, you can use componentRestrictions to filter by up to 5 countries. Countries must be passed as as a two-character, ISO 3166-1 Alpha-2 compatible country code. Multiple countries must be passed as a list of country codes. \n| placeIdOnly | `Input()` | boolean | - | can be used to instruct the Autocomplete widget to retrieve only Place IDs. On calling getPlace() on the Autocomplete object, the PlaceResult made available will only have the place id, types and name properties set. You can use the returned place ID with calls to the Places, Geocoding, Directions or Distance Matrix services. \n| strictBounds | `Input()` | boolean | - | is a boolean specifying whether the API must return only those places that are strictly within the region defined by the given bounds. The API does not return results outside this region even if they match the user input. \n| types | `Input()` | string[] | - | An array of types specifies an explicit type or a type collection, as listed in the supported types below. If nothing is specified, all types are returned. In general only a single type is allowed. The exception is that you can safely mix the geocode and establishment types, but note that this will have the same effect as specifying no types. Supported types are listed below. |\n| type | `Input()` | string | - |\n| onGermanAddressMapped | `Output()` | EventEmitter\u003cGermanAddress\u003e | string; | Appearance.STANDARD | asd\n\n\u003cp align=\"center\"\u003e\n \u003cimg alt=\"@angular-material-extensions/google-maps-autocomplete\" style=\"text-align: center;\"\n src=\"https://raw.githubusercontent.com/angular-material-extensions/google-maps-autocomplete/HEAD/assets/v3.0.0/search1.png\"\u003e\n\u003c/p\u003e\n\n```html\n\n\u003cmat-card\u003e\n \u003cmat-card-title\u003eAuto Parse Address\u003c/mat-card-title\u003e\n \u003cmat-card-content\u003e\n \u003c!-- ####### here we go !! ######--\u003e\n \u003cmat-search-google-maps-autocomplete appearance=\"outline\"\n country=\"de\"\n (onGermanAddressMapped)=\"onGermanAddressMapped($event)\"\u003e\n \u003e\n \u003c/mat-search-google-maps-autocomplete\u003e\n \u003c/mat-card-content\u003e\n\u003c/mat-card\u003e\n```\n\n```typescript\nimport {Appearance, GermanAddress, Location} from '@angular-material-extensions/google-maps-autocomplete';\n\nonGermanAddressMapped($event;\n:\nGermanAddress;\n)\n{\n console.log('onGermanAddressMapped', $event);\n}\n```\n\n\u003ca name=\"documentation\"/\u003e\n\n## [Documentation](https://angular-material-extensions.github.io/google-maps-autocomplete/doc/index.html)\n\nPlease checkout the full\ndocumentation [here](https://angular-material-extensions.github.io//google-maps-autocomplete/doc/index.html)\nor follow the\nofficial [tutorial](https://angular-material-extensions.github.io//google-maps-autocomplete/getting-started)\n\n\n\u003ca name=\"run-demo-app-locally\"/\u003e\n\n## Run Demo App Locally\n\n- [clone this repo](https://github.com/angular-material-extensions/google-maps-autocomplete.git) by running\n\n```bash\n$ git clone https://github.com/angular-material-extensions/google-maps-autocomplete.git\n```\n\n- link the **@angular-material-extensions/google-maps-autocomplete** package\n\n```bash\n$ gulp link\n```\n\n- navigate to the demo app directory, install the dependencies and serve the app\n\n```bash\n$ cd demo \u0026\u0026 npm i \u0026\u0026 npm start\n```\n\n- the app is now hosted by `http://localhost:4200/`\n\n\u003ca name=\"development\"/\u003e\n\n## Development\n\n1. clone this [repo](https://github.com/angular-material-extensions/google-maps-autocomplete.git)\n2. Install the dependencies by running `npm i`\n3. go to lib directory under `projects/angular-material-extensions/google-maps-autocomplete`\n4. build the library `npm run build`\n\n---\n\n\n\u003ca name=\"other-angular-libraries\"/\u003e\n\n## Other Angular Libraries\n\n- [ngx-auth-firebaseui](https://github.com/AnthonyNahas/ngx-auth-firebaseui)\n- [ngx-linkifyjs](https://github.com/AnthonyNahas/ngx-linkifyjs)\n- [ngx-mailto](https://github.com/AnthonyNahas/ngx-mailto)\n- [@firebaseui/ng-bootstrap](https://github.com/firebaseui/ng-bootstrap)\n- [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)\n- [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview)\n- [@angular-material-extensions/password-strength](https://github.com/angular-material-extensions/password-strength)\n- [@angular-material-extensions/select-country](https://github.com/angular-material-extensions/select-country)\n- [@angular-material-extensions/select-icon](https://github.com/angular-material-extensions/select-icon)\n- [@angular-material-extensions/fab-menu](https://github.com/angular-material-extensions/fab-menu)\n- [@angular-material-extensions/faq](https://github.com/angular-material-extensions/faq)\n- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)\n\n---\n\n\u003ca name=\"support\"/\u003e\n\n## Support\n\n+ Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de)\n+ or open an appropriate [issue](https://github.com/angular-material-extensions/google-maps-autocomplete/issues)\n+ let us chat on [Gitter](https://gitter.im/angular-material-extensions/Lobby)\n\nBuilt by and for developers :heart: we will help you :punch:\n\n---\n\n## Who is using ngx-mailto? Awesome apps?\n\n1. [Nahaus.de - Digitale und automatisierte Immobilienverwaltung Software für private Vermieter und Hausverwaltungen](https://nahaus.de)\n\nAre you missing your project or you app? PR me to publish it on the README\n\n---\n\n## License\n\nCopyright (c) 2019-2024 [Anthony Nahas](https://github.com/AnthonyNahas). Licensed under the MIT License (\nMIT) \u003cp align=\"center\"\u003e\n\u003cimg alt=\"angular-material-extensions's logo\"\nheight=\"92px\" width=\"92px\" style=\"text-align: center;\"\nsrc=\"https://cdn.jsdelivr.net/gh/angular-material-extensions/google-maps-autocomplete@master/assets/badge_made-in-germany.svg\"\u003e\n\u003c/p\u003e\n","funding_links":["https://github.com/sponsors/angular-material-extensions","https://tidelift.com/funding/github/npm/@angular-material-extensions/google-maps-autocomplete","https://github.com/AnthonyNahas","anahas.de"],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-material-extensions%2Fgoogle-maps-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-material-extensions%2Fgoogle-maps-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-material-extensions%2Fgoogle-maps-autocomplete/lists"}