Load locations from two-dimensional array into bMap (a google maps for jQuery plugin)

I am using bMap jQuery plugin to ease up the process of working with Google Maps on my site. The way to load markers to the GoogleMap is using the following method.

$('#map').data('bMap').insertMarkers({
    "name":"Markers",
       "data":[
        {
         "lat":51.49757618329838,
         "lng":-0.1746654510498047, 
         "title":"Science Museum", 
         "body":"Exhibition Road, London SW7"
        },{
         "lat":51.47769451182406,
         "lng":-0.0009441375732421875, 
         "title":"Royal Observatory Greenwich", 
         "body":"Blackheath Ave, Greenwich, London SE10"
        } 
       ]
      });

However, I am load the locations from an array like this:

MultiArray = new Array(2)    
MultiArray [0] = new Array(4)    
MultiArray [0][0] = "51.3149757618329838"    
MultiArray [0][1] = "-0.1249757618329838"    
MultiArray [0][2] = "Science Museum"    
MultiArray [0][3] = "Exhibition Road, London SW7"

MultiArray [1] = new Array(4)    
MultiArray [1][0] = "51.47769451182406"   
MultiArray [1][1] = "-0.0009441375732421875"    
MultiArray [1][2] = "Royal Observatory Greenwich"    
MultiArray [1][3] = "Blackheath Ave, Greenwich, London SE10"

MultiArray [2] = new Array(4)    
MultiArray [2][0] = "52.4756451182406"   
MultiArray [2][1] = "-0.0009441323532421875"    
MultiArray [2][2] = "Broadwalk College"    
MultiArray [2][3] = "Springfield Ave, Greenwich, London SE10"

As in, If the array has 10 items, all 10 items to the map. This might be a generic javascript question. But I've been misled down the JSON path in this, so I would like to know if there is another way.

Is there any way to do this? I know if I use php, and read the locations of the database, I can generate such javascript on the fly. But I don't have this luxury. I have an javascript variable thats an array of locations that I would like to load into the map using the first function.

Answers


this is completely possible. Instead of using your MultiArray and individually added array elements I've just added a function to add to the array (instead of manually adding [0][1] etc.)

Untested as usual, hope it helps!

//global mapData variable
var mapData = [];

//example function to add a location to mapData
function addLocation(lat,lng,title,body){
    //push the new Object
    mapData.push({
        'lat':lat,
        'lng':lng,
        'title':title,
        'body':body
    });
}

//example function to actually call your insertMarkers jQuery
function insertMarkers(){
    $('#map').data('bMap').insertMarkers({
    "name":"Markers",
    "data": mapData
    });
}

//example, add a location to mapData 
addLocation("51.3149757618329838",
    "-0.1249757618329838",
    "Science Museum",
    "Exhibition Road, London SW7"
    );
//example, add another location to mapData 
addLocation("51.47769451182406",
    "-0.0009441375732421875",   
    "Royal Observatory Greenwich",
    "Blackheath Ave, Greenwich, London SE10"
    );

//example, call the insertMarkers function (or just replace with your 
//own insertMarkers using the mapData object.
insertMarkers();

Since you specifically asked though how to translate your two dimensional array into the data that you want to provide to your map function, here ya go.

//Your array
var MultiArray = new Array(2)    
MultiArray [0] = new Array(4)    
MultiArray [0][0] = "51.3149757618329838"    
MultiArray [0][1] = "-0.1249757618329838"    
MultiArray [0][2] = "Science Museum"    
MultiArray [0][3] = "Exhibition Road, London SW7"

// how to loop and just use the insertLocation function
// provided above
// I really don't recommend this, if you can output the array directly
// you might as well just use the "addLocation" function (or your own variety)
// directly
for(var i = 0; i<MultiArray.length; i++){
    addLocation(
       MultiArray[i][0],
       MultiArray[i][1],
       MultiArray[i][2],
       MultiArray[i][3]
    );
}

Additionally you could avoid all the nonsense and do this (I don't really like it and tend to want to encapsulate stuff like this in a function.)

var MultiArray = [];
MultiArray.push({
    "lat": "51.3149757618329838",
    "lng": "-0.1249757618329838",
    "title": "Science Museum",
    "body": "Exhibition Road, London SW7"
});

$('#map').data('bMap').insertMarkers({
    "name":"Markers",
    "data": MultiArray
    });

Need Your Help

Multiple NSArray enumeration

objective-c arrays nsarray enumeration

Let's say I have three arrays of same size. I have to do something with all objects. If I would use a standard C array, I would write something like

Implement a ThreadPool which can call functions with multiple arguments in C++

c# c++ multithreading delegates

I've wrote a ThreadPool implementation in C# and now I would like to port it into standard C++ (with boost if possible). The original C# version can call functions with multiple arguments using

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.