Embed Instructions - Radio Station Map

Quick Start

Copy and paste this code into your website where you want the map to appear:

<iframe 
  src="https://surroundbible.com/map.html" 
  width="100%" 
  height="600" 
  frameborder="0" 
  allowfullscreen
  style="border: none; border-radius: 8px;"
></iframe>
                

Ready to use! The embed code above uses https://surroundbible.com/map.html and is ready to paste into your website.

Live Preview

Here's what the embedded map looks like:

Note: This is a live, interactive preview. You can interact with the map above to see all its features including zooming, panning, station filtering, and fullscreen mode.

Customization Options

Height & Width

Adjust the height to fit your layout. Recommended heights:

Desktop: 600px - 800px
Tablet: 500px - 600px
Mobile: 400px - 500px

<!-- Responsive height example -->
<iframe 
  src="https://surroundbible.com/map.html" 
  width="100%" 
  height="600" 
  frameborder="0" 
  allowfullscreen
  style="border: none; border-radius: 8px; min-height: 400px;"
></iframe>
                

Responsive Design

For a fully responsive embed that adapts to screen size, use this CSS approach:

<style>
  .map-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    height: 0;
    overflow: hidden;
  }
  
  .map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
  }
</style>

<div class="map-container">
  <iframe 
    src="https://surroundbible.com/map.html" 
    frameborder="0" 
    allowfullscreen
  ></iframe>
</div>
                

URL Parameters & Customization

You can customize the embedded map using URL parameters. Add these to the src URL:

Display Options

?hideHeader=1 - Hide header and album cover
?hideLegend=1 - Hide the network legend
?hideFullscreen=1 - Hide the fullscreen button
?hideMenu=1 - Hide the hamburger menu
?hideMapStyle=1 - Hide the map style selector
?hideStats=1 - Hide the station counter
?showLogo=1 - Show logo button (bottom-left, links to website)

Map Settings

?mapStyle=dark-matter - Set map style (options: dark-matter, dark-all, esri-dark-gray, openstreetmap)
?zoom=world - Set initial zoom (options: usa, world, valdosta, eastern-seaboard, australia, custom)
?zoom=custom&customLat=40.7128&customLng=-74.0060&customZoom=10 - Use custom viewport (latitude, longitude, zoom level)
?hideLayers=1 - Start with all networks hidden
?tourMode=1 - Enable tour mode (press Enter to cycle locations)

Cover Art

?coverUrl=https://example.com/cover.jpg - Use custom cover art

Embed Options Menu

?showEmbedOptions=1 - Show embed customization menu in hamburger menu (includes Share accordion with all customization options)

Example: Customized Embed

<iframe 
  src="https://surroundbible.com/map.html?hideHeader=1&hideLegend=1&mapStyle=openstreetmap&zoom=world" 
  width="100%" 
  height="600" 
  frameborder="0" 
  allowfullscreen
  style="border: none; border-radius: 8px;"
></iframe>
                

Tip: You can combine multiple parameters using &. For example: ?hideHeader=1&hideLegend=1&mapStyle=dark-all&showLogo=1

Features

✅ Interactive Map: Users can zoom, pan, and explore radio stations
✅ Station Filtering: Toggle different radio networks on/off
✅ Station Details: Hover over markers to see station information
✅ Multiple Map Styles: Dark mode and other style options
✅ Fullscreen Mode: Built-in fullscreen support
✅ Mobile Responsive: Works great on all devices
✅ No Dependencies: Everything is self-contained
✅ Customizable: Hide/show UI elements via URL parameters
✅ Audio Playback: Play/pause button with smooth animations
✅ Logo Button: Optional stylized logo button (bottom-left)

Embedding on SurroundBible.com

Since surroundbible.com is a WordPress site, here are specific instructions for adding the map:

Method 1: WordPress Gutenberg Editor (Recommended)

Edit the page or post where you want to add the map
Click the + button to add a new block
Search for and select "Custom HTML" block
Paste this code:

