agm-marker onMouseOver open agm-info-window
19,489
Solution 1
At the end I found a solution:
<agm-map #gm [fitBounds]="latlngBounds" [zoom]="15">
<agm-marker *ngFor="let m of markers; let i = index"
[latitude]="m.geoCode.latitude"
[longitude]="m.geoCode.longitude"
(mouseOver)="onMouseOver(infoWindow,gm)"
>
<agm-info-window [disableAutoPan]="false" #infoWindow>
<div>
{{m.name}}
{{m.rating}}
</div>
<div>
<a (click)="onClickInfoView({id:m.id})" class="btn btn-attention pull-right">Daje <i class="fa fa-angle-double-right"></i></a>
</div>
</agm-info-window>
</agm-marker>
</agm-map>
onMouseOver(infoWindow, gm) {
if (gm.lastOpen != null) {
gm.lastOpen.close();
}
gm.lastOpen = infoWindow;
infoWindow.open();
}
Solution 2
You can add a mouseOut event and create a function to close the InfoWindow onMouseOut
<agm-map #gm [fitBounds]="latlngBounds" [zoom]="15">
<agm-marker *ngFor="let m of markers; let i = index"
[latitude]="m.geoCode.latitude"
[longitude]="m.geoCode.longitude"
(mouseOver)="onMouseOver(infoWindow, $event)"
(mouseOut)="onMouseOut(infoWindow, $event)"
>
<agm-info-window [disableAutoPan]="false" #infoWindow>
<div>
{{m.name}}
{{m.rating}}
</div>
<div>
<a (click)="onClickInfoView({id:m.id})" class="btn btn-attention pull-right">Daje <i class="fa fa-angle-double-right"></i></a>
</div>
</agm-info-window>
</agm-marker>
</agm-map>
onMouseOver(infoWindow, $event: MouseEvent) {
infoWindow.open();
}
onMouseOut(infoWindow, $event: MouseEvent) {
infoWindow.close();
}
Solution 3
In my case, onMouseover() only worked if I set it to
onMouseOver(infoWindow, gm) {
if (gm.lastOpen && gm.lastOpen.isOpen) {
gm.lastOpen.close();
}
gm.lastOpen = infoWindow;
infoWindow.open();
}
Related videos on Youtube
Author by
Pizzoni Alessio
Updated on April 21, 2020Comments
-
Pizzoni Alessio over 3 years
I using Angular Google Maps(AGM) componet. I need to open info window on marker mouse hover. How can I retreive the
infowindow
instance in my functiononMouseOver
to open it?<agm-map [fitBounds]="latlngBounds" [zoom]="15"> <agm-marker *ngFor="let m of markers; let i = index" [latitude]="m.geoCode.latitude" [longitude]="m.geoCode.longitude" (mouseOver)="onMouseOver(m)" > <agm-info-window [disableAutoPan]="false"> <div> <a (click)="onClickInfoView({id:m.id})" class="btn btn-attention pull-right">test<i class="fa fa-angle-double-right"></i></a> </div> </agm-info-window> </agm-marker> </agm-map> onMouseOver(data) { ???? /* how to open here the info window? }
-
user2256404 almost 6 yearsHi Pizzoni. I want to open the agm-snazzy-info-window on MapLoad at a particular location. ( without a MapCLick) I am using Angular 4. Can you please help.
-
John over 5 years@Pizzoni Alessio I get the error that infoWindow doesn't have .open() function
-
Pizzoni Alessio over 5 years@John In markup you have passing infowindows? (mouseOver)="onMouseOver(infoWindow,gm)"
-
Ryan Langton about 5 yearsI'm getting an error with the solution above whenever the infoPane closed for another reason (user clicked off) so I tried this.. but this doesn't work because gm.lastOpen.isOpen is always false, so now none of the infoPanes close
-
Alessandro almost 3 yearsinfoWindow.lastOpen.close();