none
Putting pushpins into the entity collection RRS feed

  • Question

  • I have a map loading on a page that is getting locations from my database. There can be more than one location being returned from the database. I am looping through the DOM to get locations and then I'm trying to put them into the Entity collection in order to put pushpins  and info-boxes on my map. When I look in the debugger, I see that my array is getting filled with my values, but, when I try to put them into the Entity collection I'm running into problems. I keep getting an error that map.entities.push(pins); is undefined. I have to mention that I am reloading this map after a postback. Do I need to clear the map first before I load the pushpins? Can anyone give me some direction? Here is my code, I am getting my values from a DatList. Thank you.

    function AddData() {
    
        var locationAry = [];
        var pins = null;
        var boxes = new Array();
        var centerLocations;
        var title;
        var Description;
    
        //Use the jQuery .each() function to get each item
        $("td.locationDetails").each(function (i, elem) {
            var liListContent = {};
            liListContent.centerName = $(this).find(".hcName").html();
            liListContent.centeraddress = $(this).find(".address").html();
            liListContent.centerCity = $(this).find(".city").html();
            liListContent.centerState = $(this).find(".state").html();
            liListContent.centerZip = $(this).find(".zip").html();
            liListContent.centerPhone = $(this).find(".phone").html();
            liListContent.centerDistance = $(this).find(".distance").html();
            liListContent.centerId = $(this).find(".locationId").html();
            liListContent.centerLatitude = $(this).find(".lat").html();
            liListContent.centerLongitude = $(this).find(".lng").html();
            locationAry[i] = liListContent;
        });
        for (var i = 0; i < locationAry.length; i++) {
    
            for (var prop in locationAry[i]) {
                //alert("prop: " + prop + " value: " + locationAry[i][prop]);
                pins = new Microsoft.Maps.EntityCollection();
                title = locationAry[i].centerName;
                var address = locationAry[i].centeraddress;
                var city = locationAry[i].centerCity;
                var state = locationAry[i].centerState;
                var zip = locationAry[i].centerZip;
                var phone = locationAry[i].centerPhone;
                var distance = locationAry[i].centerDistance;
                //var latitude = locationAry[i].centerLatitude;
                //var longitude = locationAry[i].centerLongitude;
                var pinLocations = new Microsoft.Maps.Location(locationAry[i].centerLatitude, locationAry[i].centerLongitude);
                //centerLocations = new Microsoft.Maps.Location(latitude, longitude);
                description = locationAry[i].centeraddress + '<br/>' + locationAry[i].centerCity + '<br/>' +
                 locationAry[i].centerState + '<br/>' + locationAry[i].centerPhone + '<br/>' + locationAry[i].centerDistance;
    
    
                
                var pin = new Microsoft.Maps.Pushpin(pinLocations);
                pins.push(pin);
                //var myInfobox = new Microsoft.Maps.Infobox(centerLocations, infoboxOptions);
                map.entities.push(pins);
            }
        }
    }


    I did not include the infoboxes code because I have that commented out, since I am trying to break it down into small pieces to debug it.

    mark a fisher



    • Edited by MarkF67 Tuesday, June 4, 2013 3:04 PM
    Tuesday, June 4, 2013 1:07 PM

Answers

  • Several things to test. First put a break point in the JavaScript when adding the pin to the map. Check to see if the map is null or not. If it is then the post back is not reloading the map. Generally you should avoid reloading the full page and use AJAX based calls to load in data. Try using a ScriptManager and/or an UpdatePanel.

    If the map is not null then verify that the centerLatitude & centerLongitude values are both valid numbers. Ensure that they are numbers and not string values of numbers. If they are strings then wrap them with parseFloat method calls to convert the strings to numbers.

    Finally, when you do add infoboxes I suggest you follow the pattern I describe in this blog post: http://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/


    http://rbrundritt.wordpress.com

    Tuesday, June 4, 2013 2:24 PM

All replies

  • Several things to test. First put a break point in the JavaScript when adding the pin to the map. Check to see if the map is null or not. If it is then the post back is not reloading the map. Generally you should avoid reloading the full page and use AJAX based calls to load in data. Try using a ScriptManager and/or an UpdatePanel.

    If the map is not null then verify that the centerLatitude & centerLongitude values are both valid numbers. Ensure that they are numbers and not string values of numbers. If they are strings then wrap them with parseFloat method calls to convert the strings to numbers.

    Finally, when you do add infoboxes I suggest you follow the pattern I describe in this blog post: http://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/


    http://rbrundritt.wordpress.com

    Tuesday, June 4, 2013 2:24 PM
  • I'm not familiar with using AJAX to load data. I am using this script below to call my javascript function, because I want to make sure the DOM is loaded first so that I can get the lat/long values from my data:

    Page.ClientScript.RegisterStartupScript(this.GetType(), "GetResultsMap", "<script language='javascript'> document.addEventListener('DOMContentLoaded', GetResultsMap, false); </script>");//load results map

    I also made sure that my values are parsed:

     var latitude = parseFloat(locationAry[i].centerLatitude);
            var longitude = parseFloat(locationAry[i].centerLongitude);
            var pinLocations = new Microsoft.Maps.Location(parseFloat(locationAry[i].centerLatitude), parseFloat(locationAry[i].centerLongitude));

    You are saying to put a break here correct:

     map.entities.push(dataLayer);
    When I do this, my map is not null, the map is showing {...} and when I click on the + there are a bunch of function names in there.


    mark a fisher

    Tuesday, June 4, 2013 3:04 PM
  • Richard,

    The pin is showing up. But, the problem is, the view is a "world view". I have to zoom in to see my location. How can I set the view boundries? Can you direct me?

    Also, can I loop through a bunch of locations this way to add a pin for each?

     var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(parseFloat(locationAry[i].centerLatitude), parseFloat(locationAry[i].centerLongitude)); 
    for (p = 0; p < pin1.length; p++) {
            p.Title = title;
            p.Description = description;
            Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
            dataLayer.push(p);
               }


    mark a fisher

    Tuesday, June 4, 2013 3:17 PM