@angular-material-extensions/google-maps-autocomplete - Autocomplete input component for google-maps built with angular material design

Built by and for developers ❤️

Table of Contents

Demo

npm i -D @types/googlemaps

Installation

1. Install viang add. (Recommended)

ng add @angular-material-extensions/google-maps-autocomplete

2. Install vianpm. (Alternative)

npm install --save @angular-material-extensions/google-maps-autocomplete

ng add @angular/material

import{MatGoogleMapsAutocompleteModule}from'@angular-material-extensions/google-maps-autocomplete';

import{MatGoogleMapsAutocompleteModule}from'@angular-material-extensions/google-maps-autocomplete';@NgModule({declarations:[AppComponent, ...],imports:[MatGoogleMapsAutocompleteModule.forRoot('YOUR_GOOGLE_MAPS_API_KEY'), ...],bootstrap:[AppComponent]})exportclassAppModule{}

import{MatGoogleMapsAutocompleteModule}from'@angular-material-extensions/google-maps-autocomplete';@NgModule({declarations:[OtherComponent, ...],imports:[MatGoogleMapsAutocompleteModule, ...],})exportclassOtherModule{}

Usage

As directive

<mat-form-field><mat-label>Address<<usingthedirective>></mat-label><inputmatInputmatGoogleMapsAutocomplete[country]="de"(onAutocompleteSelected)="onAutocompleteSelected($event)"(onLocationSelected)="onLocationSelected($event)"></mat-form-field>

As components

or alternatively usemat-google-maps-auto-complete, the UI wrapper

mat-google-maps-auto-complete

<mat-google-maps-autocomplete[appearance]="appearance.OUTLINE"(onAutocompleteSelected)="onAutocompleteSelected($event)"(onLocationSelected)="onLocationSelected($event)"></mat-google-maps-autocomplete>

<mat-google-maps-autocompletecountry="us"type="address"(onAutocompleteSelected)="onAutocompleteSelected($event)"(onLocationSelected)="onLocationSelected($event)"></mat-google-maps-autocomplete>

<divclass="container"fxLayout="column"fxLayoutAlign="center"><divfxFlexfxFlexAlign="center"class="autocomplete-container"[ngStyle.xs]="{'min-width.%': 100}"[ngStyle.sm]="{'width.%': 70}"><mat-google-maps-autocomplete(onAutocompleteSelected)="onAutocompleteSelected($event)"(onLocationSelected)="onLocationSelected($event)"(onGermanAddressMapped)="onGermanAddressMapped($event)"></mat-google-maps-autocomplete></div></div>

import{Component,OnInit,ViewEncapsulation}from'@angular/core';import{Title}from'@angular/platform-browser';import{Location,Appearance,GermanAddress}from'@angular-material-extensions/google-maps-autocomplete';import{}from'@types/googlemaps';importPlaceResult=google.maps.places.PlaceResult;@Component({selector:'app-home',templateUrl:'./home.component.html',styleUrls:['./home.component.scss'],encapsulation:ViewEncapsulation.None,})exportclassHomeComponentimplementsOnInit{publicappearance=Appearance;publiczoom:number;publiclatitude:number;publiclongitude:number;publicselectedAddress:PlaceResult;constructor(privatetitleService:Title){}ngOnInit(){this.titleService.setTitle('Home | @angular-material-extensions/google-maps-autocomplete');this.zoom=10;this.latitude=52.520008;this.longitude=13.404954;this.setCurrentPosition();}privatesetCurrentPosition(){if('geolocation'innavigator){navigator.geolocation.getCurrentPosition((position)=>{this.latitude=position.coords.latitude;this.longitude=position.coords.longitude;this.zoom=12;});}}onAutocompleteSelected(result:PlaceResult){console.log('onAutocompleteSelected: ',result);}onLocationSelected(location:Location){console.log('onLocationSelected: ',location);this.latitude=location.latitude;this.longitude=location.longitude;}onGermanAddressMapped($event:GermanAddress){console.log('onGermanAddressMapped',$event);}}

Reactive Forms Example

<form[formGroup]="addressFormGroup"><mat-search-google-maps-autocompleteformControlName="address"></mat-search-google-maps-autocomplete>  // OR<mat-google-maps-autocompleteformControlName="address"></mat-google-maps-autocomplete></form>

import{Component,OnInit}from'@angular/core';import{FormControl,FormGroup}from'@angular/forms';@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.scss']})exportclassAppComponentimplementsOnInit{addressFormGroup:FormGroup;ngOnInit():void{this.addressFormGroup=newFormGroup({address:newFormControl(),});this.addressFormGroup.get('address').valueChanges.subscribe(value=>console.log('value changed',value))}}

API - for more info please visit the official documentationMaps JavaScript API

matGoogleMapsAutocomplete

Supported Types

mat-google-maps-autocomplete

mat-search-google-maps-autocomplete

<mat-card><mat-card-title>Auto Parse Address</mat-card-title><mat-card-content><!-- #######   here we go !! ######--><mat-search-google-maps-autocompleteappearance="outline"country="de"(onGermanAddressMapped)="onGermanAddressMapped($event)">></mat-search-google-maps-autocomplete></mat-card-content></mat-card>

import{Appearance,GermanAddress,Location}from'@angular-material-extensions/google-maps-autocomplete';onGermanAddressMapped($event;:GermanAddress;){console.log('onGermanAddressMapped',$event);}

Documentation

$ git clone https://github.com/angular-material-extensions/google-maps-autocomplete.git

$ gulp link

$cd demo&& npm i&& npm start

Who is using ngx-mailto? Awesome apps?

License