├── .browserslistrc
├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── angular.json
├── e2e
    ├── protractor.conf.js
    ├── src
    │   ├── app.e2e-spec.ts
    │   └── app.po.ts
    └── tsconfig.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── src
    ├── app
    │   ├── app.component.html
    │   ├── app.component.scss
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── models
    │   │   └── geocoder-response.model.ts
    │   └── services
    │   │   └── geocoding.service.ts
    ├── assets
    │   └── .gitkeep
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.ts
    ├── polyfills.ts
    ├── styles.scss
    └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json


/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # For the full list of supported browsers by the Angular framework, please see:
 6 | # https://angular.io/guide/browser-support
 7 | 
 8 | # You can see what browsers were selected by your queries by running:
 9 | #   npx browserslist
10 | 
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
18 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 | 
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Armin Zia
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Using Google Geocoding API in Angular
 2 | 
 3 | This repository holds the code sample for my blog post [Using Google Geocoding API in Angular](https://arminzia.com/blog/using-google-geocoding-api-in-angular/).
 4 | 
 5 | ![Google Geocoding Demo](https://arminzia.com/images/2021/3/f8ff66a5-4800-467f-8f7c-724b60434228/3d8ee3be-dab5-4b54-b2ae-ea1bcd8e1fad.gif)
 6 | 
 7 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.5.  
 8 | There are only a handful of dependencies:  
 9 | - [Bootstrap 4.6](https://getbootstrap.com/)
10 | - [Bootstrap Icons 1.4](https://icons.getbootstrap.com/)
11 | - [ngx-toastr](https://ngx-toastr.vercel.app/)
12 | - [@angular/google-maps](https://github.com/angular/components/tree/master/src/google-maps)
13 | - [@types/googlemaps](https://www.npmjs.com/package/@types/googlemaps)
14 | 
15 | ## Development server
16 | 
17 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.  
18 | 
19 | © 2021 [Armin Zia](https://arminzia.com)


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "cli": {
  4 |     "analytics": "4af83b76-62a9-4138-9d4e-2f1e5999a272"
  5 |   },
  6 |   "version": 1,
  7 |   "newProjectRoot": "projects",
  8 |   "projects": {
  9 |     "ng-google-geocoding-example": {
 10 |       "projectType": "application",
 11 |       "schematics": {
 12 |         "@schematics/angular:component": {
 13 |           "style": "scss"
 14 |         },
 15 |         "@schematics/angular:application": {
 16 |           "strict": true
 17 |         }
 18 |       },
 19 |       "root": "",
 20 |       "sourceRoot": "src",
 21 |       "prefix": "app",
 22 |       "architect": {
 23 |         "build": {
 24 |           "builder": "@angular-devkit/build-angular:browser",
 25 |           "options": {
 26 |             "outputPath": "dist/ng-google-geocoding-example",
 27 |             "index": "src/index.html",
 28 |             "main": "src/main.ts",
 29 |             "polyfills": "src/polyfills.ts",
 30 |             "tsConfig": "tsconfig.app.json",
 31 |             "aot": true,
 32 |             "assets": [
 33 |               "src/favicon.ico",
 34 |               "src/assets"
 35 |             ],
 36 |             "styles": [
 37 |               "src/styles.scss"
 38 |             ],
 39 |             "scripts": []
 40 |           },
 41 |           "configurations": {
 42 |             "production": {
 43 |               "fileReplacements": [
 44 |                 {
 45 |                   "replace": "src/environments/environment.ts",
 46 |                   "with": "src/environments/environment.prod.ts"
 47 |                 }
 48 |               ],
 49 |               "optimization": true,
 50 |               "outputHashing": "all",
 51 |               "sourceMap": false,
 52 |               "namedChunks": false,
 53 |               "extractLicenses": true,
 54 |               "vendorChunk": false,
 55 |               "buildOptimizer": true,
 56 |               "budgets": [
 57 |                 {
 58 |                   "type": "initial",
 59 |                   "maximumWarning": "500kb",
 60 |                   "maximumError": "1mb"
 61 |                 },
 62 |                 {
 63 |                   "type": "anyComponentStyle",
 64 |                   "maximumWarning": "2kb",
 65 |                   "maximumError": "4kb"
 66 |                 }
 67 |               ]
 68 |             }
 69 |           }
 70 |         },
 71 |         "serve": {
 72 |           "builder": "@angular-devkit/build-angular:dev-server",
 73 |           "options": {
 74 |             "browserTarget": "ng-google-geocoding-example:build"
 75 |           },
 76 |           "configurations": {
 77 |             "production": {
 78 |               "browserTarget": "ng-google-geocoding-example:build:production"
 79 |             }
 80 |           }
 81 |         },
 82 |         "extract-i18n": {
 83 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 84 |           "options": {
 85 |             "browserTarget": "ng-google-geocoding-example:build"
 86 |           }
 87 |         },
 88 |         "test": {
 89 |           "builder": "@angular-devkit/build-angular:karma",
 90 |           "options": {
 91 |             "main": "src/test.ts",
 92 |             "polyfills": "src/polyfills.ts",
 93 |             "tsConfig": "tsconfig.spec.json",
 94 |             "karmaConfig": "karma.conf.js",
 95 |             "assets": [
 96 |               "src/favicon.ico",
 97 |               "src/assets"
 98 |             ],
 99 |             "styles": [
100 |               "src/styles.scss"
101 |             ],
102 |             "scripts": []
103 |           }
104 |         },
105 |         "lint": {
106 |           "builder": "@angular-devkit/build-angular:tslint",
107 |           "options": {
108 |             "tsConfig": [
109 |               "tsconfig.app.json",
110 |               "tsconfig.spec.json",
111 |               "e2e/tsconfig.json"
112 |             ],
113 |             "exclude": [
114 |               "**/node_modules/**"
115 |             ]
116 |           }
117 |         },
118 |         "e2e": {
119 |           "builder": "@angular-devkit/build-angular:protractor",
120 |           "options": {
121 |             "protractorConfig": "e2e/protractor.conf.js",
122 |             "devServerTarget": "ng-google-geocoding-example:serve"
123 |           },
124 |           "configurations": {
125 |             "production": {
126 |               "devServerTarget": "ng-google-geocoding-example:serve:production"
127 |             }
128 |           }
129 |         }
130 |       }
131 |     }
132 |   },
133 |   "defaultProject": "ng-google-geocoding-example"
134 | }
135 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     browserName: 'chrome'
17 |   },
18 |   directConnect: true,
19 |   SELENIUM_PROMISE_MANAGER: false,
20 |   baseUrl: 'http://localhost:4200/',
21 |   framework: 'jasmine',
22 |   jasmineNodeOpts: {
23 |     showColors: true,
24 |     defaultTimeoutInterval: 30000,
25 |     print: function() {}
26 |   },
27 |   onPrepare() {
28 |     require('ts-node').register({
29 |       project: require('path').join(__dirname, './tsconfig.json')
30 |     });
31 |     jasmine.getEnv().addReporter(new SpecReporter({
32 |       spec: {
33 |         displayStacktrace: StacktraceOption.PRETTY
34 |       }
35 |     }));
36 |   }
37 | };


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { browser, logging } from 'protractor';
 2 | import { AppPage } from './app.po';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', async () => {
12 |     await page.navigateTo();
13 |     expect(await page.getTitleText()).toEqual('ng-google-geocoding-example app is running!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   async navigateTo(): Promise<unknown> {
 5 |     return browser.get(browser.baseUrl);
 6 |   }
 7 | 
 8 |   async getTitleText(): Promise<string> {
 9 |     return element(by.css('app-root .content span')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "../tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "../out-tsc/e2e",
 6 |     "module": "commonjs",
 7 |     "target": "es2018",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       jasmine: {
17 |         // you can add configuration options for Jasmine here
18 |         // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 |         // for example, you can disable the random execution with `random: false`
20 |         // or set a specific seed with `seed: 4321`
21 |       },
22 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
23 |     },
24 |     jasmineHtmlReporter: {
25 |       suppressAll: true // removes the duplicated traces
26 |     },
27 |     coverageReporter: {
28 |       dir: require('path').join(__dirname, './coverage/ng-google-geocoding-example'),
29 |       subdir: '.',
30 |       reporters: [
31 |         { type: 'html' },
32 |         { type: 'text-summary' }
33 |       ]
34 |     },
35 |     reporters: ['progress', 'kjhtml'],
36 |     port: 9876,
37 |     colors: true,
38 |     logLevel: config.LOG_INFO,
39 |     autoWatch: true,
40 |     browsers: ['Chrome'],
41 |     singleRun: false,
42 |     restartOnFileChange: true
43 |   });
44 | };
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-google-geocoding-example",
 3 |   "version": "0.1.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "~11.2.6",
15 |     "@angular/common": "~11.2.6",
16 |     "@angular/compiler": "~11.2.6",
17 |     "@angular/core": "~11.2.6",
18 |     "@angular/forms": "~11.2.6",
19 |     "@angular/google-maps": "^11.2.6",
20 |     "@angular/platform-browser": "~11.2.6",
21 |     "@angular/platform-browser-dynamic": "~11.2.6",
22 |     "@angular/router": "~11.2.6",
23 |     "bootstrap": "^4.6.0",
24 |     "bootstrap-icons": "^1.4.0",
25 |     "ngx-toastr": "^13.2.1",
26 |     "rxjs": "~6.6.0",
27 |     "tslib": "^2.0.0",
28 |     "zone.js": "~0.11.3"
29 |   },
30 |   "devDependencies": {
31 |     "@angular-devkit/build-angular": "~0.1102.5",
32 |     "@angular/cli": "~11.2.5",
33 |     "@angular/compiler-cli": "~11.2.6",
34 |     "@types/googlemaps": "^3.43.3",
35 |     "@types/jasmine": "~3.6.0",
36 |     "@types/node": "^12.11.1",
37 |     "codelyzer": "^6.0.0",
38 |     "jasmine-core": "~3.6.0",
39 |     "jasmine-spec-reporter": "~5.0.0",
40 |     "karma": "~6.1.0",
41 |     "karma-chrome-launcher": "~3.1.0",
42 |     "karma-coverage": "~2.0.3",
43 |     "karma-jasmine": "~4.0.0",
44 |     "karma-jasmine-html-reporter": "^1.5.0",
45 |     "protractor": "~7.0.0",
46 |     "ts-node": "~8.3.0",
47 |     "tslint": "~6.1.0",
48 |     "typescript": "~4.1.5"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <div class="row">
 2 |   <div class="col col-md-8 offset-md-2">
 3 |     <div class="row">
 4 |       <div class="col pr-0">
 5 |         <input type="search" class="form-control" [(ngModel)]="address" (keydown.enter)="findAddress()" placeholder="Enter an address here" [disabled]="isWorking">
 6 |       </div>
 7 |       <div class="col-auto ml-auto">
 8 |         <button class="btn btn-primary mr-1" (click)="findAddress()" [disabled]="isWorking || !address?.length">
 9 |           <i class="bi bi-map mr-md-1"></i> <span class="d-none d-md-inline-block">Find address</span>
10 |         </button>
11 |         <button class="btn btn-primary" (click)="getCurrentLocation()" [disabled]="isWorking">
12 |           <i class="bi bi-geo mr-md-1"></i> <span class="d-none d-md-inline-block">Find me</span>
13 |         </button>
14 |       </div>
15 |     </div>
16 |     
17 |     <hr>
18 |     
19 |     <div class="row">
20 |       <div class="col-12 col-md-6 pr-md-0">
21 |         <div id="info" class="shadow-sm rounded border p-3 h-100">
22 |           <h5>Formatted Address</h5>
23 |           <p>
24 |             {{ formattedAddress?.length ? formattedAddress : 'N/A' }}
25 |           </p>
26 |           <h5>Coordinates</h5>
27 |           <p class="mb-0">
28 |             Latitude: {{ locationCoords ? locationCoords?.lat() : 'N/A' }}<br>
29 |             Longitude: {{ locationCoords ? locationCoords?.lng() : 'N/A' }}
30 |           </p>
31 |         </div>
32 |       </div>
33 |       <div class="col-12 col-md-6">
34 |         <div class="google_map_container shadow-sm rounded mt-3 mt-md-0">
35 |           <google-map [zoom]="mapZoom" [center]="mapCenter" [options]="mapOptions">
36 |             <map-marker
37 |               #marker="mapMarker"
38 |               [position]="mapCenter"
39 |               [options]="markerOptions"
40 |               (mapClick)="openInfoWindow(marker)"
41 |               (mapDragend)="onMapDragEnd($event)">
42 |             </map-marker>
43 |             <map-info-window>{{ markerInfoContent }}</map-info-window>
44 |           </google-map>
45 |         </div> 
46 |       </div>
47 |     </div>
48 |   </div>
49 | </div>


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | ::ng-deep .google_map_container {
 2 |   width: 100%;
 3 |   display: block;
 4 | 
 5 |   .map-container {
 6 |     width: 100% !important;
 7 |     height: 300px !important;
 8 |     border-radius: 4px !important;
 9 |   }
10 | }


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
  1 | import { HttpErrorResponse } from '@angular/common/http';
  2 | import { Component, ViewChild } from '@angular/core';
  3 | import { GoogleMap, MapInfoWindow, MapMarker } from '@angular/google-maps';
  4 | import { ToastrService } from 'ngx-toastr';
  5 | import { GeocoderResponse } from './models/geocoder-response.model';
  6 | import { GeocodingService } from './services/geocoding.service';
  7 | 
  8 | @Component({
  9 |   selector: 'app-root',
 10 |   templateUrl: './app.component.html',
 11 |   styleUrls: ['./app.component.scss'],
 12 | })
 13 | export class AppComponent {
 14 |   constructor(
 15 |     private geocodingService: GeocodingService,
 16 |     private toastr: ToastrService
 17 |   ) {}
 18 | 
 19 |   @ViewChild(GoogleMap, { static: false }) map: GoogleMap;
 20 |   @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow;
 21 | 
 22 |   mapZoom = 12;
 23 |   mapCenter: google.maps.LatLng;
 24 |   mapOptions: google.maps.MapOptions = {
 25 |     mapTypeId: google.maps.MapTypeId.ROADMAP,
 26 |     zoomControl: true,
 27 |     scrollwheel: false,
 28 |     disableDoubleClickZoom: true,
 29 |     maxZoom: 20,
 30 |     minZoom: 4,
 31 |   };
 32 | 
 33 |   markerInfoContent = '';
 34 |   markerOptions: google.maps.MarkerOptions = {
 35 |     draggable: false,
 36 |     animation: google.maps.Animation.DROP,
 37 |   };
 38 | 
 39 |   geocoderWorking = false;
 40 |   geolocationWorking = false;
 41 | 
 42 |   address: string;
 43 |   formattedAddress?: string | null = null;
 44 |   locationCoords?: google.maps.LatLng | null = null;
 45 | 
 46 |   get isWorking(): boolean {
 47 |     return this.geolocationWorking || this.geocoderWorking;
 48 |   }
 49 | 
 50 |   openInfoWindow(marker: MapMarker) {
 51 |     this.infoWindow.open(marker);
 52 |   }
 53 | 
 54 |   getCurrentLocation() {
 55 |     this.geolocationWorking = true;
 56 |     navigator.geolocation.getCurrentPosition(
 57 |       (position) => {
 58 |         this.geolocationWorking = false;
 59 | 
 60 |         const point: google.maps.LatLngLiteral = {
 61 |           lat: position.coords.latitude,
 62 |           lng: position.coords.longitude,
 63 |         };
 64 | 
 65 |         this.geocoderWorking = true;
 66 |         this.geocodingService
 67 |           .geocodeLatLng(point)
 68 |           .then((response: GeocoderResponse) => {
 69 |             if (response.status === 'OK' && response.results?.length) {
 70 |               const value = response.results[0];
 71 | 
 72 |               this.locationCoords = new google.maps.LatLng(point);
 73 | 
 74 |               this.mapCenter = new google.maps.LatLng(point);
 75 |               this.map.panTo(point);
 76 | 
 77 |               this.address = value.formatted_address;
 78 |               this.formattedAddress = value.formatted_address;
 79 |               this.markerInfoContent = value.formatted_address;
 80 | 
 81 |               this.markerOptions = {
 82 |                 draggable: true,
 83 |                 animation: google.maps.Animation.DROP,
 84 |               };
 85 |             } else {
 86 |               this.toastr.error(response.error_message, response.status);
 87 |             }
 88 |           })
 89 |           .finally(() => {
 90 |             this.geocoderWorking = false;
 91 |           });
 92 |       },
 93 |       (error) => {
 94 |         this.geolocationWorking = false;
 95 | 
 96 |         if (error.PERMISSION_DENIED) {
 97 |           this.toastr.error("Couldn't get your location", 'Permission denied');
 98 |         } else if (error.POSITION_UNAVAILABLE) {
 99 |           this.toastr.error(
100 |             "Couldn't get your location",
101 |             'Position unavailable'
102 |           );
103 |         } else if (error.TIMEOUT) {
104 |           this.toastr.error("Couldn't get your location", 'Timed out');
105 |         } else {
106 |           this.toastr.error(error.message, `Error: ${error.code}`);
107 |         }
108 |       },
109 |       { enableHighAccuracy: true }
110 |     );
111 |   }
112 | 
113 |   findAddress() {
114 |     if (!this.address || this.address.length === 0) {
115 |       return;
116 |     }
117 | 
118 |     this.geocoderWorking = true;
119 |     this.geocodingService
120 |       .getLocation(this.address)
121 |       .subscribe(
122 |         (response: GeocoderResponse) => {
123 |           if (response.status === 'OK' && response.results?.length) {
124 |             const location = response.results[0];
125 |             const loc: any = location.geometry.location;
126 | 
127 |             this.locationCoords = new google.maps.LatLng(loc.lat, loc.lng);
128 | 
129 |             this.mapCenter = location.geometry.location;
130 | 
131 |             setTimeout(() => {
132 |               if (this.map !== undefined) {
133 |                 this.map.panTo(location.geometry.location);
134 |               }
135 |             }, 500);
136 | 
137 |             this.address = location.formatted_address;
138 |             this.formattedAddress = location.formatted_address;
139 |             this.markerInfoContent = location.formatted_address;
140 | 
141 |             this.markerOptions = {
142 |               draggable: true,
143 |               animation: google.maps.Animation.DROP,
144 |             };
145 |           } else {
146 |             this.toastr.error(response.error_message, response.status);
147 |           }
148 |         },
149 |         (err: HttpErrorResponse) => {
150 |           console.error('geocoder error', err);
151 |         }
152 |       )
153 |       .add(() => {
154 |         this.geocoderWorking = false;
155 |       });
156 |   }
157 | 
158 |   onMapDragEnd(event: google.maps.MouseEvent) {
159 |     const point: google.maps.LatLngLiteral = {
160 |       lat: event.latLng.lat(),
161 |       lng: event.latLng.lng(),
162 |     };
163 | 
164 |     this.geocoderWorking = true;
165 |     this.geocodingService
166 |       .geocodeLatLng(point)
167 |       .then((response: GeocoderResponse) => {
168 |         if (response.status === 'OK') {
169 |           if (response.results.length) {
170 |             const value = response.results[0];
171 | 
172 |             this.locationCoords = new google.maps.LatLng(point);
173 | 
174 |             this.mapCenter = new google.maps.LatLng(point);
175 |             this.map.panTo(point);
176 | 
177 |             this.address = value.formatted_address;
178 |             this.formattedAddress = value.formatted_address;
179 | 
180 |             this.markerOptions = {
181 |               draggable: true,
182 |               animation: google.maps.Animation.DROP,
183 |             };
184 | 
185 |             this.markerInfoContent = value.formatted_address;
186 |           }
187 |         }
188 |       })
189 |       .finally(() => {
190 |         this.geocoderWorking = false;
191 |       });
192 |   }
193 | }
194 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 4 | import { FormsModule } from '@angular/forms';
 5 | import { HttpClientModule } from '@angular/common/http';
 6 | import { GoogleMapsModule } from '@angular/google-maps';
 7 | import { ToastrModule } from 'ngx-toastr';
 8 | 
 9 | import { AppComponent } from './app.component';
10 | 
11 | @NgModule({
12 |   declarations: [AppComponent],
13 |   imports: [
14 |     BrowserModule,
15 |     BrowserAnimationsModule,
16 |     FormsModule,
17 |     HttpClientModule,
18 |     GoogleMapsModule,
19 |     ToastrModule.forRoot({
20 |       preventDuplicates: false,
21 |       progressBar: true,
22 |       countDuplicates: true,
23 |       extendedTimeOut: 3000,
24 |       positionClass: 'toast-bottom-right',
25 |     }),
26 |   ],
27 |   providers: [],
28 |   bootstrap: [AppComponent],
29 | })
30 | export class AppModule {}
31 | 


--------------------------------------------------------------------------------
/src/app/models/geocoder-response.model.ts:
--------------------------------------------------------------------------------
 1 | export class GeocoderResponse {
 2 |   status: string;
 3 |   error_message: string;
 4 |   results: google.maps.GeocoderResult[];
 5 | 
 6 |   constructor(status: string, results: google.maps.GeocoderResult[]) {
 7 |     this.status = status;
 8 |     this.results = results;
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/services/geocoding.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { HttpClient } from '@angular/common/http';
 3 | import { environment } from 'src/environments/environment';
 4 | import { GeocoderResponse } from '../models/geocoder-response.model';
 5 | import { Observable } from 'rxjs';
 6 | 
 7 | @Injectable({
 8 |   providedIn: 'root',
 9 | })
10 | export class GeocodingService {
11 |   constructor(private http: HttpClient) {}
12 | 
13 |   geocodeLatLng(location: google.maps.LatLngLiteral): Promise<GeocoderResponse> {
14 |     let geocoder = new google.maps.Geocoder();
15 | 
16 |     return new Promise((resolve, reject) => {
17 |       geocoder.geocode({ 'location': location }, (results, status) => {
18 |         const response = new GeocoderResponse(status, results);
19 |         resolve(response);
20 |       });
21 |     });
22 |   }
23 | 
24 |   getLocation(term: string): Observable<GeocoderResponse> {
25 |     const url = `https://maps.google.com/maps/api/geocode/json?address=${term}&sensor=false&key=${environment.googleApiKey}`;
26 |     return this.http.get<GeocoderResponse>(url);
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/inexuscore/ng-google-geocoding-example/587194fe29f5932464a1b45653a7287afcea5293/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true,
3 |   googleApiKey: 'YOUR_API_KEY',
4 | };
5 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false,
 7 |   googleApiKey: 'YOUR_API_KEY',
 8 | };
 9 | 
10 | /*
11 |  * For easier debugging in development mode, you can import the following file
12 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
13 |  *
14 |  * This import should be commented out in production mode because it will have a negative impact
15 |  * on performance if an error is thrown.
16 |  */
17 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
18 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/inexuscore/ng-google-geocoding-example/587194fe29f5932464a1b45653a7287afcea5293/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <base href="/">
 5 |   <title>Google Geocoding with Angular</title>
 6 |   <meta charset="utf-8">
 7 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <div class="container">
13 |     <main role="main" class="mt-5">
14 |       <app-root>loading...</app-root>
15 |     </main>
16 |   </div>
17 | 
18 |   <noscript>Please enable JavaScript to continue using this application 🧐</noscript>
19 |   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /**
22 |  * IE11 requires the following for NgClass support on SVG elements
23 |  */
24 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
25 | 
26 | /**
27 |  * Web Animations `@angular/platform-browser/animations`
28 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
29 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
30 |  */
31 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
32 | 
33 | /**
34 |  * By default, zone.js will patch all possible macroTask and DomEvents
35 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
36 |  * because those flags need to be set before `zone.js` being loaded, and webpack
37 |  * will put import in the top of bundle, so user need to create a separate file
38 |  * in this directory (for example: zone-flags.ts), and put the following flags
39 |  * into that file, and then add the following code before importing zone.js.
40 |  * import './zone-flags';
41 |  *
42 |  * The flags allowed in zone-flags.ts are listed here.
43 |  *
44 |  * The following flags will work for all browsers.
45 |  *
46 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
47 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
48 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
49 |  *
50 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
51 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
52 |  *
53 |  *  (window as any).__Zone_enable_cross_context_check = true;
54 |  *
55 |  */
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by default for Angular itself.
59 |  */
60 | import 'zone.js/dist/zone';  // Included with Angular CLI.
61 | 
62 | 
63 | /***************************************************************************************************
64 |  * APPLICATION IMPORTS
65 |  */
66 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | @import "~bootstrap/scss/bootstrap";
2 | @import "~bootstrap-icons/font/bootstrap-icons";


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: {
11 |   context(path: string, deep?: boolean, filter?: RegExp): {
12 |     keys(): string[];
13 |     <T>(id: string): T;
14 |   };
15 | };
16 | 
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 |   BrowserDynamicTestingModule,
20 |   platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "noImplicitReturns": true,
10 |     "noFallthroughCasesInSwitch": true,
11 |     "strictPropertyInitialization": false,
12 |     "sourceMap": true,
13 |     "declaration": false,
14 |     "downlevelIteration": true,
15 |     "experimentalDecorators": true,
16 |     "moduleResolution": "node",
17 |     "importHelpers": true,
18 |     "target": "es2015",
19 |     "module": "es2020",
20 |     "lib": [
21 |       "es2018",
22 |       "dom"
23 |     ]
24 |   },
25 |   "angularCompilerOptions": {
26 |     "enableI18nLegacyMessageIdFormat": false,
27 |     "strictInjectionParameters": true,
28 |     "strictInputAccessModifiers": true,
29 |     "strictTemplates": true
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "extends": "tslint:recommended",
  3 |   "rulesDirectory": [
  4 |     "codelyzer"
  5 |   ],
  6 |   "rules": {
  7 |     "align": {
  8 |       "options": [
  9 |         "parameters",
 10 |         "statements"
 11 |       ]
 12 |     },
 13 |     "array-type": false,
 14 |     "arrow-return-shorthand": true,
 15 |     "curly": true,
 16 |     "deprecation": {
 17 |       "severity": "warning"
 18 |     },
 19 |     "eofline": true,
 20 |     "import-blacklist": [
 21 |       true,
 22 |       "rxjs/Rx"
 23 |     ],
 24 |     "import-spacing": true,
 25 |     "indent": {
 26 |       "options": [
 27 |         "spaces"
 28 |       ]
 29 |     },
 30 |     "max-classes-per-file": false,
 31 |     "max-line-length": [
 32 |       true,
 33 |       140
 34 |     ],
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-console": [
 47 |       true,
 48 |       "debug",
 49 |       "info",
 50 |       "time",
 51 |       "timeEnd",
 52 |       "trace"
 53 |     ],
 54 |     "no-empty": false,
 55 |     "no-inferrable-types": [
 56 |       true,
 57 |       "ignore-params"
 58 |     ],
 59 |     "no-non-null-assertion": true,
 60 |     "no-redundant-jsdoc": true,
 61 |     "no-switch-case-fall-through": true,
 62 |     "no-var-requires": false,
 63 |     "object-literal-key-quotes": [
 64 |       true,
 65 |       "as-needed"
 66 |     ],
 67 |     "quotemark": [
 68 |       true,
 69 |       "single"
 70 |     ],
 71 |     "semicolon": {
 72 |       "options": [
 73 |         "always"
 74 |       ]
 75 |     },
 76 |     "space-before-function-paren": {
 77 |       "options": {
 78 |         "anonymous": "never",
 79 |         "asyncArrow": "always",
 80 |         "constructor": "never",
 81 |         "method": "never",
 82 |         "named": "never"
 83 |       }
 84 |     },
 85 |     "typedef": [
 86 |       true,
 87 |       "call-signature"
 88 |     ],
 89 |     "typedef-whitespace": {
 90 |       "options": [
 91 |         {
 92 |           "call-signature": "nospace",
 93 |           "index-signature": "nospace",
 94 |           "parameter": "nospace",
 95 |           "property-declaration": "nospace",
 96 |           "variable-declaration": "nospace"
 97 |         },
 98 |         {
 99 |           "call-signature": "onespace",
100 |           "index-signature": "onespace",
101 |           "parameter": "onespace",
102 |           "property-declaration": "onespace",
103 |           "variable-declaration": "onespace"
104 |         }
105 |       ]
106 |     },
107 |     "variable-name": {
108 |       "options": [
109 |         "ban-keywords",
110 |         "check-format",
111 |         "allow-pascal-case"
112 |       ]
113 |     },
114 |     "whitespace": {
115 |       "options": [
116 |         "check-branch",
117 |         "check-decl",
118 |         "check-operator",
119 |         "check-separator",
120 |         "check-type",
121 |         "check-typecast"
122 |       ]
123 |     },
124 |     "component-class-suffix": true,
125 |     "contextual-lifecycle": true,
126 |     "directive-class-suffix": true,
127 |     "no-conflicting-lifecycle": true,
128 |     "no-host-metadata-property": true,
129 |     "no-input-rename": true,
130 |     "no-inputs-metadata-property": true,
131 |     "no-output-native": true,
132 |     "no-output-on-prefix": true,
133 |     "no-output-rename": true,
134 |     "no-outputs-metadata-property": true,
135 |     "template-banana-in-box": true,
136 |     "template-no-negated-async": true,
137 |     "use-lifecycle-interface": true,
138 |     "use-pipe-transform-interface": true,
139 |     "directive-selector": [
140 |       true,
141 |       "attribute",
142 |       "app",
143 |       "camelCase"
144 |     ],
145 |     "component-selector": [
146 |       true,
147 |       "element",
148 |       "app",
149 |       "kebab-case"
150 |     ]
151 |   }
152 | }
153 | 


--------------------------------------------------------------------------------