TomTom Maps SDK integration issue: '/contact' page works fine but fails on reload

Question

TomTom Maps SDK Integration Issue

Problem Description

In our Nuxt.js application, we've integrated the TomTom Maps SDK to display a map on the '/contact' page. While the integration works fine initially, reloading the page causes the map to fail to load, leading to unexpected behavior.

[https://i.stack.imgur.com/Py7bT.png]

Context

• Framework: Nuxt.js
• Maps SDK: TomTom Maps SDK (imported using tt package)
• API Key: Valid and correctly configured
• Initialization: Map initialization occurs in the mounted hook of the '/contact' page component.

Code Snippet

<template>
  <link
    rel="stylesheet"
    href="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.25.1/maps/maps.css"
  />
<div class="w-full h-[580px] rounded-2xl" id="map"></div> 
.
</template>

<script setup>
import {
  minValidator,
  requiredValidator,
  emailValidator,
  phoneValidator,
} from "@/helpers/validators";
import { useContactStore } from "~/stores";
import { MAP_API_KEY } from "~/helpers/constants/api";
import tt from "@tomtom-international/web-sdk-maps";

export default {
  name: "ContactForm",
  data() {
    return {
      contactStore: useContactStore(),
      map: null,
      showErrors: false,
      form: {
        name: "",
        lastname: "",
        email: "",
        phone: null,
        message: "",
      },
      addresses: [...],
    };
  },
  mounted() {
    const MapFocus = {
        lat: 43.60722,
        lon: 3.86739,
    };

    const map = tt.map({
        key: MAP_API_KEY ,
        container: this.$refs.map,
        center: MapFocus,
        zoom: 5,
    });

    // Function to create marker with popup and click event
    function createMarker(elementId, position, popupTitle, popupDetails, url) {
        const popupContent = `
            <h1 class="text-blue-600 text-bold" >Asfar Voyages ${popupTitle}</h1>
            <p>${popupDetails}</p>
            <a class="text-blue-600" href="${url}" target="_blank">Open in Google Maps</a>
        `;
        const popup = new tt.Popup({ offset: [0, -25] }).setHTML(popupContent);
        const element = document.createElement("div");
        element.id = elementId;
        const marker = new tt.Marker({ element: element })
            .setLngLat(position)
            .addTo(map)
            .setPopup(popup)
            .getElement()
            .addEventListener("click", () => {
              
                map.flyTo({
                    center: position,
                    zoom: 20,
                    essential: true 
                });
            });
    }

    // Define marker details
    const markerDetails = [...];

    // Create markers
    markerDetails.forEach(detail => {
        createMarker(detail.id, detail.position, detail.title, detail.details, detail.url);
    });

    map.addControl(new tt.FullscreenControl());
    map.addControl(new tt.NavigationControl());
}
,
  methods: {
    minValidator,
    requiredValidator,
    emailValidator,
    phoneValidator,
    isMobileOrTablet() {
      // Implement your mobile or tablet detection logic here
      return false; // For demonstration purposes, assuming not mobile or tablet
    },
  },
};

</script>



Solve Reloading page Please