CODEWITHSUNDEEP
angulargoogle-mapslabel
Nancy
Nancy

Reputation: 1029

How to add label to each marker angular google maps - Angular 2

I am using Angular 2 for my project . I would like to know how to add label to the marker using angular google maps. I am not getting a solution to add a label using Angular 2. Below is my html code . I am retrieving the places using ngFor . I need to tag the name object to the marker . Basically , when i hover on a marker , it should show that name

    <div class="form-group">
        <input placeholder="search for location" autocorrect="off" autocapitalize="off" 
        spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
      </div>
    <agm-map style="height: 600px" [latitude]="latitude" [longitude]="longitude">
        <agm-marker  *ngFor="let m of mapArrayList; let i = index" 
          [latitude]="m.latitude"
          [longitude]="m.longitude"
          label="m"
          (markerClick)="clickedMarker(m.id)"
         >

       </agm-marker>
    </agm-map>


mapArrayList:
0:
    address: XYZ
    name: ABC services Lts


ngOnInit() {
    this.latitude = 1.372611;
    this.longitude = 103.848076;
    this.mapArrayList = this.facilityListArray;
    console.log(this.mapArrayList);
     // set google maps defaults
     this.zoom = 40;

     // create search FormControl
     this.searchControl = new FormControl();

     // set current position
     this.setCurrentPosition();

     // load Places Autocomplete
    this.mapsAPILoader.load().then(() => {
      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        componentRestrictions: {country: ['SG', 'IN']}
      });
      autocomplete.addListener('place_changed', () => {
        this.ngZone.run(() => {
          // get the place result
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();

          // verify result
          if (place.geometry === undefined || place.geometry === null) {
            window.alert('No details available for input: \'' + place.name + '\'');
            return;
          }

          // set latitude, longitude and zoom
          this.latitude = place.geometry.location.lat();
          this.longitude = place.geometry.location.lng();
          this.zoom = 100;
        });
      });
    });
  }

Upvotes: 1

Views: 3600

Answers (1)

vsoni
vsoni

Reputation: 2858

You can provide the label like this ...

<agm-map style="height: 600px" [latitude]="latitude" [longitude]="longitude">
        <agm-marker  *ngFor="let m of mapArrayList; let i = index" 
          [latitude]="m.latitude"
          [longitude]="m.longitude"
          [label]="m.label"
          (markerClick)="clickedMarker(m.id)"
         >

       </agm-marker>
    </agm-map>

Where variable m.label has a string value - usually a single uppercase character. (though you can use any string value)

In place of string value you can also use value of type MarkerLabel for providing more detailed info if you like that. Following is the structure of the MarkerLabel interface.

interface MarkerLabel {
  color: string;
  fontFamily: string;
  fontSize: string;
  fontWeight: string;
  text: string;
}

Upvotes: 3

Related Questions