Embed the Map on Your Website

Add a live Independent Vet map to an article or website so readers can explore practices in the area you are covering, without leaving your page.

Try an Example: San Francisco

This is a working embed, centered on San Francisco. This example shows verified independent practices. Select a marker to see practice details, or use Interact with map to pan around. It fits the page width and becomes shorter on small screens.

Get Your Embed Code

  1. Open the full map and search, pan or zoom to the area you want to show.
  2. Use the map’s existing Copy link button.
  3. Return to this page, paste that link below, choose a height, and select Generate embed code.
  4. Use Preview map to check the result, then Copy embed code and paste the HTML into your publishing system’s Custom HTML or embed block.
  5. Preview your article on desktop and mobile before publishing.
Use the existing Copy link button on the full map after choosing your area. Search terms and unsupported filters are left out.

The embed saves the starting geography, not search terms or filters such as jobs and services. Your verified/unverified visibility settings are also retained. It shows live practices and published ownership evidence where available. Readers can select markers immediately; Interact with map enables dragging and touch zoom. Reset returns to your chosen area.

Does It Work on Responsive Websites?

Yes. The generated iframe uses width="100%", so it follows the width of its containing article or column. The map responds to changes in that space: wider embeds have pin-anchored practice cards, while narrow embeds use compact fixed cards with internal scrolling.

The height you choose stays fixed by default: 350px, 450px or 600px. It does not automatically grow to fit a practice card or the surrounding article. A 450px height is a useful starting point, including on mobile.

If you want a shorter map on small screens, add a class to the generated iframe and put this CSS in your site’s stylesheet. Keep your generated src URL to preserve your chosen area; this example uses a sample location.

<iframe
  class="veterinary-map-embed"
  src="https://independentvet.com/embed/?lat=37.7749&amp;lng=-122.4194&amp;z=12&amp;unverified=0"
  title="Independent Vet — practices in this area"
  width="100%"
  height="450"
  style="border:0"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin">
</iframe>

.veterinary-map-embed {
  display: block;
  width: 100%;
  height: 450px;
}

@media (max-width: 600px) {
  .veterinary-map-embed {
    height: 350px;
  }
}

We recommend at least 320px of width and 350px of height where possible. A video-style 16:9 wrapper can make the map too short on a phone. Keep the map’s wordmark, OpenStreetMap attribution, legend and full-map link visible.

Before You Publish