feat: Adds an infowindow for a richer experience.

Author: willum070

samples/place-class/index.ts

@@ -6,19 +6,19 @@
 
 // [START maps_place_class]
 let map: google.maps.Map;
-let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 };
+let infoWindow;
+const center = { lat: 32.7360353, lng: -117.1509849 }; // San Diego Zoo
 
 async function initMap() {
-    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
 
     map = new Map(document.getElementById('map') as HTMLElement, {
-        center: centerCoordinates,
+        center: center,
         zoom: 14,
-        // [START_EXCLUDE]
-        mapId: '4504f8b37365c3d0',
-        // [END_EXCLUDE]
+        mapId: 'DEMO_MAP_ID',
     });
 
+    infoWindow = new InfoWindow();
     getPlaceDetails();
 }
 
@@ -28,23 +28,31 @@ async function getPlaceDetails() {
     const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
     // Use place ID to create a new Place instance.
     const place = new Place({
-        id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
-        requestedLanguage: 'en', // optional
+        id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
     });
 
     // Call fetchFields, passing the desired data fields.
-    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
-
-    // Log the result
-    console.log(place.displayName);
-    console.log(place.formattedAddress);
+    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location', 'googleMapsLinks'] });
 
     // Add an Advanced Marker
     const marker = new AdvancedMarkerElement({
         map,
         position: place.location,
         title: place.displayName,
     });
+
+    // Assemble the info window content.
+    //@ts-ignore
+    const content = `${place.formattedAddress}<br/>${place.id}<br/><a href="${place.googleMapsLinks.placeURI}">View Details on Google Maps</a>`;
+
+    // Display an info window.
+    infoWindow.setHeaderContent(place.displayName);
+    infoWindow.setContent(content);
+    infoWindow.open({
+        map,
+        anchor: marker,
+        shouldFocus: false,
+    });
 }
 // [END maps_place_class_fetchfields]