Marker zeichnen

Dieses Beispiel zeigt, wie Sie zwei unterschiedliche Marker auf der Karte zeichnen. Sie können die Größe eines Markers, seine Position auf der Karte und den Pop-up-Text festlegen.

Der Marker wird in drei Schritten erstellt: 1. Die Karte wird initialisiert und eingebunden. 2. Die Marker werden definiert. 3. Die Marker werden der Karte hinzugefügt.

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={[INSERT 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>

Dieser HTML-Code lädt die Karte mit den angegebenen Markern und dem bereitgestellten API-Key. Sie können diesen Code in einer Datei speichern und in Ihrem Browser öffnen, um die Karte in Aktion zu sehen.