In my VueJs application, I am utilizing Here Maps (Freemium plan) along with vue-router.
I have created a Vue component to display a map using Routing to generate an SVG path between 2 points by referring to the following resources:
I have included Here Maps library version 3.1 through CDN:
https://js.api.here.com/v3/3.1/mapsjs-service.js
https://js.api.here.com/v3/3.1/mapsjs-data.js
https://js.api.here.com/v3/3.1/mapsjs-ui.js
https://js.api.here.com/v3/3.1/mapsjs-mapevents.js
However, the Vue component sometimes throws an error:
Uncaught (in promise) D {message: "H.map.DataModel#add (Argument #0 [object Object])"- Reloading the page sometimes resolves the issue while other times it does not
- Certain route paths consistently work without any errors
Despite my efforts to troubleshoot, I have been unable to pinpoint the root cause. I suspect it might be related to the interaction between vue-router and loading Here Maps library via CDN.
Is there an npm package available for Here Maps? Have you faced a similar issue before?
Below is the code for my map Vue component:
<template>
<div>
<div ref="map" class="here-map__map" />
</div>
</template>>
<script>
export default {
// Vue component logic
}
</script>
<style lang="scss">
.here-map {
&__map {
height: 400px;
margin: 0 auto;
}
}
</style>
Thank you for your assistance.