Vložení interaktivní mapy.cz do WordPressu

Pokud by někdo chtěl vložit interaktivní mapu od seznamu do WordPressu tak tady je návod:

Příklad 1 – mapa s cyklo a turist. trasami

  1. Vložit do hlavičky header.php – použijte ideálně child theme aby jste nemuseli zasahovat přímo do kódu šablony. Změnte „název strány“ za Vás název. Tímto kódem aktivujete pouze na potřebné stránce api map seznamu.
    <?php
    /* Vlozeni seznam kodu na stranku xyz */
     if (is_page('nazev-stranky') ) { ?>
     <script type="text/javascript" src="http://api4.mapy.cz/loader.js"></script>
     <script type="text/javascript">Loader.load()</script>  
    <?php } ?>
  2. Vložení kódu do stránek kam ho potřebujete. Já jsem dělal turistickou mapu včetně turistických tras a cyklostezky.
    <div id="m" style="width: 600px; height: 400px;"></div>
    <script type="text/javascript">
    var center = SMap.Coords.fromWGS84(13.9709992, 50.3727572);
    var m = new SMap(JAK.gel("m"), center, 13);
    m.addDefaultLayer(SMap.DEF_TURIST).enable();
    m.addDefaultLayer(SMap.DEF_BIKE).enable();
    m.addDefaultLayer(SMap.DEF_TRAIL).enable();
    m.addDefaultControls();	      
    </script>
    • Souřadnice 13.9709992, 50.3727572 změňte za vaše
    • Číslo 13 ve čtvrtém řádku je zoom, pohrajte si stím.
    • DEF_TURIST – je podkladová mapa
    • DEF_BIKE – průkledná mapa dokreslí cyklostezky, volitelný řádek
    • DEF_TRAIL – průhledná mapa dokleslí turistické trasy, volitelný řádek
    • Doporučuji pracovat a ukládat pouze v HTML editoru!!

Teď jsem se v tom hrabal jako non-programátor skoro dvě hodiny než jsem to dotsal do stavu jaký chci, Tak si ulehčete práci 🙂

Příklad 2 – seznam lokalit

Pro článek přehled datacenter v ČR jsem vytvořil interaktivní mapu.
header.php

<?php if( is_single('5145')) { ?>
 <script type="text/javascript" src="//api.mapy.cz/loader.js"></script>
 <script type="text/javascript">Loader.load();</script>
<?php } ?>

Do článku 

<div id="mapa" style="height: 380px;"></div>
<!-- zde šířka, výška, případně rámeček a float -->
<script type="text/javascript">// <![CDATA[
<!-- zoom -->
var mapa = new SMap(JAK.gel("mapa"), sitel, 7);
mapa.addControl(new SMap.Control.Sync()); /* Aby mapa reagovala na změnu velikosti průhledu */
<!-- mapa - turistický podklad -->
mapa.addDefaultLayer(SMap.DEF_BASE).enable();
<!-- ovládání -->
mapa.addDefaultControls();
var mouse = new SMap.Control.Mouse(SMap.MOUSE_PAN | SMap.MOUSE_WHEEL | SMap.MOUSE_ZOOM); /* Ovládání myší */
mapa.addControl(mouse);
<!-- značky --> 
 var sitel = SMap.Coords.fromWGS84(14.4829244, 50.0601625);
 var naganotm = SMap.Coords.fromWGS84(14.4801361, 50.0835958); 
 var thp = SMap.Coords.fromWGS84(14.4751311, 50.0780397); 
 var layer = new SMap.Layer.Marker();
<!-- shluk-->
 var clusterer = new SMap.Marker.Clusterer(mapa);
 layer.setClusterer(clusterer);
 mapa.addLayer(layer).enable();
<!-- nazev značky --> 
 var znacka = JAK.mel("div");
 var obrazek = JAK.mel("img", {src:SMap.CONFIG.img+"/marker/drop-red.png"});
 znacka.appendChild(obrazek);
<!-- bod 1--> 
 var popisek = JAK.mel('div', { className: 'arrow_box', innerHTML: 'Sitel' });
 var marker1 = new SMap.Marker(sitel, null, {
 url: popisek,
 anchor: { left: -6, top: 10 },
 title: 'sitel'
 });
 layer.addMarker(marker1);
 var card = new SMap.Card();
 card.getHeader().innerHTML = "<a href=\"https://www.t-mobile.cz/dcpublic/Datova_centra-Praha.pdf\" target=\"_blank\"><strong>SDC</strong>(SITEL)</a>";
 card.getBody().innerHTML = "T-Mobile Czech Republic a.s.";
 card.getFooter().innerHTML = "Nad Elektrárnou 1428/47, Praha";
 marker1.decorate(SMap.Marker.Feature.Card, card);
<!-- bod 2--> 
 var popisek2 = JAK.mel('div', { className: 'arrow_box', innerHTML: 'Nagáno TM' });
 var marker2 = new SMap.Marker(naganotm, null, {
 url: popisek2,
 anchor: { left: -6, top: 10 },
 title: 'Nagáno TM'
 });
 layer.addMarker(marker2);
 var card2 = new SMap.Card();
 card2.getHeader().innerHTML = "<a href=\"https://www.t-mobile.cz/dcpublic/Datova_centra-Praha.pdf\" target=\"_blank\"><strong>Nagáno TM</strong></a>";
 card2.getBody().innerHTML = "T-Mobile Czech Republic a.s.";
 card2.getFooter().innerHTML = "U nákladového nádraží 3156/6, Praha";
 marker2.decorate(SMap.Marker.Feature.Card, card2);
<!-- bod 3--> 
 var popisek3 = JAK.mel('div', { className: 'arrow_box', innerHTML: 'THP' });
 var marker3 = new SMap.Marker(thp, null, {
 url: popisek3,
 anchor: { left: -6, top: 10 },
 title: 'THP'
 });
 layer.addMarker(marker3);
 var card3 = new SMap.Card();
 card3.getHeader().innerHTML = "<a href=\"https://www.t-mobile.cz/dcpublic/Datova_centra-Praha.pdf\" target=\"_blank\"><strong>THP</strong></a>";
 card3.getBody().innerHTML = "T-Mobile Czech Republic a.s.";
 card3.getFooter().innerHTML = "Vinohradská 190, Praha";
 marker3.decorate(SMap.Marker.Feature.Card, card3);