Showing Bing Maps in a SharePoint App Using NAPA Tool

About NAPA Tool

We may use the NAPA Tool to start creating an app for Office/SharePoint. There is no dependency to have on your machine. We need to install it on a developer site of O365 portal. We may have a few steps to add it on your site.‎

Find the preceding video to add the NAPA Tool to your developer site.

Add an App

Once the NAPA Tool has been added to your site, you can find the NAPA Tool in the Site Contents page. Now you are ready to create an app. You may find the Project Explorer screen when you click the NAPA Tool. You then choose the project type after clicking "Add New Project".

Add New Project in sharepoint

We have four project types here. I have chosen an App for SharePoint and set the project name as "Map" then click "Create".

Develop an App

After creating a project, we can view the editor like Visual Studio with the following four modules:

  • Contents: Mainly hold the style sheets
  • Images: We can place the images that is necessary for an app
  • Pages: That contains pages involved in an app
  • Scripts: We have Scripts (JScripts.,) of an app

    Develop an App

Initially we have a default.aspx to write a code with two content placeholders. One is for a Header that includes all the references of the scripts and CSS. Another one for the body of the page.

content placeholder

For showing a Bing Map in an app we need to include a reference script of "bingmap". Add this script to the PlaceHolderAdditionalPageHead section.

<script type="text/javascript" src=""></script>
<script type="text/javascript">
var map = null;
function getMap()
{ map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing map Key'}); }

Then, add this code in the PlaceHolderMain section:

<body onload="getMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>

That's all, the coding part is over. Then run the project. Bing Maps will be displayed on your page.

sharepoint Bing Map



I have gained some knowledge in SharePoint Apps. Happy Coding..!