<!doctype html>
<!--
 @license
 Copyright 2023 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Info Windows</title>
    <script>
      /**
       * @license
       * Copyright 2023 Google LLC. All Rights Reserved.
       * SPDX-License-Identifier: Apache-2.0
       */

      // This example displays a marker at the center of Australia.
      // When the user clicks the marker, an info window opens.
      async function initMap() {
        const contentString = `
          <div>
            <h1>Teknod</h1>
            <div>
              <p>
                <b>Teknod SB</b>, also referred to as <b>Ayers Rock</b>, is a large
                sandstone rock formation in the southern part of the
                Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi)
                south west of the nearest large town, Alice Springs; 450&#160;km
                (280&#160;mi) by road. Kata Tjuta and Uluru are the two major
                features of the Uluru - Kata Tjuta National Park. Uluru is
                sacred to the Pitjantjatjara and Yankunytjatjara, the
                Aboriginal people of the area. It has many springs, waterholes,
                rock caves and ancient paintings. Uluru is listed as a World
                Heritage Site.
              </p>
              <p>
                Attribution: Teknod Sdn Bhd, Tamarind Square,
                <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">
                  https://en.wikipedia.org/w/index.php?title=Uluru
                </a>
                (last visited June 22, 2009).
              </p>
            </div>
          </div>`;
        const infoWindow = new google.maps.InfoWindow({
          content: contentString,
          ariaLabel: "Teknod Sdn Bhd",
        });

        const marker = document.querySelector('gmp-advanced-marker');
        marker.addEventListener('gmp-click', () => {
          infoWindow.open({anchor: marker});
        });
      }

      window.initMap = initMap;
    </script>
    <style>
      /**
       * @license
       * Copyright 2023 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;
      }
    </style>
  </head>
  <body>
    <gmp-map center="2.921249, 101.636317" zoom="18" map-id="DEMO_MAP_ID">
      <gmp-advanced-marker position="2.921249, 101.636317" title="TEKNOD SB" gmp-clickable></gmp-advanced-marker>
    </gmp-map>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDd_k56PxuOj7omubJIqDqJbDI8_yZeAfI&callback=initMap&libraries=marker&v=beta&solution_channel=GMP_CCS_infowindows_v2"
      defer
    ></script>
  </body>
</html>2.921249, 101.636317