html - google.maps.Map ไม่ใช่ตัวสร้าง

ฉันกำลังพยายามสร้างเครื่องหมายแผนที่ด้วย HTML ดังที่แสดงที่นี่: (https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-typescript) ฉันกำลังทำงานใน Angular และดูเหมือนจะพลาดบางจุด ปัญหาของฉันคือแอปพลิเคชันสร้างเครื่องหมายเริ่มต้นที่พิกัดที่กำหนด แต่ไม่สนใจ HTML ภายในคลาส มีใครทราบวิธีทำให้สิ่งนี้ทำงานใน Angular16 ไหม? ฉันยังเจอปัญหาดังต่อไปนี้:

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>

คำตอบ #1

Map เป็นคุณสมบัติของ MapsLibrary ตามที่ระบุไว้ในอินเทอร์เฟซ MapsLibrary

คุณต้องใช้วัตถุ Map จากไลบรารีที่นำเข้า (โค้ดในเอกสารอ้างอิงใช้การแยกวัตถุ)

เปรียบเทียบรหัสของคุณกับเอกสาร:

เอกสารประกอบ

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",
  });

รหัสของคุณ:

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',
    });