Skip to content

Draw Markers

This example shows how to draw two different markers on the map. You can define the size of a marker, its position on the map, and the popup text.

The marker is created in three steps: 1. The map is initialized and added. 2. The markers are defined. 3. The markers are added to the map.

Test Example Icons and divIcons 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Test Example Icons and divIcons</title>
    <!-- Here is an example of how to define a class for a DIV icon. -->
    <style>
    .markerIcon {
        width: 35px;
        height: 35px;
        background: #18345c;
        text-align: center;
        line-height: 34px;
        border-radius: 50%;
        border: 3px solid #ffffff;
        box-shadow: inset 1px 1px rgba(255,255,255,0.1), 1px 1px 1px rgba(0,0,0,0.2);
        color: #fff;
        font-weight: bold;  
        font-size: 14px;  
    }
    </style>
</head>
<body>
    <div id="map-wrapper">
        <!-- Predefined DIV element into which the map is loaded. -->    
        <div id="map" style="height: 400px; width: 500px;"></div>
    </div>
    <!-- Include SmartMaps API -->
    <script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={YOUR API-KEY}"></script>

    <script>
    ym.ready(function (modules) {
        var map = ym.map("map", {
            center: ym.latLng(49.021403, 8.439620),
            zoom: 19,
        });

        var icon = new modules.provider.Icon({
            iconUrl: 'http://cdn.yellowmap.de/yellowmaps/img/marker.svg',
            iconRetinaUrl: 'http://cdn.yellowmap.de/yellowmaps/img/marker.svg',
            iconSize: [30, 49],
            iconAnchor: [15, 49],
            popupAnchor: [0, -48]
        });

        var divIcon = ym.divIcon({className: 'markerIcon', iconSize: [40, 40]});

        // Set marker coordinates
        var IconMarkerLatLng = ym.latLng(49.021192, 8.439603);
        // Define markers
        var marker = window.marker = new modules.provider.Marker(IconMarkerLatLng);
        // Define icon of the marker => SVG-Icon
        marker.setIcon(icon);
        // Draw markers
        marker.addTo(map);

        // Set coordinates of the second marker
        var divIconMarkerLatLng = ym.latLng(49.021603, 8.439620);
        // Define markers
        var divIconmarker = window.marker = new modules.provider.Marker(divIconMarkerLatLng);
        // Define marker icon => DIV icon
        divIconmarker.setIcon(divIcon);
        // Draw markers
        divIconmarker.addTo(map);    
    });
    </script>
</body>
</html>

This HTML code will load the map with the specified markers using the provided API key. You can save this code to a file and open it in your browser to see the map in action.