<div style="margin: 40px 0;">
  <iframe 
    src="https://surroundbible.com/map.html" 
    width="100%" 
    height="600" 
    frameborder="0" 
    allowfullscreen
    style="border: none; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);"
  ></iframe>
</div>
                    

Tip: You can adjust the height="600" value to fit your page layout.

Method 2: WordPress Classic Editor

Edit the page or post
Switch to Text mode (not Visual)
Paste the iframe code where you want the map to appear

<iframe 
  src="https://surroundbible.com/map.html" 
  width="100%" 
  height="600" 
  frameborder="0" 
  allowfullscreen
  style="border: none; border-radius: 8px;"
></iframe>
                    

Method 3: WordPress Widget (Sidebar/Footer)

Go to Appearance → Widgets
Add a "Custom HTML" widget
Paste the iframe code
Save the widget

<div style="width: 100%; max-width: 100%;">
  <iframe 
    src="https://surroundbible.com/map.html" 
    width="100%" 
    height="500" 
    frameborder="0" 
    allowfullscreen
    style="border: none; border-radius: 8px;"
  ></iframe>
</div>
                    

Note: For widgets, use a smaller height (400-500px) to fit sidebar spaces.

Method 4: WordPress Theme Template (Advanced)

To add the map to a specific page template, edit your theme's template file and add:

<?php
// Add this in your page template (e.g., page-radio-map.php)
?>
<div class="radio-station-map" style="margin: 40px 0; width: 100%;">
  <iframe 
    src="<?php echo esc_url( home_url( '/index.html' ) ); ?>" 
    width="100%" 
    height="600" 
    frameborder="0" 
    allowfullscreen
    style="border: none; border-radius: 8px;"
  ></iframe>
</div>
                    

Responsive Embed for SurroundBible.com

For a fully responsive map that adapts to all screen sizes on surroundbible.com:

<style>
  .surroundbible-map-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    height: 0;
    overflow: hidden;
    margin: 40px 0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  }
  
  .surroundbible-map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
  
  @media (max-width: 768px) {
    .surroundbible-map-container {
      padding-bottom: 100%; /* Square on mobile */
    }
  }
</style>

<div class="surroundbible-map-container">
  <iframe 
    src="https://surroundbible.com/map.html" 
    frameborder="0" 
    allowfullscreen
  ></iframe>
</div>
                    

Usage: Add the CSS to your theme's Additional CSS (Appearance → Customize → Additional CSS) and use the HTML in your page.

Example Implementation (Other Platforms)

Basic HTML Example

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Radio Station Map</h1>
  
  <iframe 
    src="https://surroundbible.com/map.html" 
    width="100%" 
    height="600" 
    frameborder="0" 
    allowfullscreen
    style="border: none; border-radius: 8px;"
  ></iframe>
</body>
</html>
                    

React/Next.js Example

export default function RadioMap() {
  return (
    <div style={{ width: '100%', height: '600px' }}>
      <iframe
        src="https://surroundbible.com/map.html"
        width="100%"
        height="100%"
        frameBorder="0"
        allowFullScreen
        style={{ border: 'none', borderRadius: '8px' }}
      />
    </div>
  );
}
                    

Technical Notes

⚠️ Important: Make sure your domain allows iframe embedding. The map is configured to work in iframes, but some hosting providers may have additional security restrictions.

📋 Deployment Note: Ensure the map files (index.html, radioStations.csv, and cover.jpg) are deployed to https://surroundbible.com/ before using the embed code. The embed will work once the files are live on the domain.

Browser Compatibility

Chrome/Edge: ✅ Full support
Firefox: ✅ Full support
Safari: ✅ Full support
Mobile browsers: ✅ Full support

Performance

The map loads asynchronously
Station data is loaded from CSV
Map tiles are cached by the browser
No external API keys required

Support

If you encounter any issues with embedding the map, check:

That the domain URL is correct and accessible
That your website allows iframe embedding
Browser console for any error messages
That the iframe has proper width and height attributes

📡 Radio Station Map Embed