Tutorials / Add a Custom Marker to an Interactive Web Map by HERE
Last Updated: July 24, 2020

Introduction

In this tutorial, we are going to create a basic interactive web map using HERE. Then we will add a custom marker to it. One way you can use this map is by integrating it into your site’s contact page.

In the map below you will see an Eiffel Tower. This is our custom map marker.

Map with Custom Marker

Roadmap

In this tutorial, we will complete the following steps:

  • Getting HERE credentials. You can get your credentials here.
  • Create a basic interactive map
  • Adding a custom marker

Creating a Basic Map

In this section, we want to render a basic HERE map. Firstly, open up your preferred editor and create an index.html file.

Copy the following code to your newly created index.html and replace the APIKEY with your own. Once you are done, open the file in your web browser to view the map.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- HERE JavaScript Libs & Style Sheets-->
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <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>
    <!-- HERE JavaScript Libs & Style Sheets end-->
    <title>HERE Map with Custom Marker</title>
</head>

<body>
    <!--In the div HERE Map will be rendered-->
    <div style="width: 100vw;height: 100vh;" id="mapContainer"></div>
    <script>
        //Step 1: initialize communication with the platform
        // Replace variable YOUR_API_KEY with your own apikey
        var platform = new H.service.Platform({
            apikey: 'YOUR_API_KEY'
        });
        var defaultLayers = platform.createDefaultLayers();
        //Step 2: initialize a map - this map is centered over Europe
        var map = new H.Map(document.getElementById('mapContainer'),
            defaultLayers.vector.normal.map,
            {
                center: { lat: 50, lng: 5 },
                zoom: 4,
                pixelRatio: window.devicePixelRatio || 1
            }
        );
        // This adds a resize listener to make sure that the map occupies the whole container
        window.addEventListener('resize', () => map.getViewPort().resize());
        //Step 3: make the map interactive
        // MapEvents enables the event system
        // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

        // Create the default UI components
        var ui = H.ui.UI.createDefault(map, defaultLayers);

    </script>
</body>

</html>

Like the image below, you should be able to see a basic map centered over Berlin, Germany. Now that we have successfully rendered the basic map, lets get started with adding a custom marker to it.

map

Adding a custom marker

One of the most common use cases for a mapping application is to show points of interest (POIs) on the map. The HERE Maps API for JavaScript makes the implementation quick by allowing you to represent POIs as markers.

The following code snippet shows how to instantiate an icon and a marker from an image URL. For our example we used the following icon from IconFinder.com.

Example to show a marker on the map

var LocationOfMarker = { lat: xxx, lng: yyy };
// Create a marker icon from an image URL:
var icon = new H.map.Icon('path of marker img');

// Create a marker using the previously instantiated icon:
var marker = new H.map.Marker(LocationOfMarker, { icon: icon });

// Add the marker to the map:
map.addObject(marker);

Add the above snippet to the <script> tag in the index.html file like below:

 <script>
        //Step 1: initialize communication with the platform
        // Replace variable YOUR_API_KEY with your own apikey
        var platform = new H.service.Platform({
            apikey: 'YOUR_API_KEY'
        });
        var defaultLayers = platform.createDefaultLayers();
        //Step 2: initialize a map - this map is centered over Europe
        var map = new H.Map(document.getElementById('mapContainer'),
            defaultLayers.vector.normal.map,
            {
                center: { lat: 50, lng: 5 },
                zoom: 4,
                pixelRatio: window.devicePixelRatio || 1
            }
        );
        // add a resize listener to make sure that the map occupies the whole container
        window.addEventListener('resize', () => map.getViewPort().resize());
        //Step 3: make the map interactive
        // MapEvents enables the event system
        // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

        // Create the default UI components
        var ui = H.ui.UI.createDefault(map, defaultLayers);

        // Marker code goes here

        var LocationOfMarker = { lat: XX, lng: XX };

        // Create a marker icon from an image URL:
        var icon = new H.map.Icon('path of marker img');

        // Create a marker using the previously instantiated icon:
        var marker = new H.map.Marker(LocationOfMarker, { icon: icon });

        // Add the marker to the map:
        map.addObject(marker);

    </script>

Finally the code will look as shown below:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- HERE JavaScript Libs & Style Sheets-->
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <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>
    <!-- HERE JavaScript Libs & Style Sheets end-->
    <title>HERE Map with Custom Marker</title>
</head>

<body>
    <!--In the div HERE Map will be rendered-->
    <div id="mapContainer"></div>
    <script>
        //Step 1: initialize communication with the platform
        // Replace variable YOUR_API_KEY with your own apikey
        var platform = new H.service.Platform({
            apikey: 'YOUR_API_KEY'
        });
        var defaultLayers = platform.createDefaultLayers();
        //Step 2: initialize a map - this map is centered over Europe
        var map = new H.Map(document.getElementById('mapContainer'),
            defaultLayers.vector.normal.map,
            {
                center: { lat: 50, lng: 5 },
                zoom: 4,
                pixelRatio: window.devicePixelRatio || 1
            }
        );
        // add a resize listener to make sure that the map occupies the whole container
        window.addEventListener('resize', () => map.getViewPort().resize());
        //Step 3: make the map interactive
        // MapEvents enables the event system
        // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

        // Create the default UI components
        var ui = H.ui.UI.createDefault(map, defaultLayers);

        // Marker code goes here
        var LocationOfMarker = { lat: 19.741755, lng: -155.844437 };

        // optionally - resize a larger PNG image to a specific size
        var pngIcon = new H.map.Icon("https://cdn3.iconfinder.com/data/icons/tourism/eiffel200.png", { size: { w: 56, h: 56 } });

        // Create a marker using the previously instantiated icon:
        var marker = new H.map.Marker(LocationOfMarker, { icon: pngIcon });

        // Add the marker to the map:
        map.addObject(marker);
        
        // Optionally, 
        //Show the marker in the center of the map
        map.setCenter(LocationOfMarker)

        //Zooming so that the marker can be clearly visible
        map.setZoom(8)
    </script>
</body>

</html>
Map with Custom Marker

The map above shows the final result.

Did you know that by dragging on the map and holding the option key (on the Mac, on Windows use the alt key) you can convert the map into a 3D view like below?

Map with Custom Marker

Conclusion

Now you should have a working and interactive map that will display the custom marker. This map can be integrated into your existing website.

Next Steps

Now that you have created a map with a marker, take a look at some of our other tutorials that walk you through more complex topics over at here-tech.skawa.fun/tutorials.

Are you currently a Google Maps user? We have some quick transition guides that will help you in the migration process.

Developer

Products
Community
Company
Privacy Settings Privacy Policy Cookie Policy Service Terms

© 2023 HERE