CODEWITHSUNDEEP
javascriptapidictionarymapshere-api
TheHennii
TheHennii

Reputation: 63

HERE Api Map is only displays a small part of the actual map and is not interactive

since I didn't want to give my credit card information to google apis, I'm trying to get along with HERE Api's for a webproject for university.

Poorly, my map is show only to ~15% and I can't scroll to anywehere else. Here is my Code for this:

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


<div id="mapContainer" style="width:100%;height:600px">
</div>

<script>

    var platform = new H.service.Platform({
  'app_id': '{HERE IS MY APP ID}',
  'app_code': '{HERE IS MY APP CODE}'
});

    var maptypes = platform.createDefaultLayers();


    var map = new H.Map(
    document.getElementById('mapContainer'),
    maptypes.normal.map,
    {
      zoom: 10,
      center: { lng: 7.1690625, lat: 49.4677707 }
    });
    </script>

Upvotes: 1

Views: 81

Answers (1)

j12y
j12y

Reputation: 2432

You might want to check out the blog post How to Migrate from Google Maps to HERE Dynamic Maps for a working example. If you want a "slippy map" that allows you to scroll and zoom you need to include a few more script libraries and css:

  • mapsjs-ui.js
  • mapsjs-mapevents.js
  • mapsjs-ui.css

You then need initialization of the H.mapevents.Behavior and H.ui.UI. Check out the blog post for a full source code listing for a basic interactive map.

Upvotes: 1

Related Questions