This is for a Vue3 app.
I am importing the web-sdk-maps package via npm and using webpack to import the script and css into the page as follows:
import tt from ‘@tomtom-international/web-sdk-maps’
@import ‘@tomtom-international/web-sdk-maps/dist/maps.css’;
I have verified that both the script and css files exist when the page renders. I have a div defined in the template as follows:
The script section contains the following:
import { onMounted, ref } from ‘vue’
export default {
name: ‘Map’,
setup() {
const mapRef = ref(null)
onMounted(() => {
const tt = window.services
var map = tt.map({
key: '<my key>',
container: mapRef.value,
style: 'tomtom://vector/1/basic-main'
})
map.addControl(new tt.FullscreenControl())
map.addControl(new tt.NavigationControl())
})
return {
mapRef
}
}
When the page renders I get the following in the console:
TypeError: undefined is not an object (evaluating ‘tt.map’)
I really want to move away from using Google Maps, but I can’t seem to get past this error. I’ve tried importing default as tt and {tt} and even importing {map, LngLat} but they all end up with this same error. Any help is much appreciated.