How to keep the same instance of the map that is in the main page and a modal in angular?

Question

I am creating a map (google maps component) but I want to render the same instance in the modal, if I zoom in or out I want to see the same instance with the previous actions applied in the modal, however seems that angular is creating a new instace in the modal (I can create a custom modal, I am using bootstrap modal) and the map is clear to the default state, What is the best approach in order to have a map for the both places?

Also I am using template outlet.

<ng-container
    *ngIf="isMobile; then mobileTemplate; else desktopTemplate"
></ng-container>

<ng-template #desktopTemplate>
   <map></map>
</ng-template>


<!-- Modal -->
<div
   class="modal"
   [class.show]="show"
   id="exampleModal"
   tabindex="-1"
   role="dialog"
   aria-labelledby="exampleModalLabel"
   aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Map</h5>
       <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
       >
          <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
        <ng-container *ngTemplateOutlet="desktopTemplate"></ng-container>
      </div>
      <div class="modal-footer">
       <button
          type="button"
          class="btn btn-secondary"
          data-dismiss="modal"
          (click)="showModal()"
       >
          Close
        </button>
       <button
          type="button"
          class="btn btn-primary"
          (click)="fnAddDeploytment()"
       >
          Save changes
       </button>
     </div>
   </div>
  </div>
</div>   

Live sample in stackblitz ====>