CODEWITHSUNDEEP
javascripthere-api
Tamiz Ahmed
Tamiz Ahmed

Reputation: 175

HERE API won't load map - H.Map (Argument #0 null)

I'm following the HERE Maps API Quick Start Guide to implement a map on my site. When using the exact code from this guide, I'm getting the following error in my browser (Chrome):

message: "H.Map (Argument #0 null)"stack: "Error↵    at new C (https://js.api.here.com/v3/3.1/mapsjs-core.js:35:1007)↵    at new Q (https://js.api.here.com/v3/3.1/mapsjs-core.js:340:639)↵

HTML (key parts only)

<head>    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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 id="mapContainer"></div>
</body>

JavaScript

var platform = new H.service.Platform({
  'apikey': 'uHrZJBCC_k98EXtICkx_7GH_QyFRSkAC1xoh7Rd02Pk'
});

var defaultLayers = platform.createDefaultLayers();

var map = new H.Map(
  document.getElementById('mapContainer'),
  defaultLayers.vector.normal.map,
  {
    zoom: 10,
    center: { lat: 52.5, lng: 13.4 }
  });

Upvotes: 1

Views: 3940

Answers (1)

Viacheslav Moskalenko
Viacheslav Moskalenko

Reputation: 1067

When using a third-party library that loads some external resources make sure the protocol stays the same to avoid mixed content error and double-check your Content-Security-Policy.

By taking your example in the issue description I was able to prepare a full-functional demo on JsBin.

function loadMap() {
  var platform = new H.service.Platform({
  'apikey': 'uHrZJBCC_k98EXtICkx_7GH_QyFRSkAC1xoh7Rd02Pk'
  });

  var defaultLayers = platform.createDefaultLayers();

  var map = new H.Map(
    document.getElementById('mapContainer'),
    defaultLayers.vector.normal.map,
    {
      zoom: 10,
      center: { lat: 52.5, lng: 13.4 }
    });
}

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM is ready');
  loadMap();
});
#mapContainer {
  width: 640px;
  height: 350px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
  <div id="mapContainer"></div>
</body>
</html>

Upvotes: 2

Related Questions