Embedding Public Google Map

by SHELDON PASCIAK

HTML

<div class="section">

    <p>Map 1 - the map I created with import of your data.</p>

    <iframe 
      src="https://www.google.com/maps/d/u/0/embed?mid=1G9FCydM_mGxNf0wdlibWbTdfwUrJBZs&ehbc=2E312F&noprof=1" 
      width="640" 
      height="480">
    </iframe>

    <p>Map 2 - an embed from findinghotsprings.com</p>
    
    <iframe 
      src="https://www.google.com/maps/d/embed?mid=1vKU0CzCAFKGlCHv_PeXJaJWgb-F-gIU&hl=en_US&ehbc=2E312F" 
      width="480" 
      height="480">
    </iframe>

  </div>

  <div class="section">
    <p>I found a site (<a href="https://findinghotsprings.com" target="_blank">findinghotsprings.com</a>) with an IFRAME embed of Google Maps that are public. Can I use this IFRAME on my site?</p>
    
    <iframe 
      src="https://www.google.com/maps/d/embed?mid=1vE5GPYBxRFwmvqmEFubSfbiI1IAxeFY&amp;ehbc=2E312F&amp;wmode=opaque" 
      width="100%" 
      height="600" 
      data-embed="true">
    </iframe>

  </div>

  <div class="section">
    <h2>ChatGPT said:</h2>

    <p>You <span class="highlight">can technically embed</span> that <code>&lt;iframe&gt;</code> on your site, but here are the key points to understand before doing so:</p>
  </div>

  <div class="section">
    <h3>✅ What You're Allowed to Do (Generally)</h3>
    <ul>
      <li>Google allows embedding of <strong>public "My Maps"</strong> using iframes.</li>
      <li>If the map was marked as <em>"public on the web"</em> by its creator (which it seems to be, since it loads without login), then embedding it is allowed under Google's Terms of Service.</li>
      <li>This is similar to embedding a public YouTube video — it's allowed, as long as you're not misrepresenting the content.</li>
    </ul>
  </div>

  <div class="section">
    <h3>⚠️ Cautions & Best Practices</h3>

    <p class="warning">Attribution:</p>
    <ul>
      <li>The embedded map still shows Google's branding and interface, so you're covered on attribution...

CSS

body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    h2 {
      color: #2c3e50;
    }
    iframe {
      margin: 1rem 0;
      border: 1px solid #ccc;
    }
    .section {
      margin-bottom: 2rem;
    }
    ul {
      margin-left: 1.5rem;
    }
    .highlight {
      font-weight: bold;
      color: #27ae60;
    }
    .warning {
      font-weight: bold;
      color: #e67e22;
    }