Simple map

In this example a map is loaded into a div container. The center coordinate together with the zoom level defines the map section. The size of the map can be determined by CSS of the container element (width and height).

You can use the mouse to move the map and zoom in or out.

The example is complete; you can save it locally in a file and view it in your browser. You only have to replace the value for the apiKey.

SmartMaps map

Code example: Draw in map

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