• JavaScript
  • HTML
 * Observes master map events to control the second one
 * @param  {H.Map} firstMap  A HERE Map instance within the application
 *  @param  {H.Map} secondMap  A HERE Map instance within the application

function synchronizeMaps(firstMap, secondMap) {
  // get view model objects for both maps, view model contains all data and
  // utility functions that're related to map's geo state
  var viewModel1 = firstMap.getViewModel(),
      viewModel2 = secondMap.getViewModel();

  // set up view change listener on interactive map
  firstMap.addEventListener('mapviewchange', function() {
    // on every view change take a "snapshot" of a current geo data for
    // interactive map and set this values to the second, non-interactive, map

 * Boilerplate map initialization code starts below:

// initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: window.apikey
// create two sets of the default layers for each map instance
var defaultLayers = platform.createDefaultLayers();
var defaultLayersSync = platform.createDefaultLayers();

// set up containers for the map

var mapContainer = document.createElement('div');
var staticMapContainer = document.createElement('div');

mapContainer.style.height = '300px';

staticMapContainer.style.position = 'absolute';
staticMapContainer.style.width = '600px';
staticMapContainer.style.height = '300px';


// initialize a map, this map is interactive
var map = new H.Map(mapContainer,
  center: {lat: 53.430, lng: -2.961},
  zoom: 7,
  pixelRatio: window.devicePixelRatio || 1
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

// initialize a map that will be synchronised
var staticMap = new H.Map(staticMapContainer,
  center: {lat: 53.430, lng: -2.961},
  zoom: 7,
  pixelRatio: window.devicePixelRatio || 1

// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
// create beahvior only for the first map
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Now use the map as required...
synchronizeMaps(map, staticMap);
<!DOCTYPE html>
    <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">
    <meta name="description" content="Synchronise a static map with an interactive map">
    <title>Synchronising Two Maps</title>
    <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>
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>
  <script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script></head>

    <div class="page-header">
        <h1>Synchronising Two Maps</h1>
        <p>Synchronise a static map with an interactive map</p>
    <p>This example shows two maps. The upper map allows for moving and zooming. The lower map observes the upper map's zoom level and position and adopts these values every time the upper map changes.</p>
    <h3>Movable Map</h3>
    <div id="map"></div>
    <h3>Static Map</h3>
    <div id="panel"></div>
        <code>H.Map</code>&nbsp;instance fires&nbsp;<a target="_blank" rel="nofollow" href="http://developer.here.com/javascript-apis/documentation/v3/maps/topics_api_nlp/h-map.html#h-map__events-summary">various events</a>&nbsp;which we can listen and control the second map.
    <script type="text/javascript" src='demo.js'></script>