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();
}
Share:
19,489

Related videos on Youtube

Pizzoni Alessio
Author by

Pizzoni Alessio

Updated on April 21, 2020

Comments

  • Pizzoni Alessio
    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 function onMouseOver 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
    user2256404 almost 6 years
    Hi 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
    John over 5 years
    @Pizzoni Alessio I get the error that infoWindow doesn't have .open() function
  • Pizzoni Alessio
    Pizzoni Alessio over 5 years
    @John In markup you have passing infowindows? (mouseOver)="onMouseOver(infoWindow,gm)"
  • Ryan Langton
    Ryan Langton about 5 years
    I'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
    Alessandro almost 3 years
    infoWindow.lastOpen.close();

Related