examples/public/layers/feature-click-gmaps.html

<!DOCTYPE html>
<html>

<head>
  <title>Feature click | CARTO</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
  <!-- Include Google Maps -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpVNTQI60ossApFzZ3dwSMZ1LcxOTY-rI&v=3.35"></script>
  <!-- Include CARTO.js -->
  <script src="../../../dist/public/carto.js"></script>
  <link href="../style.css" rel="stylesheet">
</head>

<body>
  <div id="map">
  </div>
  <!-- Description -->
  <aside class="toolbox">
    <div class="box">
      <header>
        <h1>Detect feature click</h1>
        <button class="github-logo js-source-link"></button>
      </header>
      <section>
        <p class="description open-sans">Interact with the features on the click event.</p>
        <div class="separator"></div>
        <section class="usage">
          <header>USAGE</header>
          <p class="open-sans">Click on the markers</p>
        </section>
        <div id="controls">
          <div id="info"></div>
        </div>
      </section>
      <footer class="js-footer"></footer>
    </div>
  </aside>

  <script>
    var map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 30, lng: 0 },
      zoom: 3,
      fullscreenControl: false,
      gestureHandling: 'cooperative'
    });

    // Hide the map labels and geometry strokes
    map.set('styles', [{
      elementType: 'labels',
      stylers: [{ visibility: 'off' }]
    }, {
      elementType: 'geometry.stroke',
      stylers: [{ visibility: 'off' }]
    }]);

    const client = new carto.Client({
      apiKey: 'default_public',
      username: 'cartojs-test'
    });

    const source = new carto.source.Dataset('ne_10m_populated_places_simple');
    const style = new carto.style.CartoCSS(`
      #layer {
        marker-width: 7;
        marker-fill: #EE4D5A;
        marker-line-color: #FFFFFF;
      }
    `);
    const layer = new carto.layer.Layer(source, style, {
      featureClickColumns: ['name', 'pop_max']
    });

    client.addLayer(layer);
    map.overlayMapTypes.push(client.getGoogleMapsMapType(map));

    layer.on('featureClicked', featureEvent => {
      const content = `
        <h3>${featureEvent.data.name.toUpperCase()}</h3>
        <p class="open-sans">${featureEvent.data.pop_max} <small>max inhabitants</small></p>
      `;

      document.getElementById('info').innerHTML = content;
    });
  </script>
</body>

</html>