CODEWITHSUNDEEP
javascriptjqueryhere-api
Masaru Kitajima
Masaru Kitajima

Reputation: 363

Using jQuery, mapjs-core returns ERROR 401

When I looked at the sample code on the web, a script, var map = new H.Map(... I thought it should be after all DOMs are loaded, and modify as follows.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Bible Map</title>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- HERE Developer JS -->
    <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>
  </head>

  <body>
    <div style="width: 640px; height: 480px" id="mapContainer"></div>
    <script>
      $(function() {
        // Initialize the platform object:
        var platform = new H.service.Platform({
          'apikey': ‘MY API-KEY’
        });

        // Obtain the default map types from the platform object
        var maptypes = platform.createDefaultLayers();
        // Instantiate (and display) a map object:
        var map = new H.Map(
          document.getElementById('mapContainer'),
          maptypes.vector.normal.map, {
            zoom: 6,
            center: {
              lng: 33.958627,
              lat: 30.114965
            }
          });
      });
    </script>
  </body>
  <footer>
    <address>Copyright &copy;2020 Masaru Kitajima</address>
  </footer>

</html>

But in the console log, it said that;

GET https://1.base.maps.ls.hereapi.com/maptile/2.1/info?xnlp=CL_JSMv3.1.18.1&apikey=MY-API-KEY&output=json 401 mapsjs-core.js:41

Uncaught Error
    at Up.xp.c (eval at <anonymous> (mapsjs-core.js:71), <anonymous>:3:111)
    at eval (eval at <anonymous> (mapsjs-core.js:71), <anonymous>:3:314)

I have no idea even after I tried searching at here.

Upvotes: 1

Views: 297

Answers (1)

user3505695
user3505695

Reputation:

It looks like you didn't replace the "My API-KEY" with your own key.

var platform = new H.service.Platform({
    'apikey': ‘MY API-KEY’
});

If you haven't had a HERE developer account yet, then you could follow the link below to create one and get your credentials. Freemium could be a good start. https://developer.here.com/documentation/maps/3.1.18.1/dev_guide/topics/credentials.html

Upvotes: 1

Related Questions