Einfache Karte

In diesem Beispiel wird eine Karte in einen div-Container geladen. Die Mittelpunktkoordinate legt zusammen mit der Zoomstufe den Kartenausschnitt fest. Die Größe der Karte kann über das CSS des Container-Elements (Breite und Höhe) bestimmt werden.

Sie können die Karte mit der Maus verschieben sowie hinein- und herauszoomen.

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

SmartMaps Karte

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>SmartMaps Karte</title>
</head>
<body>
  <div id="map-wrapper">
    <!-- Predefined DIV element into which the map is loaded. -->
    <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=[INSERT API-KEY]"></script>

  <script>
    ym.ready(function(modules) {
      var map = ym.map("map", {
        // Define geographical longitude and latitude.
        center: ym.latLng(50.095685, 8.690445),
        // Set zoom level.
        zoom: 12
      });

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