How to import js libraries from index.template.html

ak22

I’m trying to import the HERE maps javascript libraries into a quasar project. In the <head> of the index.template.html, I have inserted the following:

    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>

As the documentation states for the HERE maps api, this is the code to get a map inserted into a component.

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

export default {
  name: 'PageSearch',
  components: {
  },
  data () {
    return {
      map: {},
      platform: {},
      router: {},
      geocoder: {},
      directions: [],
      ui: {}
    }
  },
  props: {
    appId: String,
    appCode: String,
    lat: String,
    lng: String,
    width: String,
    height: String
  },
  created () {
  },
  mounted () {
    // eslint-disable-next-line no-undef
    this.platform = new H.service.Platform({
      'apikey': 'xxxxxxxxxxxxxxx' //My key
    })
    this.router = this.platform.getRoutingService()
    this.geocoder = this.platform.getGeocodingService()
    var pixelRatio = window.devicePixelRatio || 1
    let defaultLayers = this.platform.createDefaultLayers({
      tileSize: pixelRatio === 1 ? 256 : 512,
      ppi: pixelRatio === 1 ? undefined : 320
    })
    this.map = new H.Map(
      this.$refs.map,
      defaultLayers.normal.map,
      {
        zoom: 10,
        center: { lng: this.lng, lat: this.lat },
        pixelRatio: pixelRatio
      }
    )
    // eslint-disable-next-line no-unused-vars
    let behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map))
    this.ui = H.ui.UI.createDefault(this.map, defaultLayers)
  },
  methods: {}
}
</script>

But the scripts don’t seem to be in scope in this component because it is not finding the “H” object which is obviously defined in one of the scripts. Why are the scripts in index.template.html not visible in the component? Thanks for any help.

Alan Costa

I’m having the same problem

dobbel

@Alan-Costa

because it’s included the ‘old’ way instead with es6 modules. You have to look in the window object where the ‘here’ code is hanging out.

btw It’s located at window.H

No More Posting New Topics!

How to import js libraries from index.template.html