Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

187
Vistas
How to hide/show an autosuggest Search Box only after loading HERE Maps completely

Wanted to show a search box in HERE Maps only after the maps view is loaded completely.Is there a variable or event to detect when the map is loaded .

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You can achieve it by event

mapviewchangeend

Event fired when changes to the current map view are ending.: https://developer.here.com/documentation/maps/3.1.30.3/api_reference/H.Map.html#event:mapviewchangeend

Just wrap the event 'mapviewchangeend' definition in window.onload like:

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

/**
 * 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: 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);

const mapReady = (e) => {
    map.removeEventListener("mapviewchangeend", mapReady);
    alert("map ready!");
}

// Now use the map as required...
window.onload = function () {
  map.addEventListener("mapviewchangeend", mapReady);
  moveMapToBerlin(map);
}

Run this code: https://jsfiddle.net/yvj04Lb6/

By event 'mapviewchangeend' maps view is loaded completely. But you can notice that WEBGL rendering is not finished yet - JS API doesn't have an event such 'renderingend'.

Another example raster map tiles - https://jsfiddle.net/ad5f2xuz/ - there rendering is finished faster.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda