Skip Ribbon Commands
Skip to main content

:

> Posts > Integrating SharePoint and Bing Maps
June 22
Integrating SharePoint and Bing Maps

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:

   1:  <script type="text/javascript" src="../SiteAssets/jquery.min.js"></script>
   2:  <script type="text/javascript" 
   3:      src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
   4:   
   5:  <script type="text/javascript">
   6:   
   7:      jQuery(document).ready(function($) {
   8:          getMap();
   9:          //execute the findLocatin function on page load
  10:          findLocation();
  11:      });
  12:   
  13:      var map = null;
  14:      var query;      
  15:      
  16:      function getMap()
  17:      {
  18:          map = new Microsoft.Maps.Map(document.getElementById('myMap'), 
  19:          {credentials: '<GET YOUR OWN CREDENTIALS>'});
  20:      }
  21:        
  22:      function findLocation()
  23:      {        
  24:          query=    $("input[title='Address']").val() + " " + 
  25:                  $("input[title='City']").val() + " " + 
  26:                  $("input[title='State']").val() + " " + 
  27:                  $("input[title='Zip']").val(); 
  28:              
  29:          map.getCredentials(callSearchService);  
  30:      }
  31:   
  32:      function callSearchService(credentials) 
  33:      {
  34:          var searchRequest = 'http://dev.virtualearth.net/REST/v1/Locations/' + 
  35:              query + '?output=json&jsonp=searchServiceCallback&key=' + credentials;
  36:          var mapscript = document.createElement('script'); 
  37:          mapscript.type = 'text/javascript'; 
  38:          mapscript.src = searchRequest; 
  39:          document.getElementById('myMap').appendChild(mapscript) 
  40:      }
  41:   
  42:      function searchServiceCallback(result)
  43:      {
  44:        var output = document.getElementById("output");
  45:        if (output)
  46:        {
  47:            while (output.hasChildNodes()) {
  48:                output.removeChild(output.lastChild); 
  49:            }   
  50:        }
  51:        var resultsHeader = document.createElement("h5");
  52:        output.appendChild(resultsHeader);
  53:        
  54:        if (result &&
  55:        result.resourceSets &&
  56:        result.resourceSets.length > 0 &&
  57:        result.resourceSets[0].resources &&
  58:        result.resourceSets[0].resources.length > 0) 
  59:        {
  60:            resultsHeader.innerHTML = "Bing Maps REST Search API  <br/>  Found location " + 
  61:                result.resourceSets[0].resources[0].name;
  62:            var bbox = result.resourceSets[0].resources[0].bbox;
  63:            var viewBoundaries = 
  64:                Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), 
  65:                new Microsoft.Maps.Location(bbox[2], bbox[3]));
  66:            map.setView({ bounds: viewBoundaries});
  67:            var location = 
  68:                new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], 
  69:                result.resourceSets[0].resources[0].point.coordinates[1]);
  70:            var pushpin = new Microsoft.Maps.Pushpin(location);
  71:            map.entities.push(pushpin);
  72:        }
  73:        else
  74:        {
  75:            if (typeof (response) == 'undefined' || response == null)
  76:            {
  77:                alert("Invalid credentials or no response");
  78:            }
  79:            else 
  80:            {
  81:                if (typeof (response) != 'undefined' && response && result && result.errorDetails)
  82:                {
  83:                    resultsHeader.innerHTML = "Message :"  + response.errorDetails[0];
  84:                }
  85:                    alert("No results for the query");
  86:            }
  87:        }
  88:      } 
  89:   
  90:  </script>
  91:   
  92:  <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
  93:  <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. 

Comments

Excellent post

Great post. I be sure to pass this around.
 on 6/27/2012 5:39 AM

Great post Mark and the video was very helpful

Good stuff dude
 on 6/27/2012 11:32 AM

Maps and SharePoint on TomResing.com

Mark,

Thanks for another great SharePoint Mapping article and the shoutout to my series.

The latest I wrote was about incorporating your jQuery into the 1st demo in my presentations:
http://tomresing.com/blog/Lists/Posts/Post.aspx?ID=40

You can see a revision of your jQuery for filling in the address fields from a map click at: http://sasug.net/sasug

-Tom
 on 7/30/2012 1:37 PM

Followed all steps but don't see the map ...

Mark,
Great post! Have followed all of your steps and all works but when I added the CEWP and linked to BingMapDemo.js but the map doesn't show at all.  I've checked the code and can't see anything wrong.  Any ideas?
Nicola
 on 12/31/2012 4:33 PM

hmmmmm....

Hey Nicola,
Did you figure out your problem yet? Sounds like you may not be linking to the script properly in the CEWP, you should at least be seeing a map even if it doesn't show the address you desire in it. Double check that, making sure to test the link to ensure it's correct. I know I fat finger that all the time, or forget part of the path.
Good luck!
Mark
EMS\markrackleyNo presence information on 1/10/2013 8:49 AM

Thank you!

Your solution is working wonderful for me.  It met a specific requirement that most other solutions i.e. Silverlight would have complicated. I was able to substitute decimal degrees for the address and it worked perfect as well as increasing the zoom level ... the Ajax 7.0 is great. 
Would you be willing to help connecting the map to a list and displaying all list items at once? Similar to the Bing app in Excel but with my own custom fields. There was a post from Bing recently about this: http://www.bing.com/blogs/site_blogs/b/maps/archive/2013/03/26/connecting-a-sharepoint-list-to-bing-maps.aspx
this code referenced sp.js ... which does not get passed in an SharePoint Online - any suggestions?
 on 4/2/2013 5:58 PM

SharePoint Architect, Developer, Blogger, Speaker, Author, and general pain in the butt.
 
Thoughts, views, and opinions expressed in this blog are solely my own.
 
Remember, the Impossible just takes longer.
​​​​
 

 Blogs you should be reading