CODEWITHSUNDEEP
javascripthere-api
Steve Page
Steve Page

Reputation: 21

Here maps not load in browser

I'm using Here maps Javascript API for the first time. I am working through the HERE user Guide. I have also accessed some online tutorials I have found, which have basically the same code.

(My skill level: I have html, CSS, Python and GIS skills, and have recently done some basic Google maps javascript API).

The first map (using Here User Guide Quick Start chapter) will not load a map. The code is all in the HTML page, as shown in the Guide. (Code is attached below).

* The Here maps page loads presumably - you can see the HERE logo and copyright.
* The example map (Berlin loads).
* The Map only loads if the given settings are retained (zoom=10, LatLong is as given (Berlin)).
* If I move the Lat Long centroid just slightly, only half the map loads. Move to a new location, nothing loads.
* If I try to load a base map, the Berlin eg map also fails to load. (see Code)
* My app_Id and app_Code are included, but the Berlin (eg map) loads without them anyway.
* I signed on for the app_ID yesterday, and my Account page shows my Status as ‘Active’.

I am thinking that: i) my app_ID and app_Code are failing? ii) The Berlin eg map is supplied by Here so as not to require app_ID.

Any help to get me past this first hurdle would be appreciated, thanks. Apologies if I've made a glaringly simple error!

Steve

CODE:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <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>
</head>      

<body>
<font class="tthdg_italic_1">HERE Maps Javascript API</font>
<!-- Map Container -->
<div style="width: 640px; height: 480px" id="mapContainer"></div>

<script>

  // Initialize the platform object - app_ID and app_Code are included - I just removed for this post
  var platform = new H.service.Platform({
    'app_id': '{removed}',
    'app_code': '{removed}'
  });

  // 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.normal.map,
    {
      zoom: 10,
      center: { lat: 52.5, lng: 13.4 }
    });

  // ADDITIONAL Code, also stops map from loading
  // Change the map base layer to the satellite map with traffic information:
  //map.setBaseLayer(defaultLayers.satellite.traffic);     // FAILS !!

</script>

</body>
</html>

Upvotes: 1

Views: 3562

Answers (1)

leopectus
leopectus

Reputation: 862

Your code is correct and should work. This is definitely an issue with your credentials. Please re-check that they are correct and part of an active plan (e.g., that your trial hasn't expired). Also, please remember that the curly brackets are not part of the credentials. If you believe that there is a problem with your account or plan, please contact the HERE account team.

While this is not the cause of your problems, please note that

map.setBaseLayer(defaultLayers.satellite.traffic);

won't work, because you have initialized the default layers under the variable name "maptypes", so this should be changed to:

map.setBaseLayer(maptypes.satellite.traffic);

Upvotes: 1

Related Questions