Hi I am pretty new to angular 2 since the entire syntax is different need your help to sort out the below error. I am trying to implement the autocomplete Google address bar. Hence used @agm/core package for that.
Now on running the project I am facing the error as below :
An unhandled exception occurred while processing the request.
Exception: Call to Node module failed with error: Prerendering failed because of error: F:\Hcue\Zaumm\zaaum\zaaum\zaaum\node_modules\@agm\core\index.js:2
export * from './directives';
^^^^^^
SyntaxError: Unexpected token export
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.module.exports (F:\Hcue\Zaumm\zaaum\zaaum\zaaum\ClientApp\dist\main-server.js:1321:19)
at __webpack_require__ (F:\Hcue\Zaumm\zaaum\zaaum\zaaum\ClientApp\dist\main-server.js:20:30)
Current directory is: F:\Hcue\Zaumm\zaaum\zaaum\zaaum
Using "@agm/core": "1.0.0-beta.0" in my package.json
Please advise what i am doing wrong. Struck with this and cant move further. Thanks in advance.
I have solved the maps issue and got my autocomplete in my web project.
Please inclue "angular2-google-maps": "^0.16.0" in your package.json file or run npm install angular2-google-maps@0.16.0.
Add import { AgmCoreModule, MapsAPILoader} from 'angular2-google-maps/core'; in your app.module.ts file.
Below is the corresponding TS where the autocompelte to be implemented.
import { Component, NgModule, OnInit, NgZone } from '@angular/core';
import { AgmCoreModule, MapsAPILoader } from 'angular2-google-maps/core';
declare var google: any;
@Component({
selector: 'settings',
template: require('./account.component.html'),
providers: [UserService]
})
export class AccountComponent implements OnInit {
markers: marker[] = [];
constructor(
private _loader: MapsAPILoader,
private _zone: NgZone) {
}
ngOnInit() {
this.autocomplete();
}
autocomplete() {
this._loader.load().then(() => {
var autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocompleteInput"), {});
google.maps.event.addListener(autocomplete, 'place_changed', () => {
this._zone.run(() => {
debugger;
var place = autocomplete.getPlace();
this.addressField = place.formatted_address;
this.markers = [];
this.markers.push({
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
label: place.name,
draggable: false,
animation: ''
});
this.lat = place.geometry.location.lat();
this.lng = place.geometry.location.lng();
console.log(place);
});
});
});
}
// google maps zoom level
zoom: number = 11;
// initial center position for the map
lat: number = 13.0405026;
lng: number = 80.2336924;
clickedMarker(label: string, index: number) {
debugger;
console.log(`clicked the marker: ${label || index}`)
}
mapClicked($event: any) {
debugger;
this.markers.push({
'lat': $event.coords.lat,
'lng': $event.coords.lng,
'label': '',
'draggable': false,
'animation': google.maps.Animation.DROP
});
debugger;
}
markerDragEnd(m: marker, $event: MouseEvent) {
debugger;
console.log('dragEnd', m, $event);
}
}
interface marker {
lat: number;
lng: number;
label?: string;
draggable: boolean;
animation: any;
}
Add the following HTML input element for autocomplete as given below.
<input type="text" [(ngModel)]="model.address" id="autocompleteInput" class="validate">
Add the following HTML map element to display the map.
<sebm-google-map [latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
[disableDefaultUI]="false"
[zoomControl]="true" style="height: 300px; width: 600px;">
<sebm-google-map-marker *ngFor="let m of markers; let i = index"
(markerClick)="clickedMarker(m.label, i)"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label"
[markerDraggable]="m.draggable"
(dragEnd)="markerDragEnd(m, $event)">
</sebm-google-map-marker>
</sebm-google-map>
If needed import the same
In this version only you can achieve it without error.