Powered by Zoomin Software. For more details please contactZoomin

HERE Maps API for JavaScript examples

Product category
Technology
Doc type
Version
Product lifecycle
This publication

HERE Maps API for JavaScript examples: Marker on the map

Table of Contents

Marker on the map

Display a map highlighting points of interest

This example displays a moveable map of Europe, including markers highlighting the locations of the capitals of France, Italy, Germany, Spain and the United Kingdom.

Choose view
Map view
Satellite
Traffic conditions
Show traffic incidents

Code

Default markers are created by using the H.map.Marker class without specifying an icon and passing in a location only. For more information on markers and ways to customize them, refer to the following documents:

/**
 * Boilerplate map initialization code starts below:
 */

//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: "rVczblKDUJs-XSyUkLooaPkP4wcqHPaOB3oFvO1on3M",
});
var defaultLayers = platform.createDefaultLayers();

//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(
  document.getElementById("map"),
  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);

// Now use the map as required...
window.onload = function () {
  addMarkersToMap(map);
};

/**
 * Adds markers to the map highlighting the locations of the captials of
 * France, Italy, Germany, Spain and the United Kingdom.
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function addMarkersToMap(map) {
  var parisMarker = new H.map.Marker({ lat: 48.8567, lng: 2.3508 });
  map.addObject(parisMarker);

  var romeMarker = new H.map.Marker({ lat: 41.9, lng: 12.5 });
  map.addObject(romeMarker);

  var berlinMarker = new H.map.Marker({ lat: 52.5166, lng: 13.3833 });
  map.addObject(berlinMarker);

  var madridMarker = new H.map.Marker({ lat: 40.4, lng: -3.6833 });
  map.addObject(madridMarker);

  var londonMarker = new H.map.Marker({ lat: 51.5008, lng: -0.1224 });
  map.addObject(londonMarker);
}

/** Add markers to map */

addMarkersToMap(map);
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Marker on the Map</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>
    <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>
  </head>
  <body id="markers-on-the-map">
    
    <div class="page-header">
        <h1>Marker on the Map</h1>
        <p>Display a map highlighting points of interest</p>
    </div>
    <p>This example displays a moveable map of <b>Europe</b>, including markers highlighting the locations of the capitals of <b>France</b>, <b>Italy</b>, <b>Germany</b>, <b>Spain</b> and the <b>United Kingdom</b>.</p>
    <div id="map"></div>
    <h3>Code</h3>
    <p>
        Default markers are created by using the <code>H.map.Marker</code> class without specifying an <code>icon</code> and passing in a location only.<br>
        For more information on markers and ways to customize them, refer to the following documents:
        <ul>
          <li><a href="https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/marker-objects.html" target="_blank">Marker objects</a></li>
          <li><a href="https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.map.Marker.html" target="_blank">H.map.Marker</a></li>
        </ul>
    </p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>
In This Article
Was this article helpful?
TitleResults for “How to create a CRG?”Also Available inAlert