Idioma
Español

Mostrar un mapa

La inserción útil más pequeña: una llamada monta el mapa, y ready se resuelve con el descriptor de capacidades, es decir, los comandos y eventos que atenderá este mapa concreto. Todo lo que hay en los demás ejemplos se basa en el identificador que devuelve embed().

Abrir este ejemplo por separado

Qué observar

  • embed(element, { publishId }) crea el marco y abre la sesión de control.
  • map.ready se resuelve con { commands, events, policy, map }. Base sus decisiones en commands, nunca en números de versión.
  • Si su sitio no está entre los orígenes permitidos del mapa, ready se rechaza con denied_origin: el mapa se sigue mostrando, solo que no se puede controlar.

El código

La página completa. Ponga su propio id de publicación y pida al autor del mapa que añada su sitio a sus orígenes permitidos.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Display a map - Icon Map Embed API</title>
  <link rel="stylesheet" href="https://www.icon-map.com/embed-examples/examples.css"> <!-- demo styling only -->
</head>
<body>
  <div class="ex-bar">
    <span class="ex-label">Status</span> <span id="status">connecting...</span>
    <span class="ex-spacer"></span>
    <span class="ex-label" id="details"></span>
  </div>
  <div class="ex-main"><div id="map"></div></div>

  <script src="https://www.icon-map.com/js/iconmap-embed/2/iconmap-embed.umd.min.js"></script>
  <script>
    const el = document.getElementById("map");

    // One call mounts the map. Everything else in these examples builds on the handle it returns.
    const map = IconMapEmbed.embed(el, {
      publishId: "pub_...",
      // The map is a globe: let this page's own background show in the space around it.
      background: "transparent",
      title: "World cities",
    });

    // `ready` resolves with what THIS map will answer: the commands, the events,
    // the author's switches and a few facts about the map.
    map.ready
      .then((capabilities) => {
        document.getElementById("status").textContent = "connected";
        document.getElementById("details").textContent =
          `${capabilities.commands.length} commands - ${capabilities.events.length} events - ` +
          `data: ${capabilities.map.dataMode} - languages: ${capabilities.map.locales.length}`;
      })
      .catch((error) => console.error(error.code, error.message));
  </script>
</body>
</html>

Más información