Skip to content
Autocomplete input component for google-maps built with angular material design
JavaScript TypeScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore(pacakge): added circleci support Jun 20, 2018
.github chore(package): initial commit after generating the library Jun 16, 2018
assets docs(package): added the angular material extensions logo Jul 24, 2018
config chore(package): added configuration for jest Jun 16, 2018
demo fix(package): updated the project Oct 27, 2019
src fix(package): updated the schematics Jul 23, 2019
.babelrc fix(package): unexpected token import from agm core module fixed via … Oct 3, 2018
.editorconfig chore(package): initial commit after generating the library Jun 16, 2018
.gitignore chore(package): initial commit after generating the library Jun 16, 2018
.travis.yml chore(package): use nodejs for travis ci Jun 18, 2018
.yo-rc.json chore(package): added tsconfig and tslint files Jun 16, 2018
CHANGELOG.md chore(release): bump version number to 2.0.0 Jul 23, 2019
LICENSE docs(project): added changelog, readme and license to the project Jun 16, 2018
README.md Cleaned up the 'types' description and added 'supported types' table Jun 12, 2019
commitlint.config.js chore(ci): added commitlint file Feb 10, 2019
greenkeeper.json chore: add Greenkeeper config file Jun 17, 2018
gulpfile.js chore(release): bump version number to 1.5.0 Apr 2, 2019
karma.conf.js chore(package): added karma and webpack config files Jun 16, 2018
package-lock.json fix(package): updated the project Oct 27, 2019
package.json fix(package): updated the project Oct 27, 2019
tsconfig.json chore(package): added tsconfig and tslint files Jun 16, 2018
tslint.json feat(package): added schematics support #69 Mar 12, 2019
webpack.config.js chore(package): added karma and webpack config files Jun 16, 2018
yarn.lock chore(package): updated dependencies Jul 24, 2018

README.md

angular-material-extensions's logo

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

npm version npm demo Join the chat at https://gitter.im/angular-material-extensions/Lobby Coverage Status Build Status CircleCI branch dependency Status devDependency Status Greenkeeper Badge license Awesome

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

Stating with v1.3.0, you can now use this library without material2's dependency! To enable this goolgle maps autocomplate api as feature, you can just add matGoogleMapsAutocomplete to any html input element!

Built by and for developers ❤️

Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

If did you like this project, support angular-material-extensions by starring ⭐️ and sharing it 📢

Table of Contents

Demo

View all the directives and components in action at https://angular-material-extensions.github.io/google-maps-autocomplete

Dependencies

  • Angular (requires Angular 2 or higher)

for the directive as standalone you just need to install the agm core module

npm i @agm/core 

optional

npm i -D @types/googlemaps 

Installation

1. Install via ng add. (Recommended)

If Angular Material Design is not setup, just run ng add @angular/material learn more

Now add the library via the angular schematics and everything will be setup for you

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

2. Install via npm. (Alternative)

Now install @angular-material-extensions/google-maps-autocomplete via:

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

Requirements (peer dependencies):

for the ui input component, please consider to install the following packages

if your are not using the directive but the mat-google-maps-autocomplete component

npm i @angular/cdk @angular/material @angular/animations @angular/forms 

Additional requirements Theme (Material Design)


SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for @angular-material-extensions/google-maps-autocomplete:

map: {
  '@angular-material-extensions/google-maps-autocomplete': 'node_modules/@angular-material-extensions/google-maps-autocomplete/bundles/google-maps-autocomplete.umd.js',
}

Once installed you need to import the main module:

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

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice MatGoogleMapsAutocompleteModule.forRoot()):

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

@NgModule({
  declarations: [AppComponent, ...],
  imports: [
     AgmCoreModule.forRoot({
          apiKey: 'YOUR_KEY',
          libraries: ['places']
        }),
     MatGoogleMapsAutocompleteModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import MatGoogleMapsAutocompleteModule:

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [
     MatGoogleMapsAutocompleteModule, ...], 
})
export class OtherModule {
}

Usage

As directive

add matGoogleMapsAutocomplete to your target html input element to enable the google maps autocomplete api as feature

<mat-form-field>
  <mat-label>Address << using the directive >></mat-label>
  <input matInput
       matGoogleMapsAutocomplete
       [country]="de"
       (onAutocompleteSelected)="onAutocompleteSelected($event)"
       (onLocationSelected)="onLocationSelected($event)">
</mat-form-field>

As components

or alternatively use mat-google-maps-auto-complete, the UI wrapper

add mat-google-maps-auto-complete element to your template

mat-google-maps-auto-complete

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

A customized mat-google-maps-autocomplete

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

combine the result of the mat-google-maps-autocomplete with a google map instance via @agm

<div class="container" fxLayout="column" fxLayoutAlign="center">

    <div fxFlex>
      <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
        <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
      </agm-map>
    </div>

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

  </div>

in your component, the code will be similar to -->

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {Title} from '@angular/platform-browser';
import {Location, Appearance} from '@angular-material-extensions/google-maps-autocomplete';
import {} from '@types/googlemaps';
import PlaceResult = google.maps.places.PlaceResult;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class HomeComponent implements OnInit {

  public appearance = Appearance;
  public zoom: number;
  public latitude: number;
  public longitude: number;
  public selectedAddress: PlaceResult;

  constructor(private titleService: 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();

  }

  private setCurrentPosition() {
    if ('geolocation' in navigator) {
      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;
  }
}

API - for more info please visit the official documentation Maps JavaScript API

matGoogleMapsAutocomplete

option bind type default description
address Input() PlaceResult string; -
country Input() string string[]; -
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.
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.
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.
type Input() string -
autoCompleteOptions Input() AutocompleteOptions - all above inputs in one object! The passed data to this object will be merged with the input if they exists
onChange Output() PlaceResult string null
onAutocompleteSelected Output() PlaceResult - the event will be fired when a place has been selected via the google maps autocomplete component
onLocationSelected Output() Location - the event will be fired when a place has been selected via the google maps autocomplete component

Supported Types

type description
geocode instructs the Places service to return only geocoding results, rather than business results.
address instructs the Places service to return only geocoding results with a precise address.
establishment instructs the Places service to return only business results.
regions instructs the Places service to return any result matching the following types: locality, sublocality, postal_code, country, administrative_area1, administrative_area2
cities instructs the Places service to return results that match either locality or administrative_area3.

mat-google-maps-autocomplete

everything included in matGoogleMapsAutocomplete + the following

option bind type default description
addressLabelText Input() string; Address using the component self explanatory
placeholderText Input() string; Please enter the address self explanatory
requiredErrorText Input() string; The address is required self explanatory
invalidErrorText Input() string; The address is not valid self explanatory
appearance Input() Appearance string; Appearance.STANDARD

Documentation

Please checkout the full documentation here or follow the official tutorial

Run Demo App Locally

$ git clone https://github.com/angular-material-extensions/google-maps-autocomplete.git
  • link the @angular-material-extensions/google-maps-autocomplete package
$ gulp link
  • navigate to the demo app directory, install the dependencies and serve the app
$ cd demo && npm i && npm start
  • the app is now hosted by http://localhost:4200/

Development

  1. clone this repo
  2. Install the dependencies by running npm i
  3. build the library npm run build or gulp build
$ npm run build
  1. Link the library
$ gulp link
  1. Navigate to the demo app's directory
  • cd demo _ npm i _ npm start

Other Angular Libraries

Support

Built by and for developers ❤️ we will help you 👊

License

Copyright (c) 2019 Anthony Nahas. Licensed under the MIT License (MIT)

You can’t perform that action at this time.