From b9edeaa0f52434f8b24d6b9778db71f57f1a8075 Mon Sep 17 00:00:00 2001 From: William French Date: Fri, 17 Apr 2026 14:33:07 -0700 Subject: [PATCH] fix: UI and code improvements. --- samples/infowindow-simple/index.ts | 43 +++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 10 deletions(-) diff --git a/samples/infowindow-simple/index.ts b/samples/infowindow-simple/index.ts index d3571595..86355c26 100644 --- a/samples/infowindow-simple/index.ts +++ b/samples/infowindow-simple/index.ts @@ -9,28 +9,43 @@ // When the user clicks the marker, an info window opens. async function initMap(): Promise { + // Import the needed libraries. await google.maps.importLibrary("maps"); await google.maps.importLibrary("marker"); - const uluru = { lat: -25.363, lng: 131.044 }; + // Get the map element and the inner map from it. const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; const innerMap = mapElement.innerMap; + // Get the center of the map. + const center = mapElement.center; + + // Create the info window content. const heading = document.createElement("h1"); heading.textContent = "Uluru (Ayers Rock)"; const content = document.createElement("div"); - const p1 = document.createElement("p"); - p1.textContent = "Uluru, also referred to as Ayers Rock, is a large sandstone rock formation in the southern part of the Northern Territory, central Australia. It lies 335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km (280 mi) by road. Kata Tjuta and Uluru are the two major features of the Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and Yankunytjatjara, the Aboriginal people of the area. It has many springs, waterholes, rock caves and ancient paintings. Uluru is listed as a World Heritage Site."; - content.appendChild(p1); + const infoParagraph = document.createElement("p"); + infoParagraph.textContent = + `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation + in the southern part of the Northern Territory, central Australia. It lies + 335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km + (280 mi) by road. Kata Tjuta and Uluru are the two major features of the + Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and + Yankunytjatjara, the Aboriginal people of the area. It has many springs, + waterholes, rock caves and ancient paintings. Uluru is listed as a World + Heritage Site.`; + + content.appendChild(infoParagraph); - const a = document.createElement("a"); - a.href = "https://en.wikipedia.org/w/index.php?title=Uluru"; - a.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru"; - a.target = "_blank"; - content.appendChild(a); + const link = document.createElement("a"); + link.href = "https://en.wikipedia.org/w/index.php?title=Uluru"; + link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru"; + link.target = "_blank"; + content.appendChild(link); + // Create the info window. const infowindow = new google.maps.InfoWindow({ headerContent: heading, content: content, @@ -38,13 +53,21 @@ async function initMap(): Promise { maxWidth: 500, // Set max width (optional). }); + // Create the marker. const marker = new google.maps.marker.AdvancedMarkerElement({ - position: uluru, + position: center, map: innerMap, title: "Uluru (Ayers Rock)", gmpClickable: true, }); + // Open the info window when the map loads. + infowindow.open({ + anchor: marker, + map: innerMap, + }); + + // Open the info window when the marker is clicked. marker.addEventListener("gmp-click", () => { infowindow.open({ anchor: marker,