Question

I am passing a string into a hidden field on the page and then splitting it in order to try to get an array of items I can iterate over and add multiple markers onto a google map. If I hard code the array it works fine, but if I try to split the string and use the same code it does not work. I’m assuming because splitting the string creates a string array instead of Array objects. When I split the string the array ends up with “[‘Smith Company’, 33.61678, -111.90017]” with the double quotes around it. How would I convert these items so that I can use it the same as the hard coded values?

I add the square brackets, single quotes and vert bar in a StringBuilder in the code behind. Using C# for that if it will make a difference. I am not married to doing it this way, but still green with JavaScript so this was my initial solution. My initial string looks like this”

"['Jones Company', 26.16683, -98.23342]|['Smith Company', 33.61678, -111.90017]|['Bob Company', 29.70008, -98.03347]|['Blue Company', 37.71675, -122.21672]|['Red Company', 42.46692, -114.48342]"

Thanks.

function initialize() {
        var myOptions = {
            zoom: 4,
            center: new google.maps.LatLng(26.16683, -98.23342),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        //What I try to use when the hard coded is commented out
        var myString = document.getElementById('hdnString').value;
        var myItems = new Array();
        myItems = myString.split("|");

        //Hard coded items that I comment out when trying the above
        var myItems = [
            ['Jones Company', 26.16683, -98.23342],
            ['Smith Company', 33.61678, -111.90017],
            ['Bob Company', 37.71675, -122.21672],
            ['Blue Company', 42.46692, -114.48342],
            ['Red Company', 36.58339, -121.8335]
        ];

            // Add markers to the map
            for (var i in myItems){
                var myLatLng = new google.maps.LatLng(myItems[i][1], myItems[i][2]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: myItems[i][0]
                });
            }
        }

Answer 1

You’re going to have to use eval() to convert the string representations of arrays to actual javascript arrays.

This code ought to work:

var myString = document.getElementById('hdnString').value;
var myItems = [];
var rawItems = myString.split("|");

for (var i=0; i<rawItems.length; i++){
    myItems.push(eval(rawItems[i]));
}

Do note that eval is evil except when it’s not.