Agm-marker onMouseOver open agm-info-window

Question

I used the Angular Google Maps (AGM) component. I need to open the info window on hover. How can I infowindowinstance infowindowin my function onMouseOverto 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?
    }

Answer 1

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

Answer 2

You can add a mouseOut event and create a function to close 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();
    }

Answer 3

onMouseover() ,

onMouseOver(infoWindow, gm) {

  if (gm.lastOpen && gm.lastOpen.isOpen) {
    gm.lastOpen.close();
  }

  gm.lastOpen = infoWindow;

  infoWindow.open();
}

Answer 4

.

As indicated in the corner template reference document, the link declaration applies to the entire template. Thus, if someone declares #infowindow in a loop, as is done here, they end up with n links to infowindow with the same identifier. n is the number of markers. this may cause the application to crash. Each link needs to be made in order to have different identifiers when passing through the loop.