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.
www.youtube.com/watch?v=TxrsIXjGh90
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="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function getMap()
{ map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing map Key'}); }
</script>
Then, add this code in the PlaceHolderMain section:
<body onload="getMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
That's all, the coding part is over. Then run the project. Bing Maps will be displayed on your page.
![sharepoint Bing Map]()
Reference
http://msdn.microsoft.com/en-us/library/office/jj220038.aspx
Summary
I have gained some knowledge in SharePoint Apps. Happy Coding..!