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.

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 "https protocol"
• force the HTTPS while you are creating the instance of H.service.Platform

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

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

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

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

With these steps all js and CSS are loaded correctly. But you could 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
})

UPDATE: with 3.1 I don't have any issues with HTTPS protocol.