The map is rendering and debugging in IEf12 does not show any error with loading the list. I am using a CEWP referencing this file - SharePoint Online (Office 365). What's wrong with this code?

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<script type="text/javascript">
    var map, infobox, dataLayer, listItems, listTitle;

    function getMap()
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'MyBingMapsKey'

        dataLayer = new Microsoft.Maps.EntityCollection();

        var infoboxLayer = new Microsoft.Maps.EntityCollection();

        infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { 
                    visible: false, 
                    offset: new Microsoft.Maps.Point(0, 20) 

        listTitle = getQueryStringValue('MapData');


    function loadList(){

    function getListItems(listTitle){
        var context = new SP.ClientContext.get_current();
        var targetlist = context.get_web().get_lists().getByTitle(listTitle);
        var query = SP.CamlQuery.createAllItemsQuery();

        listItems = targetList.getItems(query);

        context.executeQueryAsync(onLoadItemsSuccess, onLoadItemsFail);

    function onLoadItemsFail(sender, args) {
        alert('Failed to get lists items. Error:' + args.get_message());

    function onLoadItemsSuccess(sender, args) {
        var listEnumerator = listItems.getEnumerator();

        var item, pin, loc;
        while (listEnumerator.moveNext())  {
            item = listEnumerator.get_current();
            loc = new Microsoft.Maps.Location(item.get_item('Latitude'), item.get_item('Longitude'));
            pin = new Microsoft.Maps.Pushpin(loc);
            pin.Metadata = {
                Title : item.get_item('Title'),
                Location : item.get_item('City')
            Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);


    function displayInfobox(e) {
        if (e.targetType == 'pushpin') {
                visible: true, 
                title: e.target.Metadata.Title, 
                description: e.target.Metadata.Location 

    function getQueryStringValue(key) {
        var queryString = document.URL.split("?");
        if(queryString && queryString.length > 1)
            var params = queryString[1].split("&");

            for (var i = 0; i < params.length; i = i + 1) {
                var value = params[i].split("=");
                if (value[0] == key){
                    return value[1];

        return null;
onload = getMap;

<div id='myMap' style="position:relative; width:900px; height:600px;"></div> 
<div id="output"></div>
  • Do you get any items from list? Do they have proper coordinates? Are coordinates in correct format (50.0000 vs. 50°4'11.341"N)?
    – luccio
    Apr 3, 2013 at 17:28
  • luccio .. I am not getting any results .. the coordinates are decimal degrees NOT Degree, Minute, Second.
    – Greg
    Apr 4, 2013 at 17:41

1 Answer 1

  1. Page load in SharePoint

    For SharePoint pages you can’t directly add a function to the body’s onload event (more info)

    So, this line

    onload = getMap;

    should be replaced to this one:

  2. Referencing undefined object targetList (typo error)

    In line

    listItems = targetList.getItems(query);

    there is the reference to targetList, which is always returns undefined value.

    So, I believe it should be like this:

    listItems = targetlist.getItems(query);

How to load Bing Map using CEWP

In order to load Bing Map for the code sample presented here follow these steps:

  1. Create Custom List and add the following new fields to the List:

    Latitude (Number), Longitude (Number), City (Note)

  2. Save JavaScript (source) and Html(source) code for maps into separate files and place them, for example in Documents library

  3. In CEWP specify path to Html file using Content Link property, for example /Geo/Shared Documents/NokiaStoresMap.htm

Note: For some reason function loadList is never being executed in my case. The workaround was to load explicitly SP.js, so the line


should be replaced with this one:



The list title should be passed via url, for example to display information from list titled NokiaStores the following url is used:

  • Thank you, Vadim. The pushpin's are still not rendering, Map runs fine - something with accessing and load the list isn't right. I based this solution from recent bing blog bing.com/blogs/site_blogs/b/maps/archive/2013/03/26/… - which does not work inside a page viewer web part. I modified to a .js and edited the script.
    – Greg
    Apr 4, 2013 at 1:16
  • Greg, the answer has been updated with information about usage of specified code sample with CEWP. Apr 6, 2013 at 19:27
  • Vadim, Thank you! I don't understand passed via url - do you customize the URL of the page the CEWP is part of to get this functionality?
    – Greg
    Apr 8, 2013 at 13:02
  • Greg, exactly, list title is retrieved from query string and therefore it should be appended for the page where CEWP is hosted: ?MapData={ListTitle} Apr 8, 2013 at 18:38
  • 1
    Worked!!!! You rock, Vadim! Thankyou so much!
    – Greg
    Apr 9, 2013 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.