Vlastní obohacená značka

HTML

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>api4.mapy.cz - ukázka vlastní obohacené značky</title>
        <script type="text/javascript" src="//api.mapy.cz/loader.js"></script>
        <script type="text/javascript">Loader.load();</script>
    </head>
    <body id="advanced-advance-marker">
        <div id="m" style="height:360px"></div>
    </body>
</html>

JavaScript

var znacka = JAK.mel("div");
var obrazek = JAK.mel("img", {src:SMap.CONFIG.img+"/marker/drop-red.png"});
znacka.appendChild(obrazek);

var popisek = JAK.mel("div", {}, {position:"absolute", left:"0px", top:"2px", textAlign:"center", width:"22px", color:"white", fontWeight:"bold"});
popisek.innerHTML = "A";
znacka.appendChild(popisek);

var znacka2 = JAK.mel("div");
var obrazek2 = JAK.mel("img", {src:SMap.CONFIG.img+"/marker/drop-blue.png"});
znacka2.appendChild(obrazek2);

var popisek2 = JAK.mel("div", {}, {position:"absolute", left:"0px", top:"2px", textAlign:"center", width:"22px", color:"white", fontWeight:"bold"});
popisek2.innerHTML = "B";
znacka2.appendChild(popisek2);

var znacka3 = JAK.mel("div");
var obrazek3 = JAK.mel("img", {src:SMap.CONFIG.img+"/marker/drop-yellow.png"});
znacka3.appendChild(obrazek3);

var popisek3 = JAK.mel("div", {}, {position:"absolute", left:"0px", top:"2px", textAlign:"center", width:"22px", color:"white", fontWeight:"bold"});
popisek3.innerHTML = "C";
znacka3.appendChild(popisek3);




var m = new SMap(JAK.gel("m"));
m.addDefaultLayer(SMap.DEF_BASE).enable();

var vrstva = new SMap.Layer.Marker();
m.addLayer(vrstva);
vrstva.enable();

var marker = new SMap.Marker(m.getCenter(), null, {url:znacka});
var marker2 = new SMap.Marker(SMap.Coords.fromJTSK(1050000, 740000), null, {url:znacka2});
var marker3 = new SMap.Marker(SMap.Coords.fromJTSK(1070000, 720000), null, {url:znacka3});
vrstva.addMarker(marker);
vrstva.addMarker(marker2);	
vrstva.addMarker(marker3);