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.
An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map.
You can modify the whole InfoWindow using jquery alone... var popup = new google. maps. InfoWindow({ content:'<p id="hook">Hello World!
Use the InfoBox plugin from the Google Maps Utility Library. It makes styling/managing map pop-ups much easier. Show activity on this post. Map InfoWindow supports html and css.
To find the same just visit the individual Address of the Google Map module and go the Info Text tab. At the bottom, you can find the option you were looking to Disable the Info Window on Load.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With