place-photos

Sample code supporting Google Maps Platform JavaScript API documentation. author(s): Geo Developer IX Documentation Team

HTML

<!doctype html>
<!--
 @license
 Copyright 2026 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->

<html lang="en">
  <head>
    <title>Place Photos</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
      rel="stylesheet" />
    <script>
      // prettier-ignore
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
            });
    </script>
  </head>
  <body>
    <div id="container">
      <div class="place-overview">
        <div id="info">
          <h1 id="heading"></h1>
          <div id="summary"></div>
        </div>
        <button id="randomize-btn">Random City Photo</button>
      </div>
      <div id="expanded-image"></div>
    </div>
  </body>
</html>

CSS

/**
 * @license
 * Copyright 2026 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #1e1e2f, #252540);
  display: flex;
  align-items: center;
  justify-content: center;
}

#container {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  max-width: 900px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  color: white;
}

.place-overview {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 40px;
}

#info {
  position: relative;
}

#heading {
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 15px;
  background: linear-gradient(90deg, #fff, #a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#summary {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #cbd5e1;
}

#expanded-image {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  transform: perspective(1000px) rotateY(-5deg);
  transition: transform 0.5s ease;
}

#expanded-image:hover {
  transform: perspective(1000px) rotateY(0deg) scale(1.02);
}

#expanded-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#randomize-btn {
  margin-top: 20px;
  padding: 12px 24px;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform 0.2s,
    background 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  font-family: 'Inter', sans-serif;
  align-self:...

JavaScript

'use strict';
/**
 * @license
 * Copyright 2026 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

const CITIES = [
  { name: 'New York', id: 'ChIJOwg_06VPwokRYv534QaPC8g' },
  { name: 'London', id: 'ChIJdd4hrwug2EcRmSrV3Vo6llI' },
  { name: 'Paris', id: 'ChIJD7fiBh9u5kcRYJSMaMOCCwQ' },
  { name: 'Tokyo', id: 'ChIJ51cu8IcbXWARiRtXIothAS4' },
  { name: 'Rome', id: 'ChIJu46S-ZZhLxMROG5lkwZ3D7k' },
];

async function init() {
  const { Place } = await google.maps.importLibrary('places');

  const heading = document.getElementById('heading');
  const summary = document.getElementById('summary');
  const expandedImageDiv = document.getElementById('expanded-image');
  const randomizeBtn = document.getElementById('randomize-btn');

  async function showRandomCityPhoto() {
    randomizeBtn.disabled = true;

    // Pick a random city
    const city = CITIES[Math.floor(Math.random() * CITIES.length)];

    try {
      const place = new Place({ id: city.id });
      await place.fetchFields({
        fields: ['displayName', 'photos', 'editorialSummary'],
      });

      heading.textContent = place.displayName ?? city.name;
      summary.textContent = place.editorialSummary ?? '';
      expandedImageDiv.innerHTML = '';

      if (place.photos && place.photos.length > 0) {
        // Pick one of the first 10 photos
        const maxPhotos = Math.min(10, place.photos.length);
        const randomIndex = Math.floor(Math.random() * maxPhotos);
        const photo = place.photos[randomIndex];

        const img = document.createElement('img');
        img.alt = `Photo of ${place.displayName ?? city.name}`;
        img.src = photo.getURI({ maxHeight: 800 });
        expandedImageDiv.appendChild(img);

        if (photo.authorAttributions.length) {
          expandedImageDiv.appendChild(
            createAttribution(photo.authorAttributions[0])
          );
        }
      } else {
        expandedImageDiv.textContent = 'No photos available for this...