google_maps_typescript_loader_with_advanced_marker.ts

1import { Loader } from "@googlemaps/js-api-loader";
2
3// Initialize the map
4let map: google.maps.Map;
5
6const center: google.maps.LatLngLiteral = { lat: -34.397, lng: 150.644 };
7
8const loader = new Loader({
9  apiKey: "YOUR_API_KEY",
10  version: "weekly",
11  libraries: ["marker"]
12});
13
14loader.load().then(async () => {
15  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
16  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
17
18  map = new Map(document.getElementById("map") as HTMLElement, {
19    center: center,
20    zoom: 8,
21    mapId: "DEMO_MAP_ID", // Required for AdvancedMarkerElement
22  });
23
24  const marker = new AdvancedMarkerElement({
25    map: map,
26    position: center,
27    title: "Uluru",
28  });
29}).catch((e) => {
30  console.error("Error loading Google Maps API:", e);
31});