How to use angular material data grid in infowindow of @angular/google-maps

Question

I am using @angular/google-maps in Angular17. On click of any marker, I want to display the data inside infowindow using angular material data grid (https://material.angular.io/components/grid-list/overview).

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  GoogleMapsModule,
  MapInfoWindow,
  MapMarker,
} from '@angular/google-maps';
import { MapService } from './services/map.service';
import { MatGridListModule } from '@angular/material/grid-list';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    GoogleMapsModule,
    MatToolbarModule,
    FilterComponent,
    MatGridListModule,
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
})
export class AppComponent {
  @ViewChild(MapInfoWindow, { static: false })
  infoWindow!: MapInfoWindow;
  mapsData: any;
  markers: any[] = [];
  infoContent: any;
  constructor(private mapService: MapService) {}

  openInfo(marker: MapMarker) {
    this.infoContent =
      '<mat-grid-list cols="2" rowHeight="2:1"><mat-grid-tile>1</mat-grid-tile><mat-grid-tile>2</mat-grid-tile></mat-grid-list>';
    this.infoWindow.open(marker);
  }

app.component.html

<google-map
  height="500px"
  width="900px"
  [center]="center"
  [zoom]="zoom"
  (mapClick)="moveMap($event)"
  (mapMousemove)="move($event)"
>
  <map-marker
    #markerElem="mapMarker"
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
    (mapClick)="openInfo(markerElem)"
  >
    <map-info-window>
      <div [innerHTML]="infoContent"></div>
    </map-info-window>
  </map-marker>
</google-map>

Above openInfo() doesn't display the given static data in expected data grid format. Can someone help me to understand how I should modify it or confirm whether it is possible to use angular material inside infowindow of google maps.

Answer 1

When you are dealing with angular, innerHTML might not render properly, instead just directly render the output like below!

<google-map
  height="500px"
  width="900px"
  [center]="center"
  [zoom]="zoom"
  (mapClick)="moveMap($event)"
  (mapMousemove)="move($event)"
>
  <map-marker
    #markerElem="mapMarker"
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
    (mapClick)="openInfo(markerElem)"
  >
    <map-info-window>
      <div>
         <mat-grid-list cols="2" rowHeight="2:1">
             <mat-grid-tile>1</mat-grid-tile>
             <mat-grid-tile>2</mat-grid-tile>
         </mat-grid-list>
      </div>
    </map-info-window>
  </map-marker>
</google-map>