Skip to content

Commit 354db80

Browse files
willum070willum070
authored
feat: Adds a demo for Place v2 Photos. (#1779)
1 parent 3aff9a8 commit 354db80

File tree

4 files changed

+180
-0
lines changed

4 files changed

+180
-0
lines changed

‎samples/place-photos/index.njk

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<!--
3+
@license
4+
Copyright 2019 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
{% extends '../../src/_includes/layout.njk'%} {% block html %}
8+
<div id="container">
9+
<div class="place-overview">
10+
<div id="info">
11+
<div id="heading"></div>
12+
<div id="summary"></div>
13+
</div>
14+
<div id="gallery"></div>
15+
</div>
16+
<div id="expanded-image"></div>
17+
</div>
18+
{% endblock %}

‎samples/place-photos/index.ts

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

‎samples/place-photos/place-photos.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"title": "Place Photos",
3+
"version": "weekly",
4+
"dynamic_import": "true",
5+
"tag": "place_photos",
6+
"name": "place-photos",
7+
"pagination": {
8+
"data": "mode",
9+
"size": 1,
10+
"alias": "mode"
11+
},
12+
"permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
13+
}
14+

‎samples/place-photos/style.scss

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/**
2+
* @license
3+
* Copyright 2019 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
8+
9+
/* [START maps_place_photos] */
10+
@include meta.load-css("../../shared/scss/default.scss");
11+
12+
#container {
13+
display: flex;
14+
padding: 10px;
15+
width: 100%;
16+
height: 100%
17+
}
18+
19+
.place-overview {
20+
width: 400px;
21+
height: 380px;
22+
overflow-x: auto;
23+
position: relative;
24+
margin-right: 20px;
25+
}
26+
27+
#info {
28+
font-family: sans-serif;
29+
position: sticky;
30+
position: -webkit-sticky;
31+
left: 0;
32+
padding-bottom: 10px;
33+
}
34+
35+
#heading {
36+
width: 500px;
37+
font-size: x-large;
38+
margin-bottom: 20px;
39+
}
40+
41+
#summary {
42+
width: 500px;
43+
}
44+
45+
#gallery {
46+
display: flex;
47+
}
48+
49+
#gallery img {
50+
width: 200px;
51+
height: 200px;
52+
margin-right: 10px;
53+
margin-top: 40px;
54+
border-radius: 10px;
55+
cursor: pointer;
56+
}
57+
58+
#expanded-image {
59+
display: flex;
60+
height: 380px;
61+
overflow: hidden;
62+
background-color: #000;
63+
}
64+
65+
#expanded-image img {
66+
width: 100%;
67+
height: auto;
68+
object-fit: contain;
69+
}
70+
71+
.attribution-label {
72+
background-color: #fff;
73+
opacity: 0.7;
74+
font-size: 10px;
75+
font-family: sans-serif;
76+
margin: 2px;
77+
position: absolute;
78+
}
79+
80+
/* [END maps_place_photos] */

0 commit comments

Comments
 (0)