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

Question

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>

They don't have npm package. Do you sure you want to use this? — Piterden
– Piterden, Commented Jun 3, 2018 at 0:07

Piterden · Accepted Answer · 2018-08-07 20:30:39Z

1

<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>

edited Aug 7, 2018 at 20:30

answered Jun 3, 2018 at 0:12

Piterden

7995 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

João Fagner Over a year ago

Thanks. Lol works. I just change this.$el to this.$el.querySelector('#mapContainer') to select my map.

Piterden Over a year ago

this.$el.getElementById('mapContainer') is the fastest way

Max Sinev · Accepted Answer · 2018-06-03 00:01:02Z

0

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

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

answered Jun 3, 2018 at 0:01

Max Sinev

6,0192 gold badges30 silver badges37 bronze badges

2 Comments

Piterden Over a year ago

It is for Yandex and Google maps

Max Sinev Over a year ago

HERE maps rendered with 100% for both height and width internally. So they should be provided in parent node in your app. Here is jsfiddle

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related