Well, I finally have some free time to play with it. I know, I am two years late on this topic. But I still wanted to see how Microsoft Virtual Earth Map Control can work together with SharePoint, so I created a control that does following tasks
1. Read saved locations from SharePoint List
Read saved locations information from SharePoint list. SharePoint list stores location items with Title, Address and Description fields.
Render all the locations stored in SharePoint list on Virtual Earth Map Control. Virtual earth Map Control is embedded in Content editor web part - there is no need to create a custom web part.
Display custom created panel control (VEMap Control) on Virtual Earth Map Control. It shows the pushpins, location Id and Titles - user click on the pushpin Id in panel control to see the corresponded location on map
2. Write to SharePoint List
Display Pushpin Information box when user click on pushpins – information box contains the custom created HTML with Text boxes and Edit/Save/Cancel action links.
Push changed value back to SharePoint list via SharePoint list web service (/_vti_bin/lists.asmx)
How to do it
Download JavaScript Files
I am not going to explain the code I wrote, it is not hard for you to figure out what each function does. Source code can be downloaded from the link below.
VirtualEarthMapControl_SharePointExample.zip (5.92 kb)
It contains five .js files and one .css style file.
VirutalMapMain.js
VirtualMapPanel.js
VirtualMapInfoBox.js
VirtualMapPushPin.js
VirtualMapSPC.js (SharePoint web service connection code)
PLEASE NOTE: These are uncommented code with hard-coded values. DO NOT use them directly. I provide this so that you can see how this can be done, it doesn’t necessary show the implementation of best practice.
The functions in above .js files are pretty self-explained by their name.
Create a SharePonit List
Create a SharePoint list with following name and fields.
Please keep in mind that SharePoint list and field names in VirutalMapSPC.js were hard-coded. You can change them to map to the list on your SharePoint Site
Add a Content Editor Web Part to page
On the web part page, add a Content Editor Web Part and insert the following html in Web Part Properties > Source Editor. Make sure the source links of JavaScript and CSS files are match to their saved location.
Since Virtual Map Control has to be called during OnLoad event, I use the _spBodyOnLoadFunctionNames.push() to do this.
<script charset="UTF-8" type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script charset="UTF-8" type="text/javascript" src="~/_layouts/1033/virtualmap/VirtualMapSPC.js"></script>
<script charset="UTF-8" type="text/javascript" src="~/_layouts/1033/virtualmap/VirtualMapPanel.js"></script>
<script charset="UTF-8" type="text/javascript" src="~/_layouts/1033/virtualmap/VirtualMapInfoBox.js"></script>
<script charset="UTF-8" type="text/javascript" src="~/_layouts/1033/virtualmap/VirtualMapPushPin.js"></script>
<script charset="UTF-8" type="text/javascript" src="~/_layouts/1033/virtualmap/VirtualMapMain.js"></script>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("GetMap");
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = '/Style Library/temp/virtualmap.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
</script>
<div id='myMap' style="position:relative; width:600px; height:400px;"> </div>
Save changes, and a Virtual Earth Map Control should be loaded and displayed in Content Editor Web Part with all the data loaded from SharePoint list.
Let me know if you have any questions, I hope you find this helpful.
Subscribe