Show pop-up near marker [google maps api]

Question

How can I make this popup display right near marker?

This is what I have

.html

<agm-map [latitude]="lat" [longitude]="long" style="height: 350px;" [fitBounds]="true">
  <agm-marker *ngFor="let data of locations; let i = index" [latitude]="data.lat" [longitude]="data.lng" [agmFitBounds]="true"
    (mouseOver)="clickOnMarker($event)" (mouseOut)="outsideMarker($event)" data-toggle="modal" data-target="#myModal">
  </agm-marker>
</agm-map>
<button id="openModalButton" [hidden]="false" data-toggle="dropdown" data-target="#myModal">Open Modal</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  <li class="details">Item</li>
</ul>

.ts

  clickOnMarker(event) {
    document.getElementById("openModalButton").click();
  }

  outsideMarker(event) {
    document.getElementById("openModalButton").click();
  }
}

But the marker is displayed somewhere in the right corner of the page. How can I solve this problem? Thank you for your time!

Could be you need the position in pixel of the marker for place the modal .. you could take a look at https://stackoverflow.com/questions/2674392/how-to-access-google-maps-api-v3-markers-div-and-its-pixel-position — ScaisEdge, Feb 22 '19 at 17:05

score 2 · Accepted Answer · answered Feb 25 '19 at 08:49

You can try not to do this 'manually'. Use agm-info-windowinstead:

<agm-map [latitude]="lat" [longitude]="long" style="height: 350px;" [fitBounds]="true">
  <agm-marker *ngFor="let data of locations; let i = index" [latitude]="data.lat" [longitude]="data.lng" [agmFitBounds]="true">
    <agm-info-window [disableAutoPan]="true">
         Hello world!
    </agm-info-window>
  </agm-marker>
</agm-map>

Hope it helps!

Show pop-up near marker [google maps api]

1 Answers1