@@ -14,7 +14,7 @@ function addMarkerToGroup(group, coordinate, html) {
1414/**
1515 * Add two markers showing the position of Liverpool and Manchester City football clubs.
1616 * Clicking on a marker opens an infobubble which holds HTML content related to the marker.
17- * @param {H.Map } map A HERE Map instance within the application
17+ * @param {H.Map } map A HERE Map instance within the application
1818 */
1919function addInfoBubble ( map ) {
2020 var group = new H . map . Group ( ) ;
@@ -25,22 +25,21 @@ function addInfoBubble(map) {
2525 group . addEventListener ( 'tap' , function ( evt ) {
2626 // event target is the marker itself, group is a parent event target
2727 // for all objects that it contains
28- var bubble = new H . ui . InfoBubble ( evt . target . getGeometry ( ) , {
28+ var bubble = new H . ui . InfoBubble ( evt . target . getGeometry ( ) , {
2929 // read custom data
3030 content : evt . target . getData ( )
3131 } ) ;
3232 // show info bubble
3333 ui . addBubble ( bubble ) ;
3434 } , false ) ;
3535
36- addMarkerToGroup ( group , { lat :53.439 , lng :- 2.221 } ,
37- '<div><a href="http://www.mcfc.co.uk" target="_blank">Manchester City</a>' +
38- '</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>' ) ;
39-
40- addMarkerToGroup ( group , { lat :53.430 , lng :- 2.961 } ,
41- '<div><a href="http://www.liverpoolfc.tv" target="_blank">Liverpool</a>' +
42- '</div><div >Anfield<br>Capacity: 45,362</div>' ) ;
36+ addMarkerToGroup ( group , { lat : 53.439 , lng : - 2.221 } ,
37+ '<div><a href="https://www.mcfc.co.uk">Manchester City</a></div>' +
38+ '<div>City of Manchester Stadium<br />Capacity: 55,097</div>' ) ;
4339
40+ addMarkerToGroup ( group , { lat : 53.430 , lng : - 2.961 } ,
41+ '<div><a href="https://www.liverpoolfc.tv">Liverpool</a></div>' +
42+ '<div>Anfield<br />Capacity: 54,074</div>' ) ;
4443}
4544
4645/**
@@ -56,11 +55,12 @@ var defaultLayers = platform.createDefaultLayers();
5655
5756// initialize a map - this map is centered over Europe
5857var map = new H . Map ( document . getElementById ( 'map' ) ,
59- defaultLayers . vector . normal . map , {
58+ defaultLayers . vector . normal . map , {
6059 center : { lat : 53.430 , lng : - 2.961 } ,
6160 zoom : 7 ,
6261 pixelRatio : window . devicePixelRatio || 1
6362} ) ;
63+
6464// add a resize listener to make sure that the map occupies the whole container
6565window . addEventListener ( 'resize' , ( ) => map . getViewPort ( ) . resize ( ) ) ;
6666
@@ -72,4 +72,4 @@ var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
7272var ui = H . ui . UI . createDefault ( map , defaultLayers ) ;
7373
7474// Now use the map as required...
75- addInfoBubble ( map ) ;
75+ addInfoBubble ( map ) ;
0 commit comments