Google Map Angular9 error with opening info window, getAnchor() is not found

Question

I'm using this google map angular component tutorial and it's working pretty good! BUT opening up an info window throws an exception.

Here is my code that calls "this.infoWindow.open" method on a "MapInfoWindow" component from the npm package.

 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); } }

 <google-map [options]="options" [zoom]="zoom" [center]="center" class="h-100" height="100%" width="100%"> <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"> </map-marker> <map-info-window>{{ infoContent }}</map-info-window> </google-map>

When

infoWindow.open(marker)

is called it enters

google-maps.js // line 1122

but receives an error on line 1122, because there is no "getAnchor()" method

this.infoWindow.open(this._googleMap.googleMap, anchor ? anchor.getAnchor() : undefined);

 // 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 }

I looked through the google docs and I don't see any "getAnchor" method.

Here is what I see in the debugger when setting a breakpoint in my component.

Here is what it shows in the debug console when I look at 'marker', so it has values and is instantiated!

I can copy and paste the whole thing but it's long.

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.

Answer 1

Found the answer.

Looked at the repo on Github and at an example. It was different than the tutorial from the link I posted above.

https://github.com/angular/components/tree/master/src/google-maps#readme

Map marker needed to have this prop

 <map-marker #somemarker="mapMarker" // not #markerElem like from the link (mapClick)="openInfoWindow(somemarker, marker.info)"> </map-marker>