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
– Nitin Karande, Commented Nov 17, 2022 at 4:49
are you sure that you asking about Here Map Javascript API? Because the screenshot that you provided of Google Maps. — SAlex
– SAlex, Commented Nov 25, 2022 at 6:48
@SAlex I am asking for Here Map JavaScript API, for the reference i have attached the screenshot of Google Map — Nitin Karande
– Nitin Karande, Commented Dec 6, 2022 at 5:53
maybe you want to achieve this behavior jsfiddle.net/ybj57ovc/1 ? - There you need to tap on the map - then the map will be opened in full screen mode. — SAlex
– SAlex, Commented Dec 12, 2022 at 15:07

turivishal · Accepted Answer · 2022-12-20 09:29:27Z

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/

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related