title: My Markers won't show on Google Map in Angular
body: <p>I am trying to use the Google Maps component which is now part of material. I was able to get the map showing and trigger the events when clicking etc. but for some reason, I have no luck showing a marker on my map.</p>
  <p>My HTML Code looks like this, I can see there is a value in Markers as I print it on button of the page. So I am not sure what I am missing here or what's wrong.</p>
  <pre><code>&lt;google-map
    height=&quot;500px&quot;
    width=&quot;100%&quot;
    [zoom]=&quot;zoom&quot;
    [center]=&quot;center&quot;
    [options]=&quot;options&quot;
    (mapClick)=&quot;click($event)&quot;
  &gt;
    &lt;map-marker
      *ngFor=&quot;let marker of markers&quot;
      [position]=&quot;marker.position&quot;
      [label]=&quot;marker.label&quot;
      [title]=&quot;marker.title&quot;
      [options]=&quot;marker.options&quot;
    &gt;
    &lt;/map-marker&gt;
  &lt;/google-map&gt;
  
  {{markers | json}}
  </code></pre>
  <p>My TS code looks like this</p>
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { GoogleMap } from '@angular/google-maps';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit {
  
    constructor(){
    }
    @ViewChild(GoogleMap, { static: false }) map: GoogleMap;
  
    title = 'ag-google-map';
    markers = [];
    zoom = 12;
    center: google.maps.LatLngLiteral;
    options: google.maps.MapOptions = {
      mapTypeId: 'hybrid',
      zoomControl: true,
      scrollwheel: false,
      disableDoubleClickZoom: true,
      // maxZoom: 15,
      minZoom: 8,
  
    };
  
    addMarker() {
      this.markers.push({
        position: {
          lat: 35.5362475,
          lng: -117.9267386,
        },
        label: {
          color: 'red',
          text: 'Marker label ' + (this.markers.length + 1),
        },
        title: 'Marker title ' + (this.markers.length + 1),
        options: { animation: google.maps.Animation.BOUNCE },
      });
    }
  
  
    click(event: google.maps.MouseEvent) {
    console.log(event);
    this.logCenter();
  }
  
    ngOnInit() {
    navigator.geolocation.getCurrentPosition((position) =&gt; {
      this.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      };
    });
    this.addMarker();
  
  }
  
    logCenter() {
    console.log(JSON.stringify(this.map.getCenter()));
  }
  </code></pre>