Git Product home page Git Product logo

dhormale / google-places-autocomplete Goto Github PK

View Code? Open in Web Editor NEW
16.0 1.0 33.0 243 KB

Google Address Suggest/Autocomplete feature using angular 2+

Home Page: https://medium.com/@dhormale/use-google-places-api-autocomplete-using-angular-for-resident-and-office-address-23cc33078e8

JavaScript 13.09% TypeScript 78.42% HTML 7.15% CSS 1.34%
google google-maps-api address autocomplete angular component ux-experience ux

google-places-autocomplete's Introduction

Running example:

https://dhormale.github.io/google-places-autocomplete/

https://medium.com/@dhormale/use-google-places-api-autocomplete-using-angular-for-resident-and-office-address-23cc33078e8

It’s effortless with Google Places API to add addresses in seconds against traditional inputs accepting Street Number, Street Name, City, State, Zip.

Google Autocomplete showed almost 20% time savings and error reduction on mobile. You save time by no longer dealing with incorrect addresses and the resulting problems.

There are multiple ways in Angular 2+ to implement google places API’s. Following steps shows how we can create a reusable component that can be used to autocomplete address.

Step 1: Install type/googlemaps

npm install --save @types/googlemaps

Steps 2: Add google API in index.html with own key

<script src=”https://maps.googleapis.com/maps/api/js?libraries=places&key=GOOGLE_KEY"></script>

Step 3: Create a component like google-places.component.ts

Step 4: Use AutocompleteComponent with adressType input.

For Residential Address:

<AutocompleteComponent (setAddress)="getAddress($event)" adressType="geocode"></AutocompleteComponent>

For Office Address:

<AutocompleteComponent (setAddress)="getEstablishmentAddress($event)" adressType="establishment"></AutocompleteComponent>

google-places-autocomplete's People

Contributors

dhormale avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

google-places-autocomplete's Issues

bug

import { } from '@types/googlemaps'; gives error while compiling
This is the issue
ERROR in src/app/add-emp/add-emp.component.ts(16,17): error TS2306: File '/home/work/test-app/node_modules/@types/googlemaps/index.d.ts' is not a module.
src/app/add-emp/add-emp.component.ts(16,17): error TS6137: Cannot import type declaration files. Consider importing 'googlemaps' instead of '@types/googlemaps'.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.