-
Notifications
You must be signed in to change notification settings - Fork 820
/
index.ts
68 lines (58 loc) · 2.53 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/**
* @license
* Copyright 2024 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_place_photos]
async function init() {
const { Place } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;
// Use a place ID to create a new Place instance.
const place = new Place({
id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
});
// Call fetchFields, passing the desired data fields.
await place.fetchFields({ fields: ['displayName', 'photos', 'editorialSummary'] });
// Get the various HTML elements.
let heading = document.getElementById('heading') as HTMLElement;
let summary = document.getElementById('summary') as HTMLElement;
let gallery = document.getElementById('gallery') as HTMLElement;
let expandedImageDiv = document.getElementById('expanded-image') as HTMLElement;
let attributionLabel;
// Show the display name and summary for the place.
heading.textContent = place.displayName as string;
summary.textContent = place.editorialSummary as string;
// Add photos to the gallery.
if (place.photos) {
place.photos?.forEach((photo) => {
const img = document.createElement('img');
const expandedImage = document.createElement('img');
img.src = photo.getURI({maxHeight: 380});
img.addEventListener('click', (event) => {
event.preventDefault();
expandedImage.src = img.src;
expandedImageDiv.innerHTML = '';
expandedImageDiv.appendChild(expandedImage);
attributionLabel = createAttribution(photo.authorAttributions);
expandedImageDiv.appendChild(attributionLabel);
});
gallery.appendChild(img);
});
}
// Display the first photo.
const img = document.createElement('img');
img.src = place.photos![0].getURI();
expandedImageDiv.appendChild(img);
attributionLabel = createAttribution(place.photos![0].authorAttributions);
expandedImageDiv.appendChild(attributionLabel);
// Helper function to create attribution DIV.
function createAttribution(attribution) {
attributionLabel = document.createElement("a");
attributionLabel.classList.add('attribution-label');
attributionLabel.textContent = attribution[0].displayName;
attributionLabel.href = attribution[0].uri;
attributionLabel.target = '_blank;'
return attributionLabel;
}
}
init();
// [END maps_place_photos]