Idioma
Português

Exibir um mapa

A menor incorporação útil: uma chamada monta o mapa, e ready é resolvido com o descritor de capacidades, ou seja, os comandos e eventos que este mapa específico vai responder. Tudo nos outros exemplos se baseia no handle que embed() retorna.

Abrir este exemplo separadamente

O que observar

  • embed(element, { publishId }) cria o frame e abre a sessão de controle.
  • map.ready é resolvido com { commands, events, policy, map }. Tome decisões com base em commands, nunca em números de versão.
  • Se o seu site não estiver nas origens permitidas do mapa, ready é rejeitado com denied_origin: o mapa continua sendo exibido, só não pode ser controlado.

O código

A página completa. Troque pelo seu próprio ID de publicação e peça ao autor do mapa que adicione seu site às origens permitidas dele.

<!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>

Saiba mais