如何在谷歌地图上添加自定义卡

Question

我在网站上有一张Google地图，我要做的是当我单击要在底部显示卡片的标记时

。

我当前的屏幕是这样：

current Image

我的预期输出：

expected output

这是我的代码：

 <agm-map  [latitude]="lat" [longitude]="lng" [fitBounds]="true"  [streetViewControl]="false">
 <agm-marker *ngFor="let data of map"   [latitude]="data.latitude" [longitude]="data.longitude"
          [agmFitBounds]="true" (markerClick)="markerdata(data)"   [iconUrl]='data.conn_URL'>
  </agm-marker>

我尝试过的事情：

     <div class="row">
<div class="col">
  <agm-map  [latitude]="lat" [longitude]="lng" [fitBounds]="true"  [streetViewControl]="false">
    <agm-marker *ngFor="let data of map_dev"   [latitude]="data.latitude" [longitude]="data.longitude"
             [agmFitBounds]="true" (markerClick)="markerdata(data)"   [iconUrl]='data.conn_URL'>
     </agm-marker>
 </agm-map>
  </div>
 </div>

 <div class="row"  *ngIf="!map_main_class">
     <div class="card card-body shadow"></div>
 </div>