feat(map) Autocomplete

I have gathered all the suggestions, tips, and my work together to provide an Autocomplete Solution:

boot:

bootstrap(AppComponent, [
    GOOGLE_MAPS_PROVIDERS,
    provideLazyMapsAPILoaderConfig({
        apiKey: 'yourGoogleKey',
        libraries: ['places'] }),
    ROUTER_PROVIDERS
]);

map html:

  <google-search-bar></google-search-bar>
  <sebm-google-map
    [latitude]="lat"
    [longitude]="lng"
    [zoom]="zoom"
    [disableDefaultUI]="false"
    [streetViewControl] = "false"
    [zoomControl]="true"
    (mapClick)="mapClicked($event)">

      <sebm-google-map-marker *ngFor="let m of markers; let i = index"
        (markerClick)="clickedMarker(i, $event)"
        [latitude]="m.lat"
        [longitude]="m.lng"
        [markerDraggable]="m.draggable"
        [iconUrl]="m.iconUrl"
        (dragEnd)="markerDragEnd($event)">

        <sebm-google-map-info-window
          [isOpen]="m.isOpen">
          <infowindow
            [allEventMarkers]="markers"
            [currentIndex]="i">
          </infowindow>
        </sebm-google-map-info-window>
      </sebm-google-map-marker>
    </sebm-google-map>

search bar:

Then Create an Angular ‘your-search-bar’ component with the following template:

<input type="text" id="your-search-bar" (click)="clearSearch()" class="form-control">

‘YourMapApp’: add the following:

    constructor(private apiLoader: MapsAPILoader, private zone: NgZone) {
    }

    ngOnInit() {
        this.apiLoader.load().then(() => {
            let autocomplete = new google.maps.places.Autocomplete(document.getElementById('your-search-bar'), {});
            google.maps.event.addListener(autocomplete, 'place_changed', () => {
                this.zone.run(() => {
                    let place = autocomplete.getPlace();
                    if (place.geometry.location) {
                        this.lat = place.geometry.location.lat();
                        this.lng = place.geometry.location.lng();
                    }
                });
            });
        });
    }


Working awesome. Feedback please :)

[JulioWar]

Maybe this will be helpful for someone:

Directive

@Directive({
  selector: '[mapSearch]',
})
export class AppMapSearchDirective {

  @Output() onPlaceChange: EventEmitter<any> = new EventEmitter<any>();

  constructor(private el: ElementRef,
              private ngZone: NgZone,
              private mapsAPILoader: MapsAPILoader) {


    this.mapsAPILoader.load().then(() => {
      const autocomplete = new google.maps.places.Autocomplete(this.el.nativeElement);

      autocomplete.addListener('place_changed', () => {
        this.ngZone.run(() => {
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();
          this.onPlaceChange.emit(place);
        });
      });
    });
  }
}

and then in the html we just need to use it:

<input type="text"
                     mapSearch
                     class="form-control"
                     (onPlaceChange)="placeChanged($event)"
                     id="search_place"/>

It will be awesome if this will add it as a alternative Module that use can import with the library.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.