HERE Maps JavaScript API showing only HERE logo, map is empty

user_13234806 0
Viewed 336

I was trying to implement HERE maps to my website, but I encountered a problem. As I mount the map, only HERE logo on the bottom left is shown, but the area where the map is supposed to be is empty. I get no errors. I'm also using Vue.JS, but I'm mounting the map in mounted() method (see code below).

`

<template>
    <div class="here-map">
        <div ref="map" id="mapContainer" v-bind:style="{ width: width, height: height }"></div>
    </div>
</template>

<script>
    export default {
        name: "HereMap",
        data() {
            return {
                map: {},
                platform: {}
            }
        },
        props: {
            lat: String,
            lng: String,
            width: String,
            height: String
        },
        created() {
            this.platform = new H.service.Platform({
                apikey: "myApiKey"
            });
        },
        mounted() {
            const maptypes = this.platform.createDefaultLayers();
            this.map = new H.Map(
                document.getElementById('mapContainer'),
                maptypes.vector.normal.map,
                {
                    center: {lat:50, lng:5},
                    zoom: 4,
                    pixelRatio: window.devicePixelRatio || 1
                });
        }
    }
</script>

`

And this is how the "map" looks like:
looks like.

here-api
1 Answers

Please specify your JS apikey in src/App.vue file not in src/components/HereMap.vue( like the above code) please make the changes as below and check-

src/components/HereMap.vue 

<script>
export default {
    name: "HereMap",
    data() {
        return{
            map:{},
            platform:{}
        }
     },
    props: { 
        apikey:String,
        lat:String,
        lng:String,
        width:String,
        height:String
    },
  created() {
    this.platform = new H.service.Platform({
        "apikey":this.apikey
        });
    },
   mounted() {
this.map = new H.Map(
    this.$refs.map,
    this.platform.createDefaultLayers().normal.map,
    {
        zoom: 10,
        center: { lng: this.lng, lat: this.lat }
    }
);
  }
}
</script>

src/App.vue

<template>
    <div id="app">
        <HereMap
            apikey="Your JS Api key"
            lat="37.7397"
            lng="-121.4252"
            width="100%"
            height="835px" />
    </div>
</template>

<script>
    import HereMap from "./components/HereMap.vue"

    export default {
        name: 'app',
        components: {
            HereMap
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
</style>

for more detail please check- https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework

user_35056950
Related