Components: feat(map-info-window): Set Content Dynamically

[bmolinh]

Feature Description

For it to be posible to set data to each marker placed on the google-map.

Use Case

Referencing a well described previous issue with a similar use case as mine:

Hello, is it possible to have a custom info window with data for each marker? I am using markers for each position of products and on the window I want to show some of the products data. The API allows to set content on the infoWindow reference by setting content for each marker, so I tried to set the content before I open it but on this component we can only getContent() there is no setContent() function. Thanks!

_Originally posted by @ourabio in https://github.com/angular/components/pull/19378#issuecomment-634063771_

[crisbeto]

You can use Angular data bindings inside the info window and change the content based on it. E.g.

<map-info-window>{{ someDynamicValue }}</map-info-window>

[bmolinh]

Yes, I've managed to make it work like that, but it doesn't work for showing each value inside an array, or at least not the way the README describes, since it anchors a single info window element to each marker. Also tried nesting the info window inside the marker but it still shows just the first value. Maybe I'm missing something here I don't know 😢 but to me it would work if the component gave access to the setContent function mentioned in the docs like @ourabio said

[crisbeto]

Can you post an example of what you're trying to do? It's difficult to tell what might be going wrong based on the description.

[bmolinh]

You're right, sorry about that 😢 here's the template of what I want to do, the rest of the component is the exact same described in the official example, with the ViewChild reference to the MapInfoWindow and everything.

<map-marker
  #marker="mapMarker"
  *ngFor="let markerPosition of markerPositions"
  [position]="markerPosition"
  [options]="markerOptions"
  (mapClick)="openInfoWindow(marker)"
>
  <map-info-window>
    {{ markerPosition.lat }} {{ markerPosition.lng }}
  </map-info-window>
</map-marker>

Each infoWindow opens individually but they all show only the first element of the array.

[crisbeto]

If you're doing exactly the same as the example, it's probably because the reference inside the openInfoWindow is using ViewChild which picks up the first window in the view. Here's how you can do it:

<map-marker #marker="mapMarker"
            *ngFor="let markerPosition of markerPositions"
            [position]="markerPosition"
            [options]="markerOptions"
            (mapClick)="window.open(marker)">
  <map-info-window #window="mapInfoWindow">{{ markerPosition.lat }} {{ markerPosition.lng }}</map-info-window>
</map-marker>

[bmolinh]

Wonderful! That did it, thank you, and sorry for requesting features on something that just needed a bit more thinking 😢

[crisbeto]

No problem, happy to have helped.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}