title: How To Refresh Google Map In Angular?
body: <p>I need to refresh google map every time I press the &quot;show&quot; button that changes the lat and lng.</p>
  <p>I'm using AGM for the Google Map.</p>
  <p>Here I'm getting the lat and lng I wanna see on the map:</p>
  <pre><code>onShow(_token: string) {
          var find = this.model.find(({ token }) =&gt; token === _token);
  
          this.postsService.setLat(find.lat);
          this.postsService.setLng(find.lng);
  
          console.log(
              this.postsService.getLat() + '    ' + this.postsService.getLng()
          );
      }
  </code></pre>
  <p>On the web page i have some locations. When I press &quot;Show&quot; button I want to see that location I point to on the map.</p>
  <p>That's app.component.ts:</p>
  <pre><code>import { Component } from '@angular/core';
  import { PostsService } from './posts.service';
  
  @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.css'],
  })
  export class AppComponent {
      constructor(public postsService: PostsService) {}
  
      title = 'Location Project';
      lat: number = this.postsService.getLat();
      lng: number = this.postsService.getLng();
      zoom: number = 12;
  }
  </code></pre>
  <p>The problem is that the map is created with lat and lng being undefined (and so the map shows a default point in the ocean). How can i refresh the map every time I change the lat and lng values?</p>
  <p>app.component.html:</p>
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt; &lt;br /&gt;&lt;br /&gt;
  
  &lt;agm-map [latitude]=&quot;lat&quot; [longitude]=&quot;lng&quot; [zoom]=&quot;zoom&quot;&gt;
      &lt;agm-marker [latitude]=&quot;lat&quot; [longitude]=&quot;lng&quot;&gt;&lt;/agm-marker&gt;
  &lt;/agm-map&gt;
  
  &lt;br /&gt;&lt;br /&gt;
  
  &lt;app-post-list&gt;&lt;/app-post-list&gt;
  </code></pre>
  <p>posts.service:</p>
  <pre><code>import { Location } from './post.model';
  import { Injectable } from '@angular/core';
  import { Subject, Observable, Subscription, from } from 'rxjs';
  import { HttpClient } from '@angular/common/http';
  import { map } from 'rxjs/operators';
  
  @Injectable({ providedIn: 'root' })
  export class PostsService {
      model: Location[] = [];
  
      constructor() {}
  
      private lat;
      private lng;
  
      setLat(lat) {
          this.lat = lat;
      }
      setLng(lng) {
          this.lng = lng;
      }
      getLat() {
          return this.lat;
      }
      getLng() {
          return this.lng;
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/mP8hJ.png" rel="nofollow noreferrer">Here's a screenshot of some hardcoded lat and lng values, to show how it should appear.</a></p>