Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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();
        map.entities.push(dataLayer);

        var infoboxLayer = new Microsoft.Maps.EntityCollection();
        map.entities.push(infoboxLayer);

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

        listTitle = getQueryStringValue('MapData');

        if(listTitle){
            ExecuteOrDelayUntilScriptLoaded(loadList,'sp.js');
        }
    }

    function loadList(){
        getListItems(listTitle);            
    }

    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.load(listItems);

        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);
            map.entities.push(pin); 

        }
    }

    function displayInfobox(e) {
        if (e.targetType == 'pushpin') {
            infobox.setLocation(e.target.getLocation());
            infobox.setOptions({ 
                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;

</script>
<div id='myMap' style="position:relative; width:900px; height:600px;"></div> 
<div id="output"></div>
share|improve this question
    
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 '13 at 17:28
    
luccio .. I am not getting any results .. the coordinates are decimal degrees NOT Degree, Minute, Second. –  Greg Apr 4 '13 at 17:41

1 Answer 1

up vote 2 down vote accepted
  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:

    _spBodyOnLoadFunctionNames.push("getMap");
    
  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

ExecuteOrDelayUntilScriptLoaded(loadList,'sp.js');

should be replaced with this one:

LoadSodByKey('sp.js')
ExecuteOrDelayUntilScriptLoaded(loadList,'sp.js');

Usage

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

/Geo/Pages/Default.aspx?MapData=NokiaStores
share|improve this answer
    
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 '13 at 1:16
    
Greg, the answer has been updated with information about usage of specified code sample with CEWP. –  Vadim Gremyachev Apr 6 '13 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 '13 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} –  Vadim Gremyachev Apr 8 '13 at 18:38
    
Worked!!!! You rock, Vadim! Thankyou so much! –  Greg Apr 9 '13 at 14:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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