Infowindow on click¶

Infowindow on click is a component that displays information about a specific location on a map when a marker is clicked.
Example¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Map SDK</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.js'></script>
    <link rel='stylesheet' href='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.css' />    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      const map = new vietmapgl.Map({
        container: "map",
        style:
          "https://maps.vietmap.vn/mt/tm/style.json?apikey=YOUR_API_KEY_HERE",
        center: [106.69531282536502, 10.776983649766555],
        zoom: 14,
      });

   const popup = new vietmapgl.Popup()
      .setHTML('<strong>Dinh Độc Lập </strong><p>Di tích lịch sử về chiến tranh Việt Nam cho phép tham quan văn phòng chính phủ, phòng chỉ huy và hiện vật.Di tích lịch sử về chiến tranh Việt Nam cho phép tham quan văn phòng chính phủ, phòng chỉ huy và hiện vật.</p>')


    new vietmapgl.Marker({})
      .setLngLat([106.69531282536502, 10.776983649766555])
      .setPopup(popup)
      .addTo(map);
    </script>

  </body>
</html>