Wyodor On The Web

Embedding Bing Maps

Embedding Bing Maps is slightly more complex than embedding Google Maps, since Bing does not provide the embed code. But it is possible. Here's how.

Go to Bing Maps and navigate to your desired location.

Click the share link and copy the URL. To verify, open a new browser window and paste the URL in the addressfield and hit return.

To embed the page in a webpage or blog, use this HTML code:

<div style="width: 685px; height: 700px; overflow: hidden;">
  <iframe src="the Bingmap URL" frameborder="0" width="685" height="700" scrolling="no"></iframe>
</div>

To see more of the map, click the close icon in the lefthand column. Or click the vertical divider in the middle.

The horizontal scrollbar is part of the Bing page and not of the DIV or IFRAME HTML element.

You can hide the logo and the search field, and center the result, by adding some extra code.

Paste this after scrolling ="no" : style="margin-top: -120px; margin-left: -5px"

Result: scrolling="no" style="margin-top: -120px; margin-left: -5px;">

This will hide the top of the Bingpage.

Note: to compensate for the -120px, the height of the DIV element must be decreased too (700px - 120px = 580px).

Note that different browsers will display the embedded map differently. So tinker with the settings.