Einfache Kartendarstellung

In diesem Beispiel wird eine Karte in einen div-Container geladen. Hierbei legt die Mittelpunktkoordinate zusammen mit der Zoomstufe den Kartenausschnitt fest. Die Größe der Karte kann mittels CSS des Container-Elements (width und height) bestimmt werden.

Für weitere Optionen kann man verschiedene Attribute beim Erstellen des ym.map-Objektes als Parameter übergeben. Wichtige Attribute sind dabei center, zoom und fullscreenControl. Mit center bestimmen Sie den Kartenausschnitt der beim Laden der Karte angezeigt wird und mit zoom die dazugehörige Zoomstufe. Wenn Sie fullscreenControl einschalten, ist es Ihnen ebenfalls möglich die Karte im Fullscreen-Modus zu öffnen.

Sie können mithilfe der Maus die Karte verschieben und in sie hinein- oder aus ihr herauszoomen.

Das Beispiel ist vollständig; Sie können es lokal in einer Datei abspeichern und im Browser aufrufen. Sie müssen lediglich den Wert für den apiKey ersetzen.

SmartMaps-Karte

Codebeispiel: Karte einzeichnen

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>SmartMaps Karte</title>
</head>

<body>
  <div id="map-wrapper">
    <!-- Vordefiniertes DIV-Element, in das die Karte geladen wird. -->
    <div id="map" style="width: 600px; height: 600px;"></div>
  </div>
  <!-- SmartMaps API -->
  <script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>

  <script>
    ym.ready(function(modules) {
      var map = ym.map("map", {
		// Geographische Länge und Breite definieren.
        center: ym.latLng(50.095685, 8.690445),
		// Zoomstufe festlegen.
        zoom: 12
      });

      window.map = map;
    });
  </script>
</body>
</html>