JSFiddle - React, Tailwind, and code Playground

by sainap

HTML

<html>

  <head>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

  </head>

  <body>
    <div style="width: 500px; height: 500px" id="mapContainer"></div>


  </body>

</html>

JavaScript

function addMarkerToGroup(group, coordinate, html) {
  var marker = new H.map.Marker(coordinate);
  // add custom data to the marker
  marker.setData(html);
  group.addObject(marker);
}




function addInfoBubble(map) {
  var group = new H.map.Group();

  map.addObject(group);

  // add 'tap' event listener, that opens info bubble, to the group
  group.addEventListener('tap', function(evt) {
    // event target is the marker itself, group is a parent event target
    // for all objects that it contains
    var bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
      // read custom data
      content: evt.target.getData()
    });
    // show info bubble
    ui.addBubble(bubble);
  }, false);


  addMarkerToGroup(group, {
      lat: 52.498704,
      lng: 13.347368
    },
    '<div><a href="http://www.mcfc.co.uk" target="_blank">Manchester City</a>' +
    '</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>');

  addMarkerToGroup(group, {
      lat: 52.498704,
      lng: 13.447368
    },
    '<div><a href="http://www.liverpoolfc.tv" target="_blank">Liverpool</a>' +
    '</div><div >Anfield<br>Capacity: 45,362</div>');

}

// Initialize the platform object:
var platform = new H.service.Platform({
  'apikey': "0jhvJzLcnnAz9MoO4PdII2wXZpzYb2rbn1F99aq3MOE"
});

// Obtain the default map types from the platform object
var defaultLayers = platform.createDefaultLayers();

// Instantiate (and display) a map object:
var map = new H.Map(document.getElementById('mapContainer'),
  defaultLayers.vector.normal.map, {
    center: {
      lat: 52.498704,
      lng: 13.447368
    },
    zoom: 10,
    pixelRatio: window.devicePixelRatio || 1
  });

var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
addInfoBubble(map)

setTimeout(function() {
  let bubbles = ui.getBubbles()

  // first option
    bubbles.forEach((bubble) => {
          bubble.close()
     });
   
  // second option
/*    ...