-
Notifications
You must be signed in to change notification settings - Fork 822
/
index.js
70 lines (61 loc) · 2.27 KB
/
index.js
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
69
70
"use strict";
/**
* @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");
// 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");
let summary = document.getElementById("summary");
let gallery = document.getElementById("gallery");
let expandedImageDiv = document.getElementById("expanded-image");
let attributionLabel;
// Show the display name and summary for the place.
heading.textContent = place.displayName;
summary.textContent = place.editorialSummary;
// 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]