Sprache
Deutsch

Eine Karte anzeigen

Die kleinste sinnvolle Einbettung: Ein Aufruf bindet die Karte ein, und ready wird mit dem Capability-Deskriptor aufgelöst, also den Befehlen und Ereignissen, die genau diese Karte beantwortet. Alles in den anderen Beispielen baut auf dem Handle auf, das embed() zurückgibt.

Dieses Beispiel separat öffnen

Worauf Sie achten sollten

  • embed(element, { publishId }) erstellt den Frame und öffnet die Steuerungssitzung.
  • map.ready wird mit { commands, events, policy, map } aufgelöst. Verzweigen Sie anhand von commands, nie anhand von Versionsnummern.
  • Steht Ihre Website nicht unter den zulässigen Ursprüngen der Karte, wird ready mit denied_origin abgelehnt. Die Karte wird trotzdem angezeigt, sie lässt sich nur nicht steuern.

Der Code

Die vollständige Seite. Setzen Sie Ihre eigene Publish-ID ein und bitten Sie den Autor der Karte, Ihre Website zu ihren zulässigen Ursprüngen hinzuzufügen.

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

Weiterlesen