CODEWITHSUNDEEP
vue.jsvuejs2vue-componenthere-api
João Fagner
João Fagner

Reputation: 129

How to create a map using Here maps api and Vue.js

I want to load a simple map using Vue.js.

I created a component named map to load the basic map but somethings goes wrong and I tried many things but nothings works with me.

On my index.html I put all the javascript api from Here maps.

I am try to use this sample as a start point.

So,anyone has a Ideia what I am duing wrong? Thanks. https://developer.here.com/documentation/maps/topics/quick-start.html

<template>
<div>
    <div id="mapContainer">
    </div>

</div>
</template>

<script>

export default {    
  name: 'maps',
  data: function() {
      return {
        map: null,
        maptypes: null
      } 
  },
  mounted () { 
    this.initMap ();
   },
  methods: { 
    initMap() {

        // Initialize the platform object:
        var platform = new H.service.Platform({
            app_id: 'nyKybJs4fZYfMCd7jfsx',
            app_code: 'E_xE5837hGk33SL8M6hWIg',
            useCIT: true,
            useHTTPS: true
        });

        this.maptypes = platform.createDefaultLayers();

        // Instantiate (and display) a map object:
        this.map = new H.Map(
        document.getElementById('mapContainer'),
        this.maptypes.normal.map,
        {
        zoom: 10,
        center: { lng: 13.4, lat: 52.51 }
        });

        }
}

}
</script>

Upvotes: 0

Views: 2886

Answers (2)

Piterden
Piterden

Reputation: 789

<template>
  <div>
    <div style="width: 100%; height: 500px" id="map-container"></div>
  </div>
</template>

<script>
export default {    
  name: 'HelloWorld',

  data: () => ({ map: null }),

  mounted () { 
    // Initialize the platform object:
    const platform = new H.service.Platform({
      app_id: 'nyKybJs4fZYfMCd7jfsx',
      app_code: 'E_xE5837hGk33SL8M6hWIg',
      useCIT: true,
      useHTTPS: true,
    });

    const maptypes = platform.createDefaultLayers();

    // Instantiate (and display) a map object:
    this.map = new H.Map(
      this.$el.getElementById('map-container'),
      maptypes.normal.map,
      {
        zoom: 10,
        center: { lng: 13.4, lat: 52.51 },
      },
    );
  },
}
</script>

Upvotes: 1

Max Sinev
Max Sinev

Reputation: 6034

You should provide explicit size of map container. For example:

<template>
    <div>
        <div style="width: 100%; height: 500px" id="mapContainer"></div>
    </div>
</template>

Upvotes: 0

Related Questions