0

I have installed Google Map places in my Angular 2 project.

npm install angular2-google-map-auto-complete

enter image description here

Getting error as cannot find the module:

enter image description here

Can anybody help me in specifying the path for the same?

Tried with following combinations:

../../directives/googleplace.directive
../../../directives/googleplace.directive
../../../../directives/googleplace.directive
../../directives/googleplace.directive
../node-modules/angular2-google-map-auto-complete/directives/googleplace.directive
../../angular2-google-map-auto-complete/directives/googleplace.directive

Nothing worked as expected.

Update: I have found the spelling mistake but no luck

enter image description here

Shoaib Chikate
  • 8,665
  • 12
  • 47
  • 70

1 Answers1

2

Try this-

import {GoogleplaceDirective} from '../directives/googleplace.directive';

[Please note- its directives with 's' in the end.]

and in your component, add directives like this-

directives: [GoogleplaceDirective],

See if this helps.

EDIT:

You can use this way-

import {GoogleplaceDirective} from '../node_modules/angular2-google-map-auto-complete/directives/googleplace.directive';

Verified it in VScode-

VScode screenshot

EDIT 2:

Step1: copy googleplace.directive.ts file and keep it in your app folder

Folder strcture

Step2: write appcomponent.ts like this-

import { Component } from '@angular/core';
import {GoogleplaceDirective} from './googleplace.directive';

@Component({
  selector: 'my-app',
  directives: [GoogleplaceDirective],
  template: `<h1>My First Angular 2 App</h1>
  <input type="text" [(ngModel)] = "address"  (setAddress) = "getAddress($event)" googleplace/>
  `

})
export class AppComponent { 
  public address : Object;
       getAddress(place:Object) {       
           this.address = place['formatted_address'];
           var location = place['geometry']['location'];
           var lat =  location.lat();
           var lng = location.lng();
           console.log("Address Object", place);
       }
}

Step3: Add script tag in index.html

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

Output result:

Output Result

Hope this will help.

Sanket
  • 19,295
  • 10
  • 71
  • 82