How to call HERE Maps API v3 using HTTPS

Question

How can I call HERE maps through HTTPS ?

I'm using HTTPS on my server so when I call this:

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

The browser blocks the request because of "Mixed Content" and therefore no map is shown...

I tried to change "http" to "https" on the script source but I get the same issue cause both javascripts have "http" calls inside their codes.

By the way the backend is written in Grails and the channel is secured using Spring Security Core plugin.

Your help is really appreciated!

Thanks and regards!

Answer 1

You need to load the API from https and additionally you need to set:

// Create a platform object to communicate with the HERE REST APIs
var platform = new H.service.Platform({
    useCIT: true,
    app_id: app_id,
    app_code: app_code,
    useHTTPS: true
});

The Trick is useHTTPS: true, as in described in the Documentation at: HERE Developers Guide

Answer 2

For the HTTPS:

• load the js and css files via "relative protocol"
• force the HTTPS while you are creating the instance of H.service.Platform

For the "relative protocol", load the CSS in head section:

<link rel="stylesheet" type="text/css" href="//js.api.here.com/v3/3.0/mapsjs-ui.css" />

for the "relative protocol", load the JS before closing the BODY tag:

<script src="//js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="//js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="//js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="//js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

With these steps all js and CSS are loaded correctly. But you will have some problem when the SDK will load Tiles. To allow to the SDK to load correctly all assets needed in HTTPS protocol you need to use 'useHTTPS' options in the Platform constructor:

this.platform = new H.service.Platform({
  'app_id': process.env.VUE_APP_HERE_APP_ID,
  'app_code': process.env.VUE_APP_HERE_APP_CODE,
  'useHTTPS': true
})