Your Sitemap.Xml 3D Website Tour Is Ready

2. Add This Tour to Your Website

Use either option below. Send the code to your webmaster, paste it into your website, or download the ready-made HTML file.

Option A — Copy the website embed code

Best for adding the tour to an existing website page.

<!-- Golfapedia 3D Tour -->
<div class="gp3d-embed">
  <iframe
    src="https://www.golfapedia.org/3d/sitemap.xml?licencekey=GA-UKQ3W-VFRQV-6N43S"
    title="Sitemap.Xml - Golfapedia 3D Tour"
    width="100%"
    height="600"
    style="border:0;max-width:100%;"
    loading="lazy"
    allowfullscreen
    referrerpolicy="strict-origin-when-cross-origin">
  </iframe>
  <div class="gp3d-bar">
    <span class="gp3d-brand">Golfapedia 3D Tour</span>
    <span class="gp3d-controls">
      <button class="gp3d-btn" type="button" data-gp3d-widescreen aria-label="Wide screen" title="Wide screen"><svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19 7H5v10h14V7zm2-2v14H3V5h18z"/></svg></button>
      <button class="gp3d-btn" type="button" data-gp3d-fullscreen aria-label="Full screen" title="Full screen"><svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg></button>
    </span>
  </div>
</div>
<script>
(function () {
  if (window.__gp3dTourControls) return; window.__gp3dTourControls = true;
  var css = '.gp3d-embed{position:relative;background:#0a1f14;border-radius:12px;overflow:hidden;}' +
    '.gp3d-embed iframe{display:block;width:100%;height:600px;border:0;}' +
    '.gp3d-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;background:#0a1f14;border-top:1px solid rgba(255,255,255,.08);}' +
    '.gp3d-brand{font:600 12px/1 Arial,sans-serif;letter-spacing:.06em;color:#7f9389;text-transform:uppercase;}' +
    '.gp3d-controls{display:flex;gap:4px;}' +
    '.gp3d-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:32px;padding:0;background:transparent;border:0;border-radius:6px;color:#cfd8d2;cursor:pointer;}' +
    '.gp3d-btn:hover{background:rgba(255,255,255,.12);color:#fff;}' +
    '.gp3d-btn.gp3d-on{color:#e3c98c;}' +
    '.gp3d-embed.gp3d-wide{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;}' +
    '.gp3d-embed.gp3d-wide iframe{height:80vh;min-height:420px;}' +
    '.gp3d-embed:-webkit-full-screen{display:flex;flex-direction:column;border-radius:0;}' +
    '.gp3d-embed:-webkit-full-screen iframe{flex:1;height:auto;}' +
    '.gp3d-embed:fullscreen{display:flex;flex-direction:column;border-radius:0;}' +
    '.gp3d-embed:fullscreen iframe{flex:1;height:auto;}' +
    '@media(max-width:640px){.gp3d-embed iframe{height:64vw;min-height:320px;}}';
  var style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);
  document.addEventListener('click', function (e) {
    var wide = e.target.closest && e.target.closest('[data-gp3d-widescreen]');
    if (wide) {
      var box = wide.closest('.gp3d-embed');
      if (box) {
        var on = box.classList.toggle('gp3d-wide');
        wide.classList.toggle('gp3d-on', on);
        wide.title = on ? 'Exit wide screen' : 'Wide screen';
      }
    }
    var fs = e.target.closest && e.target.closest('[data-gp3d-fullscreen]');
    if (fs) {
      var player = fs.closest('.gp3d-embed');
      if (!player) return;
      if (document.fullscreenElement || document.webkitFullscreenElement) {
        (document.exitFullscreen || document.webkitExitFullscreen).call(document);
      } else {
        (player.requestFullscreen || player.webkitRequestFullscreen).call(player);
      }
    }
  });
})();
</script>

Option B — Download a ready-made HTML file

Best if you want a complete sample page you can upload or send to your webmaster.