Add maps and directions to your website

A key piece of information you should always include on your website is your business address and, in some cases, directions to it. The extent of directions you provide depends largely on the type of business you have. Maps and directions are essential for restaurants, retail stores, and medical offices, for example, but not for a repair or consulting service where you typically go to the customer’s address. Read this article to learn how to add maps and directions to your website.

In this article

About maps and directions

Add a Bing Map to your website

Add a third party map to your website

Customize the map

Learn more

About maps and directions

You can quickly and easily add an interactive map to your public website using a Bing Maps feature which provides a range of mapping tools that let viewers navigate the map, display different map sizes, zoom in and out, enter contact information, get personalized directions, and more. Including a map on your website, makes it easy for your visitors and customers to find your business without having to call or email for directions.

Add Map to website

Note    The above example is for Microsoft Corporation as you see in the call-out.. When you use this feature, your business name, address, and contact information will appear instead.

Top of Page

Add a Bing Map to your website

To add a map to your website, you’ll choose the Map option, then add your business address and contact information in Bing Maps. This generates the necessary embed code, which you’ll add to your site.

  1. Browse to the Directions page on your website or the page where you want to add a map (which could also be a Getting Here or Contact Us page).

  2. Click the Page tab, choose Edit, and place your cursor on the page where you want the map.

  3. Click the Insert tab and choose Map. (A new window opens with Bing Maps.)

  4. Fill out the following fields on the Bing Map:

    • Business name: The name of your business, which appears on the map.

    • Country or region: The country where you are located.

    • Address or location: Your physical street address.

  5. Click the Search button when you’re done.

  6. Verify that everything looks okay and if you like, add your Phone number. (This too will appear on the map, which can be pretty useful for your customers.)

  7. Click Continue to return to the Bing Map details page and fill out the following fields:

    • Size

      • Small to make the map 325 by 280 pixels.

      • Large to make the map 500 by 400 pixels.

      • Custom to specify your own width and height.

    • Style

      • Road to display the map in a traditional road map view.

      • Aerial to display the map in an aerial view, showing surrounding geography.

    • Behavior

      • Static to display a static map of your location with no controls.

      • Interactive to display dynamic map with navigation, scrolling, zooming, and so on.

    • Links

      • View larger map adds a link to a larger, interactive Bing map.

      • Get directions adds a link to a Bing map with personalized directions.

      • View bird's eye adds a link to a Bing map bird’s eye view. (Bird’s eye displays a close-up aerial view at a 45 degree.)

  8. Click Generate embed code to create the necessary web page code for the map – copy the selected code and close Bing Maps.

  9. On your Directions page, click Embed Code, paste in the code you copied above, and click Insert.

  10. When finished with the page, click Save or Save and Publish.

Important    If you’re using Internet Explorer, you’ll see the message “Only secure content is displayed.” You see this message because the website editor uses HTTPS and the Bing Map uses HTTP. Your website visitors won’t see this message because they’re viewing your site in HTTP. Click Show all content to see the map on your website.

Top of Page

Add a third party map to your website

As an alternative to using Bing Maps, you can embed maps from other map services, including Google Maps, MapQuest, and Yahoo Maps. To do so, you’ll first search for your address with one of these services, choose the option to embed code, and then embed it on your site.

  1. Go to the map service you want to use on your website and perform a search for your address.

  2. On the map result, look for a Link or Link and Embed option and select it. (Each map service is different and may provide a different interface.)

  3. Copy the embedded HTML provided.

  4. Return to your website and browse to the Directions page or the page where you want to add a map.

  5. Click the Page tab, choose Edit, and place your cursor on the page where you want the map.

  6. Click Embed Code, paste in the code you copied from the map service, and click Insert.

  7. When finished customizing the page, click Save or Save and Publish.

Top of Page

Customize the map

Once you’ve added a map to your website, you may want to customize the appearance of the map. There are two ways to do this: by editing the map snippet directly or by replacing the map with a new one. Choose an approach based on your knowledge and comfort of HTML and web page source code.

To customize a map, use one of the following approaches:

Edit map snippet

  1. Browse to the Directions page or the page that contains your map.

  2. Click the Page tab and choose Edit.

  3. At the bottom of the map, click Edit Snippet.

  4. Change the HTML source page code of the embedded map and click Insert.

  5. When finished with the page, click Save or Save and Publish.

Replace map with a new one

  1. Browse to the Directions page or the page that contains your map.

  2. Click the Page tab and choose Edit.

  3. Click the X at the top right of the map. Or, select the map and press Delete on your keyboard.

  4. Repeat the steps to add the original map. (See “Add a Bing Map to your website” or “Adding a third party map to your website” earlier in this article.)

Top of Page

Learn more

In addition to adding a map to your website, you can add other content from your site and third party sites, including App Parts, video and other web objects. Learn more in Public Website help for Office 365.

Top of Page

Applies To: Office 365 End User, SharePoint Online, SharePoint Online Website



Was this information helpful?

Yes No

How can we improve it?

255 characters remaining

To protect your privacy, please do not include contact information in your feedback. Review our privacy policy.

Thank you for your feedback!

Support resources

Change language