google.maps.Map is not a constructor

Question

I am trying to create map markers with html as shown here: (https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-typescript) I am working in angular and seem to have missed the mark somewhere. My issue is that the application is just creating the default markers at the given coordinates but ignoring the html inside the class. Any idea how to get this to work in angular16? I am also running into the issue:

main.ts:6 ERROR TypeError: google.maps.Map is not a constructor
    at google-maps.mjs:252:34
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Zone.run (zone.js:129:43)
    at NgZone.runOutsideAngular (core.mjs:10979:28)
    at GoogleMap.ngOnInit (google-maps.mjs:251:26)
    at callHookInternal (core.mjs:4024:14)
    at callHook (core.mjs:4051:13)
    at callHooks (core.mjs:4006:17)
    at executeInitAndCheckHooks (core.mjs:3956:9)
    at selectIndexInternal (core.mjs:11780:17)

MapComponent.ts

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-property-map',
  templateUrl: 'map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  ngOnInit() {
    this.initMap();
  }
  @ViewChild(MapComponent) infoWindow: MapComponent | undefined;
  property : any;

  
  constructor( ){}
  async initMap() {
    const  Map  = await google.maps.importLibrary("maps");

    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const map = new Map(document.getElementById("map") as HTMLElement, {
    zoom: 11,
    center: { lat:-33.95719133500393,  lng: 25.600222789050612 },
    mapId: "4504f8b37365c3d0",
    });

    for (const property of this.properties) {
      const marker = new google.maps.Marker({
        map,
        position: property.position,
        title: property.description,
      });

      marker.addListener('click', () => {
        this.toggleHighlight(marker, property);
      });
    }
  }

  toggleHighlight(marker: google.maps.Marker, property: any) {
    if (marker.getZIndex() === 1) {
      marker.setZIndex(null);
      // Remove the highlight class or handle it based on your CSS classes
    } else {
      marker.setZIndex(1);
      // Add the highlight class or handle it based on your CSS classes
    }
  }
    
    buildContent(property: any) {
     const content = document.createElement("div");
     content.classList.add(property);
    content.innerHTML = ``
      
    return content;
  }

  
   properties = [{
    address: 'Allister Miller Dr, Walmer, Gqeberha, 6070',
    description: 'Airport Reservoir',
    price: '$ 3,889,000',
    type: 'building',
    size: 300,
    position: {
      lat: -33.9864000933515, 
      lng: 25.61399429260211,
    },

MapComponent.html

<div id="map" style="height: 500px;"></div>

<google-map>
    <div class="icon">
                            <i aria-hidden="true" class="fa fa-icon" [ngClass]="'fa-' + property.type" [title]="property.type"></i>
                            <span class="fa-sr-only">{{ property.type }}</span>
                              </div>
                              <div class="details">
                                  <div class="price">{{ property.price }}</div>
                                  <div class="address">{{ property.address }}</div>
                                  <div class="features">
                                      <div>
                                          <i aria-hidden="true" class="fa fa-bed fa-lg bed" title="bedroom"></i>
                                          <span class="fa-sr-only">bedroom</span>
                                          <span>{{ property.bed }}</span>
                                      </div>
                                      <div>
                                          <i aria-hidden="true" class="fa fa-bath fa-lg bath" title="bathroom"></i>
                                          <span class="fa-sr-only">bathroom</span>
                                          <span>{{ property.bath }}</span>
                                      </div>
                                      <div>
                                          <i aria-hidden="true" class="fa fa-ruler fa-lg size" title="size"></i>
                                          <span class="fa-sr-only">size</span>
                                          <span>{{ property.size }} ft<sup>2</sup></span>
                                      </div>
                                  </div>
                        </div>
</google-map>

Answer 1

Map is a property of MapsLibrary, as documented in MapsLibrary interface

You need to use the Map object from the imported library (code in the documentation uses object destructuring).

Compare your code with the documentation:

Documentation

const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const map = new Map(document.getElementById("map") as HTMLElement, {
    zoom: 11,
    center,
    mapId: "4504f8b37365c3d0",
  });

Your code:

const Map = await google.maps.importLibrary("maps");
const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      zoom: 10,
      center: { lat:-33.95719133500393,  lng: 25.600222789050612 },
      // mapId: '4504f8b37365c3d0',
    });