angulargoogle-mapsagm-directionagm-mapagm-core

How to render info window content dynamically


I'm using the agm-direction package to display route information on the agm-map (https://www.npmjs.com/package/agm-direction).

I would like to know how I can render the content of the infowindow for especially the origin marker:

marker options

the output looks like this:

info window output

I would like to do something like this, so I can build a more complex infowindow:

enter image description here

enter image description here


Solution

  • using agm-info-window you can put your dynamic text into agm-info-window

     <agm-map [latitude]="lat" [longitude]="lng">
    
          <agm-marker [latitude]="lat" [longitude]="lng">
    
            <agm-info-window>
              <h3><strong>Howdy!</strong></h3>
              <p>You are here!</p>
            </agm-info-window>
    
          </agm-marker>
    
        </agm-map>