Плагин Wordpress для Google Maps: как вернуть карту

Question

У меня есть сайт PHP, который берет данные из XML-файла для отображения маркеров на Google Maps.Когда я перехожу прямо на страницу, все работает.Чтобы интегрировать этот код на мою страницу Wordpress, я подумал о написании плагина для этого:

<? defined('ABSPATH') or die("Thanks for visting"); 

function showMap() { ?>

 <style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

<div id="map"></div>

<script>
  var customLabel = {
    Location: {
      label: 'L'
    },
    Brautaustatter: {
      label: 'B'
    },
    Herrenausstatter: {
      label: 'H'
    },
    Florist: {
      label: 'F'
    },
    Konditor: {
      label: 'K'
    },
    Sonstiges: {
      label: 'S'
    }
  };

 function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(48.2048, 16.375),
      zoom: 12
    });
    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP or XML file
      downloadUrl('showXML.php', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var id = markerElem.getAttribute('id');
          var name = markerElem.getAttribute('location');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));

          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text);
          var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });
          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
          });
        });
      });


    }



  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };

    request.open('GET', url, true);
    request.send(null);
  }



function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</script>

<? add_shortcode( 'show_google_maps', 'showMap' ); ?>
<? } ?>

Теперь я не знаю, как вернуть всю карту с маркерами?Как я могу решить это?Нужно ли создавать «основную» функцию, в которую вложены все остальные функции?Это то, чего я хочу достичь с помощью этого кода?Спасибо за любые советы!

BR,

Stefan