#BuiltWithHERE
How LINK Transport Powers Just-In-Time Logistics with HERE WeGo Pro
Mohini Todkari — 11 June 2025
SDKs & dev tools
5 min read
14 April 2022
10-minute Web Map Application
In this blog post, we will create a very simple mapping application with the HERE Maps API for JavaScript. Start the timer, you should have a working map app in the next 10 minutes.
Step 1: HERE Platform Registration
If you don’t have a HERE platform account, follow the Registration process to create a new one. For additional information about getting started with HERE platform, check out the blog from my colleague Erwin.
Step 2: Get API Keys
Create and register an app on HERE platform and create API Keys. I have described this in a previous blog.
Step 3: Load the SDK Library and Style Sheet
Next, we move to Visual Studio Code, or your preferred JavaScript Editor. Create a working folder for this app, and create an index.html file within.
In the <head> tag of html, we’ll load the SDK library and Style Sheets for UI components.
<!-- STEP 3: Load the SDK Library and Style Sheet --> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script><script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script><script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script><script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script><link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
Step 4: Create a div for the Map
Now, we’ll add a <div> tag in the body of html code. This is where the map will live. Basic div tag can have just an id as:
<div id="mapContainer"></div>We’ll add a few attributes to map like width, height, alignment, and background.
<div id="mapContainer" style="width: 100vw; height: 50vw; align-self:center;"></div> Step 5: Create an Instance of the H.service.Platform Object
Create a <script> tag in HTML body to start adding the JavaScript code.
H.service.Platform is the central class of the HERE JavaScript API. Among other things it holds the credentials, which we generated in Step 2. Add the apiKey and create an instance of Platform as follows:
<script> // Initialize the platform object var platform = new H.service.Platform({ apikey: 'YOUR_API_KEY_HERE' }); </script>
Step 6: Initialize the Map
To initialize the map, we need to create a set of default layers, like satellite imagery and traffic information. We initialize a map by creating an instance of H.Map with the div element we created in Step 4.
// 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: 12, center: {lat:34.05, lng:-118.24} });
Run your app, and you can see the map. That’s it!
Step 7: Enable Map Interaction
This map is, however, static (you cannot zoom in or pan around). Let’s enable interactions by adding Map Events.
// Enable the event system on the map instance var mapEvents = new H.mapevents.MapEvents(map); // Instantiate the default behavior with mapEvents object var behavior = new H.mapevents.Behavior(mapEvents);
Step 8: Add UI components
Create the default UI controls (scale bar, zoom control and map selector) as:
// Create the default UI var ui = H.ui.UI.createDefault(map, defaultLayers);
Bonus
If you change the browser size, notice the map size does not change automatically. You can add the following line to ensure the map resizes properly:
// Resize map window.addEventListener('resize', () => map.getViewPort().resize());
The complete code
Here’s the full code for a simple web app displaying a full-size map. Copy-paste this code, add your apiKey to the Platform object, and your mapping app is ready!
<!DOCTYPE html><html>
<head> <title>10-Min Map App</title>
<!-- Step 3: Load the SDK Library and Style Sheet --> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script> <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" /></head>
<body><!-- Step 4: Create a div for the Map --><div id="mapContainer" style="width: 100vw; height: 50vw; align-self: center;"></div>
<script> // Step 5: Create an Instance of the H.service.Platform Object // Initialize the platform object var platform = new H.service.Platform({ apikey: 'YOUR_API_KEY_HERE' });
// Step 6: Initialize the Map // Obtain the default map types from the platform object var defaultLayers = platform.createDefaultLayers();
// Instantiate (and display) a map object var map = new H.Map( document.getElementById('mapContainer'), defaultLayers.vector.normal.map, { zoom: 12, center: {lat:34.05, lng:-118.24} }); // Step 7: Enable Map Interaction // Enable the event system on the map instance var mapEvents = new H.mapevents.MapEvents(map); // Instantiate the default behavior with mapEvents object var behavior = new H.mapevents.Behavior(mapEvents);
// Step 8: Add UI components // Create the default UI var ui = H.ui.UI.createDefault(map, defaultLayers);
// Bonus: Resize map window.addEventListener('resize', () => map.getViewPort().resize());
</script> </body></html>
Finally, this is how my map looks.
Create your map centered at your favorite location, and explore more possibilities with the Maps API for JavaScript. Happy Coding!
Mohini Todkari
Sr. Developer Evangelist
Share article
Related articles
Sign up for our newsletter
Why sign up:
Latest offers and discounts
Tailored content delivered weekly
Exclusive events
One click to unsubscribe
