How to import js libraries from index.template.html



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



  • I’m having the same problem



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


Log in to reply