title: How to set map to center on a marker? - Angular Google Maps
body: <p>I cannot center my Google map on a marker after I geocode.</p>
  
  <p>I have two markers: The initial marker (the one that is centered on, does not change), the other one changes based on the geocoding, and after geocoding, it will be centered on every time.</p>
  
  <p>My code: <strong>TS</strong></p>
  
  <pre><code>zoom = 10;
  
  addressData: FormGroup;
  submitted = false;
  success = false;
  
  lat: number;
  lng: number;
  
  userLat: number;
  userLng: number;
  
  currentCenter = { lat: null, lng: null };
  
  private geoCoder: google.maps.Geocoder;
  
  @ViewChild('googleMap') googleMap: AgmMap;
  
  constructor(private maps: MapsAPILoader, private bulider: FormBuilder) { }
  
  ngOnInit() {
      this.addressData = this.bulider.group({
          address: ["", Validators.required],
      });
  
      this.maps.load().then(() =&gt; {
          this.geoCoder = new google.maps.Geocoder();
      });
  }
  
  getAddress() {
  
      this.submitted = true;
  
      if (this.addressData.invalid) {
          return;
      }
  
      this.success = true;
  
      this.googleMap.mapReady.subscribe(map =&gt; {
  
          // Need to use two parameters in order to use Geocoder
          this.geoCoder.geocode(this.addressData.controls['address'].value, (results, status) =&gt; {
          if (status === google.maps.GeocoderStatus.OK) {
              this.userLat = results[0].geometry.location.lat();
              this.userLng = results[0].geometry.location.lng();
          } else {
              alert('Geocode was not successful for the following reason: ' + status);
          }
  
      }).then(place =&gt; {
          this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() };
      }).catch(err =&gt; {
          console.log("Error: " + err);
      });
  
      this.submitted = false;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- Google maps, the starting latitude &amp; longitude --&gt;
  &lt;agm-map [latitude]="currentCenter.lat" [longitude]="currentCenter.lng" [zoom]="zoom" [mapTypeControl]='true'
  #googleMap&gt;
      &lt;!-- Static marker --&gt;
      &lt;agm-marker [latitude]="defaultCenter.lat" [longitude]="defaultCenter.lng"&gt;&lt;/agm-marker&gt;
  
      &lt;!-- User geolocation marker, changes --&gt;
      &lt;agm-marker [latitude]="currentCenter.userLat" [longitude]="currentCenter.userLng"&gt;&lt;/agm-marker&gt;
  &lt;/agm-map&gt;
  </code></pre>
  
  <p><strong>Expected</strong>:</p>
  
  <p>After Geocoding, the map should center on the marker from the given address <em>every</em> time.</p>
  
  <p><strong>Actual</strong>:</p>
  
  <p>The Geocoder finds the address but does not center the map on the placed marker based on the address.</p>
  
  <p><strong>Update</strong></p>
  
  <p>I cannot use Vadim's code because the compiler tells me that I need two arguments for the <code>Geocode</code>, but Vadim's code only has one. I cannot use this code. Also, if I add the second argument, it will then say that <code>then</code> does not exist.</p>
  
  <pre><code>this.googleMap.mapReady.subscribe(map =&gt; {
      // This line needs two parameters not one      
  
      this.geoCoder.geocode(this.addressData.controls['address'].value)
      .then(place =&gt; {
          this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() };
      }).catch(err =&gt; {
          console.log("Error: " + err);
      });
  });
  </code></pre>