CODEWITHSUNDEEP
javascriptdom-eventshere-api
João Fagner
João Fagner

Reputation: 129

How to call a external click event inside InfoBubble - here API Javascript 3

I created a InfoBubble and I want to call a jJvascript event to do some thing like interact with another markers but inside the infoBubble I don't know how to create a function that will be calling the event outside.

I tried calling inside the infoBubble the function myAlert() on button, but don't not work.

function myAlert() {
         alert('Hellow InfoBubble')
}
    coords.forEach(value => {
            addMarkerToGroup(group, value,
            '<div class="info-box">' +
            '<div class="header-bar">' +
            '<div class="d-flex justify-content-center">' +
            '<div role="group" class="btn-group">' +
                '<div role="group" class="btn-group btn-group-sm"><button type="button" class="btn btn-info">Mais Info.</button><button type="button" class="btn btn btn-warning">Alt. Status</button><button type="button" class="btn btn-success">Assumir Viagem</button></div>' +
            '</div> <!-- /align-items-->' +
            '</div> <!-- /action-bar-->' +
            '<p><b>MOTORISTA:</b> João Fagner</p>' +
            '<p><b>CPF:</b> 999.999-6</p>' +
            '<p><b>VEICULO:</b> Scania P310 bitruk com Carreta</p>' +
            '<p><b>PLACA:</b> XYZ666</p>' +
            '<p><b>OPERADOR:</b> Fabio</p>' +
            '<p><b>STATUS:</b> 1 em rota</p>' +
            '<div class="action-bar">' +
            '<div class="d-flex justify-content-center">' +
            '<div role="group" class="btn-group">' +
                '<div role="group" class="btn-group btn-group-sm"><button type="button" onCLick="myAlert()" class="btn btn-info">Mais Info.</button><button type="button" class="btn btn btn-warning">Alt. Status</button><button type="button" class="btn btn-success">Assumir Viagem</button></div>' +
            '</div> <!-- /align-items-->' +
            '</div> <!-- /action-bar-->' +
            '</div> <!-- /info-box-->'
            
            );
    });

Upvotes: 1

Views: 697

Answers (1)

user3505695
user3505695

Reputation:

You can write your function like any other Javascript code. Below is the snippet.

For adding marker 

  addMarkerToGroup(group, {lat:53.439, lng:-2.221},
    '<div><a href=\'http://www.mcfc.co.uk\' >Manchester City</a>' +
    '**<button onclick="myFunction()">Click me</button>**' +
    '</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>');

myFunction definition

function myFunction() {
  alert('Hello World');
}

Entire Code: 

Opening an Infobubble on a Mouse Click

Open an infobubble when a marker is clicked

This example displays a map with two markers showing the position of Liverpool and Manchester City football clubs. Clicking on a marker opens an infobubble which holds HTML content related to the marker.
Code

Infobubble opens on tap event, event delegation is used to add event listener to the group that holds markers. setData/getData methods on the map objects are used to bind custom data.

    JavaScript
    JS + HTML

<!DOCTYPE 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.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

</head>
<body>
  <div id="map" style="width: 100%; height: 400px; background: grey" />
  <script  type="text/javascript" charset="UTF-8" >

/**
 * Creates a new marker and adds it to a group
 * @param {H.map.Group} group       The group holding the new marker
 * @param {H.geo.Point} coordinate  The location of the marker
 * @param {String} html             Data associated with the marker
 */
function addMarkerToGroup(group, coordinate, html) {
  var marker = new H.map.Marker(coordinate);
  // add custom data to the marker
  marker.setData(html);
  group.addObject(marker);
}

/**
 * Add two markers showing the position of Liverpool and Manchester City football clubs.
 * Clicking on a marker opens an infobubble which holds HTML content related to the marker.
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function addInfoBubble(map) {
  var group = new H.map.Group();

  map.addObject(group);

  // add 'tap' event listener, that opens info bubble, to the group
  var OpenBubble = 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.getPosition(), {
      // read custom data
      content: evt.target.getData()
    });
    //alert(evt.target.getParentGroup().getParentGroup().setCenter(evt.target.getPosition()));
    //alert(map);
    map.setCenter(evt.target.getPosition(), true);
    //map.setCenter(evt.target.getPosition());
    // show info bubble
    ui.addBubble(bubble);
  }

  group.addEventListener('tap', OpenBubble, false);

  addMarkerToGroup(group, {lat:53.439, lng:-2.221},
    '<div><a href=\'http://www.mcfc.co.uk\' >Manchester City</a>' +
    '<button onclick="myFunction()">Click me</button>' +
    '</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>');

  addMarkerToGroup(group, {lat:53.430, lng:-2.961},
    '<div ><a href=\'http://www.liverpoolfc.tv\' >Liverpool</a>' +
    '</div><div >Anfield<br>Capacity: 45,362</div>');

}
function myFunction() {
  alert('Hello World');
}



/**
 * Boilerplate map initialization code starts below:
 */

// initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'YOUR-APP-ID',
  app_code: 'YOUR-APP-CODE',
  useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
  tileSize: pixelRatio === 1 ? 256 : 512,
  ppi: pixelRatio === 1 ? undefined : 320
});

// initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
  defaultLayers.normal.map,{
  center: {lat: 53.430, lng: -2.961},
  zoom: 7,
  pixelRatio: pixelRatio
});

// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// create default UI with layers provided by the platform
var ui = H.ui.UI.createDefault(map, defaultLayers);

// Now use the map as required...
addInfoBubble(map);
  </script>
</body>
</html>

Upvotes: 1

Related Questions