In this example a map is drawn in a div-Container. The style-Attribute of the ym.map-object defines the map style of the map. The dropdown can be used to choose between the different map styles.

SmartMaps Map style

Code example: Draw map with different map style

<!DOCTYPE html>
<html>

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

<body>
  <div id="map-wrapper">
    <!-- Predefined div for displaying the map. -->
    <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 latitude and longitude.
        center: ym.latLng(49.001, 8.417),
		// Define zoom value.
        zoom: 12,
// Define map style
style: 'greyscale' }); window.map = map; }); </script> </body> </html>