How to zoom in and shift map to location with same zoom in HERE map

Question

I am implementing the HERE map for my website and plotting many markers onto them. The first marker is a big one and the rest is small. If the user hovers on the particular location, Big marker will popup. Now if my location is in the same city or country then it is fine but if there are more than 150 locations across the globe, map will stretch out horizontally and show every location. What I need is, if the city and country are there then everything is fine but if global then the map should zoom in to the very first location and shift as user hovers to the next location with the same zoom value.

My code:

function loadHeremap(element){
    var platform = new H.service.Platform({
        'apikey': 'MyAPIKEY',
        useHTTPS: true
    });
    var pixelRatio = window.devicePixelRatio || 1;
    var defaultLayers = platform.createDefaultLayers({
      tileSize: pixelRatio === 1 ? 256 : 512,
      ppi: pixelRatio === 1 ? undefined : 320
    });
    
    var city_latitude = $('#latitude').text();
    var city_longitude = $('#longitude').text();
    
    var map = new H.Map(document.getElementById(element),
      defaultLayers.normal.map,{
      center: {lat: city_latitude, lng: city_longitude},
      zoom: 7,
      pixelRatio:pixelRatio
    });
    
    window.addEventListener('resize', function () { map.getViewPort().resize();});
      
    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    var behavior    = behavior.disable(H.mapevents.Behavior.WHEELZOOM);

    var ui = H.ui.UI.createDefault(map, defaultLayers);
    
    var mapSettings = ui.getControl('mapsettings');
    mapSettings.setVisibility(false);
    var zoom = ui.getControl('zoom');   
    zoom.setAlignment('right-bottom');  
    
    allMarkers = [];    
    var event_latlon_map = $('.coll_event_data').text();        
    event_latlon_map=JSON.parse(event_latlon_map);
    var locations = event_latlon_map;
    
    var group = new H.map.Group();
    var marker, i;
    var icon  = new H.map.Icon('../images/dark_blue_circle.png');
    var BigIcon = new H.map.Icon('../images/dark_blue_large.png');
    for (i = 0; i < locations.length; i++) {
        group.addEventListener('pointerdown', function (evt) {
            var bubble =  new H.ui.InfoBubble(evt.target.getGeometry(), {
                content: evt.target.getData()
            });
            
            var position = evt.target.getGeometry(),
                data = evt.target.getData(),
                bubbleContent = evt.target.getData(),
                bubble = onMarkerClick.bubble;
              
            if (!bubble) {
                bubble = new H.ui.InfoBubble(position, {
                    content: bubbleContent
                });  
                ui.addBubble(bubble);
                onMarkerClick.bubble = bubble;
            } else {
                bubble.setPosition(position);
                bubble.setContent(bubbleContent);
                bubble.open();
            }
            checkInfoBubble(bubble,map);
        }, false);
        group.addEventListener('pointermove', function (evt) {
            var bubble =  new H.ui.InfoBubble(evt.target.getGeometry(), {
            // read custom data
            content: evt.target.getData()
        });
        var bubble_state=bubble.getState();
        var position = evt.target.getGeometry(),
            data = evt.target.getData(),
            bubbleContent = evt.target.getData(),
            bubble = onMarkerClick.bubble;
          
            if (!bubble) {
                bubble = new H.ui.InfoBubble(position, {
                    content: bubbleContent
                });
                ui.addBubble(bubble);
                onMarkerClick.bubble = bubble;
            } else {
                bubble.setPosition(position);
                bubble.setContent(bubbleContent);
                bubble.open();
            }
            checkInfoBubble(bubble,map);
        }, false);
        
        var loc_event_id    = locations[i][3];
        var loc_event_name  = locations[i][0];
        var loc_venue_name  = locations[i][4];
        var loc_event_url         = locations[i][7];
        
        var full_detail = '<div data-id="'+id+'" class="detail"><a href="'+url+'"><div class="marker">'+name+'</div></a><div class="label">Venue: </div><div class="name">'+name1+'</div></div>';

        // Add the first marker
        if(i==0){
            marker = new H.map.Marker({lat:locations[i][1], lng:locations[i][2]},{icon: BigIcon });
        }else{
            marker = new H.map.Marker({lat:locations[i][1], lng:locations[i][2]},{icon: icon });
        }
        marker.setData(full_detail);
        group.addObject(marker);
        allMarkers.push(marker);
        map.addObject(group);     
    }
    map.getViewPort().setPadding(50, 50, 50, 50);
    map.setViewBounds(group.getBounds());
}

Answer 1

First thing first, define the variable map as global and then let this function initialize the map.

1: because of this line map.setViewBounds(group.getBounds()) your map is getting small. You are asking your map to zoom out and focus on every markers on the map. to come over this, as you mentioned, put this under the condition i.e; if the map is global then use the map.setCenter method to center the marker you want by passing the latitude and longitude. And then map.setZoom according to your requirement.

if(map == "global"){
  map.setCenter({lat:latitude,lng:longitude});
  map.setZoom(5);
}else{
  map.getViewPort().setPadding(50, 50, 50, 50);
  map.setViewBounds(group.getBounds())
}

2: To shift the map, again you can user map.setCenter method. When you hover on the element, just pass the lat and lon for the marker and use the method. This will jump the map to the given location.

$(document).on("hover","#element",function(){
   map.setCenter({lat:latitude,lng:longitude});
   map.setZoom(5);
});