title: How do I center the agm-map on the marker?
body: <p>I'm trying to center google maps on the marker, what I get is this :<a href="https://i.stack.imgur.com/o5zgb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o5zgb.jpg" alt="Map Not centered on marker"></a></p>
  
  <p><a href="https://i.stack.imgur.com/eptZW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eptZW.jpg" alt="Map centered on marker"></a></p>
  
  <p>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: </p>
  
  <pre><code> &lt;div class="map-wrapper3"&gt;
      &lt;section&gt;
          &lt;agm-map [latitude]="lat" [longitude]="lng" [zoom]="16" [minZoom]="4" [maxZoom]="16"
              [style.height]="mapHeight" [scrollwheel]="false"&gt;
              &lt;agm-marker [latitude]="lat" [longitude]="lng"
                  [iconUrl]="'assets/images/pin.png'" [title]="'You are here'"&gt;
                    &lt;agm-info-window  
                     [isOpen]="true"
                    &gt;
                      &lt;div class="text-center" style="width: 200px"&gt;
                          &lt;div class="restaurant-entry noborder text-center mt15 mb15"&gt;
                          &lt;/div&gt;
                          &lt;h5 class="wrap"&gt;{{merchantDetails.MerchantName}}
                            &lt;span class="red fs13" *ngIf="merchantDetails.Status == 2"&gt; (Currently offline)&lt;/span&gt;
                          &lt;/h5&gt;
                          &lt;p class="wrap mb5"&gt;{{merchantDetails.Address}}, {{merchantDetails.Postcode}}&lt;/p&gt;
                          &lt;p class="wrap mb5 green"&gt;{{merchantDetails.Cusines}}&lt;/p&gt;
                          &lt;p class="wrap mb5"&gt;Contact Number: {{merchantDetails.ContactNumber}}&lt;/p&gt;
                          &lt;div class="mb5"&gt;
                            &lt;a class="btn theme-btn-dash mt15" (click)="goProfile(merchantId)"&gt;View Menu&lt;/a&gt;
                          &lt;/div&gt;                            
                        &lt;/div&gt;
                    &lt;/agm-info-window&gt;
              &lt;/agm-marker&gt;
          &lt;/agm-map&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>lat and lng is initially set to 0.0</p>
  
  <p>//map property</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>I set the lat and lng from a Web Api call. </p>
  
  <pre><code>ini() {
      this.busy = this.httpService.get('Online/GetMerchant?id=' + this.merchantId).subscribe((rs: any) =&gt; {
        if (rs &amp;&amp; rs.Merchant) {
          this.merchantData = rs;
          this.merchantDetails = this.merchantData.Merchant;
          this.lat = this.merchantDetails.Lat;
          this.lng = this.merchantDetails.Lng;
        } else {
          this.showBusy = false;
        }
      });
    }
  </code></pre>
  
  <p>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.. </p>
  
  <p>Thank you in advance. </p>