How to add custom full screen control behavior with HERE Maps API Javascript

Question

Is there any way to intercept the default behavior of the full screen control using the Here Maps API Javascript?

I want to prevent the custom full screen behavior when you press the control without eliminating the UI. If the user clicks on the control the map will increase in size inside a container instead as shown in below image.

Thanks in advance for your valuable advice.

@here-api Is there this feature available on Here Map Javascript API ? — Nitin Karande, Nov 17 '22 at 04:49
are you sure that you asking about Here Map Javascript API? Because the screenshot that you provided of Google Maps. — SAlex, Nov 25 '22 at 06:48
@SAlex I am asking for Here Map JavaScript API, for the reference i have attached the screenshot of Google Map — Nitin Karande, Dec 06 '22 at 05:53
maybe you want to achieve this behavior https://jsfiddle.net/ybj57ovc/1/ ? - There you need to tap on the map - then the map will be opened in full screen mode. — SAlex, Dec 12 '22 at 15:07

score 1 · Answer 1 · edited Dec 20 '22 at 09:29

I think this question is not related to HERE APIs but to Javascript itself.

I found the solution on https://www.w3schools.com/howto/howto_js_fullscreen.asp & Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture

Simple code for test:

function openFullscreen(elem) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) { /* Safari */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE11 */
      elem.msRequestFullscreen();
    }
  }

 //when you tap on screen then is opened in fullscreen mode
 map.addEventListener('tap', () => {
      openFullscreen(document.documentElement); //open in fullscreen mode whole HTML document
      //or
      //openFullscreen(document.getElementById('mapContainer')); //open in fullscreen mode only map
      
    });

The above example was implemented here: https://jsfiddle.net/ybj57ovc/1/

How to add custom full screen control behavior with HERE Maps API Javascript

1 Answers1