Map Issue: Implementing Highway JS data-router-wrapper & data-router-view

Highway JS: implementing data-router-wrapper & data-router-view not showing map

Hi, I create this topic because map is not displayed on my webpage. I am using Highway JS and I am implementing data-router-wrapper & data-router-view in my template page and I am not able to see map when the page loads. However, map is visible once I refresh the page. But again if I visit other pages and revisit the map-page I cant see the map but reappears when the map-page is refreshed.

My WP Template Code is something like this..
/*///////////////Template Code Start*/

<?php
//Template Name: MyTemplate
get_header();
?>
<main id=”some_id” data-router-wrapper>
<div class=”some-classes” data-router-view=”renderer”>
<section>
<div class=”map-area”>
<?php
echo do_shortcode(‘[display-map id=”316″]’);
?>
</div>
.
. some html php template codes
.
</section>
<section>
.
. some html php template codes
.
</section>
<?php
get_footer();
?>

/*///////////////Template Code END*/

wp_footer(); is called inside footer and code is something like this…
/*///////////////Footer Code Start*/

</div>
</main>
<script>
</script>
<?php
wp_footer();
?>
</body>
</html>
/*///////////////Footer Code END*/

when I inspect the page it shows map-loading class with an empty div

<div class=”map-area”>
<div class=”wp-block-interactive-geo-maps-display-map”>
<div class=”map_wrapper” id=”map_wrapper_316″>
<div class=”map_box” style=”max-width:2000px”>
<div class=”map_aspect_ratio” style=”padding-top:56%”>
<div class=”map_container”>
<div class=”map_render map_loading” id=”map_316″></div>
</div>
</div>
</div>
</div>
</div>
</div>

But, after refreshing the page the map is visible and when I inspect again the map-loading class is gone alongside I can see lots of map codes and SVGs.

I would be grateful to you if the issue is resolved.
Many thanks in advance, please help me with this issue.