Search code examples
angularagmmat-form-field

How do I assign value.lng to [latitude] and [longitude]?

image

when choosing a city from the list, I want to transfer the longitude and latitude to the map

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Town/Settlement</mat-label>
    <input type="text"
           placeholder="Pick one"
           aria-label="Town/Settlement"
           matInput
           [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let value of mainService.city; index as i"  [value]="value.city_ascii" (click)="toggle(value)">
          {{value.city_ascii}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <agm-map [latitude] [longitude]>
    <agm-marker [latitude] [longitude]></agm-marker>
  </agm-map>
</form>
Solution

  • mat-autocomplete has several outputs in its API - https://material.angular.io/components/autocomplete/api. so you need to remove a click event from mat-option and do smth like

    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="toggle(value)">

    if i understood correctly what logic stays behind in the component class

    side note: starting from angular 9 there's an original angular's component (https://www.npmjs.com/package/@angular/google-maps). it's much more lightweight than agm. here you can find some examples of using it - https://timdeschryver.dev/blog/google-maps-as-an-angular-component