How do I center the agm-map on the marker?

Question

I'm trying to center google maps on the marker, what I get is this :

What I want as an end result is the picture above. For some reason it's not centered at all. Here is my HTML code:

 <div class="map-wrapper3">
    <section>
        <agm-map [latitude]="lat" [longitude]="lng" [zoom]="16" [minZoom]="4" [maxZoom]="16"
            [style.height]="mapHeight" [scrollwheel]="false">
            <agm-marker [latitude]="lat" [longitude]="lng"
                [iconUrl]="'assets/images/pin.png'" [title]="'You are here'">
                  <agm-info-window  
                   [isOpen]="true"
                  >
                    <div class="text-center" style="width: 200px">
                        <div class="restaurant-entry noborder text-center mt15 mb15">
                        </div>
                        <h5 class="wrap">{{merchantDetails.MerchantName}}
                          <span class="red fs13" *ngIf="merchantDetails.Status == 2"> (Currently offline)</span>
                        </h5>
                        <p class="wrap mb5">{{merchantDetails.Address}}, {{merchantDetails.Postcode}}</p>
                        <p class="wrap mb5 green">{{merchantDetails.Cusines}}</p>
                        <p class="wrap mb5">Contact Number: {{merchantDetails.ContactNumber}}</p>
                        <div class="mb5">
                          <a class="btn theme-btn-dash mt15" (click)="goProfile(merchantId)">View Menu</a>
                        </div>                            
                      </div>
                  </agm-info-window>
            </agm-marker>
        </agm-map>
    </section>
</div>

lat and lng is initially set to 0.0

//map property

public map: any;
  public lat: any = 0.0;
  public lng: any = 0.0;
  public pageData: any = [];
  public isIframe = false;
  public isSelfService = false;
  public isMobile = false;
  public mapHeight: any = 500;

I set the lat and lng from a Web Api call.

ini() {
    this.busy = this.httpService.get('Online/GetMerchant?id=' + this.merchantId).subscribe((rs: any) => {
      if (rs && rs.Merchant) {
        this.merchantData = rs;
        this.merchantDetails = this.merchantData.Merchant;
        this.lat = this.merchantDetails.Lat;
        this.lng = this.merchantDetails.Lng;
      } else {
        this.showBusy = false;
      }
    });
  }

I would of thought because I have set the lat and lng to the data I get from the API call, it should automatically set it to be centered? But doesn't seem to be the case..

Thank you in advance.

Answer 1

<agm-map style="width:100%;height:100%" [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
    <agm-marker [latitude]="latitude" [longitude]="longitude" [agmFitBounds]="true"></agm-marker>
</agm-map>

You need to add "agmFitBounds" to true in agm-marker

Answer 2

Try adding usePanning attribute for center map position. Default value of usePanning input is false, And that's the reason map goes left side.

<agm-map [usePanning]='true' [latitude]="lat" [longitude]="lng" [zoom]="16">

Read more details here https://angular-maps.com/api-docs/agm-core/components/agmmap#usePanning

Answer 3

Try adding (mapReady)="mapReady($event)" in your html

<agm-map
[latitude]="currentPosition.lat" 
[longitude]="currentPosition.lng" 
[zoom]="12"
(mapReady)="mapReady($event)"
style="height: 600px;">

and set center of map from there

mapReady(event: any) {
    this.lat = this.merchantDetails.Lat;
    this.lng = this.merchantDetails.Lng;
}