Infowindow¶

Infowindow is a component that displays information about a specific location on a map.
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.67545475079355, 10.758898],
        zoom: 14,
      });

      var popup = new vietmapgl.Popup({ closeOnClick: false })
        .setLngLat([106.67545475079355, 10.758898])
        .setHTML("<h4>VIETMAP JSC - Số 3 đường Trần Nhân Tôn, phường 9, quận 5, Thành Phố Hồ Chí Minh.</h4>")
        .addTo(map);
    </script>

  </body>
</html>