title: Google Map Angular9 error with opening info window, getAnchor() is not found
body: <p>I'm using this <a href="https://timdeschryver.dev/blog/google-maps-as-an-angular-component" rel="noreferrer">google map angular component</a> tutorial and it's working pretty good! <strong>BUT</strong> opening up an info window throws an exception.</p>
  <p>Here is my code that calls &quot;this.infoWindow.open&quot; method on a &quot;MapInfoWindow&quot; component from the npm package.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    MapInfoWindow,
    MapMarker,
    GoogleMap
  } from '@angular/google-maps';
  
  export class YogabandEventsComponent implements OnInit {
    @ViewChild(MapInfoWindow, {
      static: false
    }) infoWindow: MapInfoWindow;
    @ViewChild(GoogleMap, {
      static: false
    }) googleMap: GoogleMap;
  
  
    openInfo(marker: MapMarker, content) {
      this.infoContent = content;
      this.infoWindow.open(marker);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;google-map [options]="options" [zoom]="zoom" [center]="center" class="h-100" height="100%" width="100%"&gt;
    &lt;map-marker #markerElem *ngFor="let marker of markers" (mapClick)="openInfo(markerElem, marker.info)" [position]="marker.position" [label]="marker.label" [title]="marker.title" [options]="marker.options"&gt;
    &lt;/map-marker&gt;
    &lt;map-info-window&gt;{{ infoContent }}&lt;/map-info-window&gt;
  &lt;/google-map&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When</p>
  <blockquote>
  <p>infoWindow.open(marker)</p>
  </blockquote>
  <p>is called it enters</p>
  <blockquote>
  <p>google-maps.js // line 1122</p>
  </blockquote>
  <p>but receives an error on line 1122, because there is no &quot;getAnchor()&quot; method</p>
  <pre><code>this.infoWindow.open(this._googleMap.googleMap, anchor ? anchor.getAnchor() : undefined);
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   // in google-maps.js 
  open(anchor) {
    this._assertInitialized();
    this._elementRef.nativeElement.style.display = '';
    this.infoWindow.open(this._googleMap.googleMap, anchor ? anchor.getAnchor() : undefined); // line 1122
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I looked through the google docs and I don't see any &quot;getAnchor&quot; method.</p>
  <p>Here is what I see in the debugger when setting a breakpoint in my component.</p>
  <p><a href="https://i.stack.imgur.com/OaDBc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OaDBc.png" alt="enter image description here" /></a></p>
  <p>Here is what it shows in the debug console when I look at 'marker', so it has values and is instantiated!</p>
  <p><a href="https://i.stack.imgur.com/LQu9X.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LQu9X.png" alt="enter image description here" /></a></p>
  <p>I can copy and paste the whole thing but it's long.</p>
  <p>Here is another pic of debug console, inside google-maps.js file, trying to call the getAnchor() with no luck becasue it doesn't exist.</p>
  <p><a href="https://i.stack.imgur.com/dbVQL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dbVQL.png" alt="enter image description here" /></a></p>