Marker on the Map

Display a map at a specified location and zoom level

by ludovicoiovino

HTML

<!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>Map at a specified location</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="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>
    <script type="text/javascript" charset="utf-8"
        src="https://js.api.here.com/v3/3.1/mapsjs-clustering.js"></script>
  </head>
  <body id="markers-on-the-map">
    <div class="page-header">
        <div id="alert-warning" style="display:none;">
  <span id="alert" onclick="this.parentElement.style.display='none';">&times;</span>
  <strong>Warning!</strong><br>Please paste your apiKey in the Javascript code.
</div>
       
    </div>
  
    <div id="map"></div>
    <h3>Code</h3>
    <p>
        The <code>map.setCenter()</code> method and <code>map.setZoom() </code>method are able to control the location of the map.<br>
    </p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>

CSS

#map {
    width: 100%;
    height: 400px;
    background: grey;
}

#panel {
    width: 100%;
    height: 400px;
}

#alert-warning {
border-style: none;
border-left-style: solid;
border-left-width: thick;
border-color: #f44336;
background-color: #f4c3c6;
padding-left: 4px;
border-radius: 15px;
padding: 20px;
color: black;
}
#alert {
margin-left: 15px;
color: black;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
#alert:hover {
color: white;
}

JavaScript

/**
 * Moves the map to display over Berlin
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */
 //42.0918905	13.3611389
   
  
function moveMapToBerlin(map){
//42.07098764905609, 13.358108593904555
  map.setCenter({lat:42.07098764905609, lng:13.358108593904555});
  map.setZoom(12);
}

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

//Step 1: initialize communication with the platform
// In your own code, replace variable apikey with your own apikey


/***********************
//
//********* please set apiKey here *************/
window.apiKey = 'KW2udl_0sQ4zKUqARSm0IBrTCGt_8wh2yfzkTFpiluY'; 
//
/***********************/


var alertWarningUi = document.getElementById('alert-warning');

if(!apiKey){
	alertWarningUi.style.display= 'block';
} else{
	alertWarningUi.style.display = 'none';
}

var platform = new H.service.Platform({
  apikey: window.apiKey
});

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);

var dataPoints = [];
dataPoints.push(new H.clustering.DataPoint(42.0619483, 13.3724783));
dataPoints.push(new H.clustering.DataPoint(42.06191, 13.3725967));
dataPoints.push(new H.clustering.DataPoint(42.0940288, 13.3682179));
dataPoints.push(new H.clustering.DataPoint(42.0940261, 13.3682161));
dataPoints.push(new...