Integrating SharePoint and Bing Maps

June 23, 2012 Mark Rackley Uncategorized 0

Body:
By far one of the most simple jQuery demos I show during one of my sessions that also seems to get the best reaction is a demo where I show how quickly you can integrate SharePoint and Bing Maps. Using jQuery you can easily make an address from a SharePoint list appear in Bing Maps using the Bing Maps API.

“Bing”

If more applications were named using onomatopoeia what would their names be? I’m thinking “Thud” would be the next Google social application…  Anyway! We will be integrating SharePoint with Bing Maps. The first thing you should do is get a Maps Developer Account so you can get a Bing Maps Key. You will need this in order to write code and use the API (no, you can’t use mine).

Next, take a look at the Bing Maps AJAX Control SDK. Specifically we will be looking at the REST Search API. We are going to take the HTML and script for the “Filed a location by query” example and massage it to work for our purposes. Basically, we are going to strip out all the HTML and then modify the “findLocation” function to work with an address from a SharePoint List using a bit of… yep… you guessed it jQuery.

When all is said and done we end up with the following Script:

<script type=”text/javascript” src=”../SiteAssets/jquery.min.js”></script>
<script type=”text/javascript”
src=”http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0″></script>

<script type=”text/javascript”>

jQuery(document).ready(function($) {
getMap();
//execute the findLocatin function on page load
findLocation();
});

var map = null;
var query;

function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById(‘myMap’),
{credentials: ‘<GET YOUR OWN CREDENTIALS>’});
}

function findLocation()
{
query= $(“input[title=’Address’]”).val() + ” ” +
$(“input[title=’City’]”).val() + ” ” +
$(“input[title=’State’]”).val() + ” ” +
$(“input[title=’Zip’]”).val();

map.getCredentials(callSearchService);
}
function callSearchService(credentials)
{
var searchRequest = ‘http://dev.virtualearth.net/REST/v1/Locations/’ +
query + ‘?output=json&jsonp=searchServiceCallback&key=’ + credentials;
var mapscript = document.createElement(‘script’);
mapscript.type = ‘text/javascript’;
mapscript.src = searchRequest;
document.getElementById(‘myMap’).appendChild(mapscript)
}

function searchServiceCallback(result)
{
var output = document.getElementById(“output”);
if (output)
{
while (output.hasChildNodes()) {
output.removeChild(output.lastChild);
}
}
var resultsHeader = document.createElement(“h5”);
output.appendChild(resultsHeader);

if (result &&
result.resourceSets &&
result.resourceSets.length > 0 &&
result.resourceSets[0].resources &&
result.resourceSets[0].resources.length > 0)
{
resultsHeader.innerHTML = “Bing Maps REST Search API <br/> Found location ” +
result.resourceSets[0].resources[0].name;
var bbox = result.resourceSets[0].resources[0].bbox;
var viewBoundaries =
Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]),
new Microsoft.Maps.Location(bbox[2], bbox[3]));
map.setView({ bounds: viewBoundaries});
var location =
new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0],
result.resourceSets[0].resources[0].point.coordinates[1]);
var pushpin = new Microsoft.Maps.Pushpin(location);
map.entities.push(pushpin);
}
else
{
if (typeof (response) == ‘undefined’ || response == null)
{
alert(“Invalid credentials or no response”);
}
else
{
if (typeof (response) != ‘undefined’ && response && result && result.errorDetails)
{
resultsHeader.innerHTML = “Message :” + response.errorDetails[0];
}
alert(“No results for the query”);
}
}
}

</script>

<div id=’myMap’ style=”position:relative; width:600px; height:400px;”></div>
<div id=”output”></div>

As you can see, I did very little to modify the way the script works in the example from the Bing Maps API. I just hacked it to work for my purposes. Because why?? Yes… that’s right… I’m lazy…

jQuery

For this demo all we need to know how to do in jQuery is read SharePoint form fields (lines 24-27 in the script above). Luckily, I already have a blog post that walks you through understanding this:

A Dummies Guide to SharePoint and jQuery–Getting & Setting SharePoint Form Fields

SharePoint

In SharePoint we are going to create a list called “Offices”. This list will contain the fields “Address”. “City”, “State”, and “Zip”. These are the fields we will send to the Bing Maps API so it knows which address to display in a map.

Then all we need to do is create a page in SharePoint and put all the pieces together. I’ll actually show you all of this in action in the video below, but the breakdown of the steps for those of you taking notes is:

  1. Create a Web Part Page
  2. Add the List View for “Offices” on the page
  3. Open the page up in SharePoint Designer and put an Edit Form Web Part for Offices on the page
  4. Make sure the Edit Form Web Part has the fields Address, City, State, and Zip. This is the form that the script will use to read the Address fields.
  5. Create a Web Part Connection between the Offices List and the Office Edit Form Web Part. This will enable us to click on one specific office to populate the edit form.
  6. Add the above Script to the page. I’ll be doing this by linking to the script in a Content Editor Web Part.
  7. Hide the Edit Form Web Part

And that’s all there is to it!  So, without further ado, here’s the demo in action:

Integrating Bing Maps with a SharePoint List

Conclusion

Hopefully you can see some real world use for a simple solution like this. I’ve barely scratched the surface with the Bing Maps API and do look forward to having some time to see how else I can integrate it into SharePoint.

Were there other ways to make this functionality work?? Absolutely! Many probably. I didn’t HAVE to use the Edit Form Web Part, I could have written more jQuery to read the address directly from the List View when a user clicked on a row for instance. However, as a practitioner of the KISS principle this approach provided the functionality with the least amount of script and effort.

I know that my buddy Tom Resing (@resing) has done quite a bit with Bing Maps and SharePoint, so you might want to check out his blog for some of the magic he’s done: http://tomresing.com In fact I wouldn’t be surprised if he’s blogged something similar… hopefully not TOO similar. Smile

Anyway, I hope you learned something, if you didn’t, feel free to leave a comment and teach me a thing or two… Believe me, there’s a lot I don’t know.  As always, thanks for stopping by.