1. Home
  2. Dokumente
  3. Karten
  4. Beispiele
  5. Kartenfunktionalität
  6. Einfache Kartendarstellung

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.

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.

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>SmartMaps Karte</title>
  <!-- SmartMaps CSS einbinden -->
  <link href="https://www.yellowmap.de/Presentation/Yellowmaps/Examples/assets/site.css" rel="stylesheet">
  <link rel="stylesheet" href="https://www.yellowmap.de/api_js/cdn/highlight/styles/github.css">
</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>

 

Wie können wir helfen?