Google Maps - Creating multiple markers

Question

I'm having a bit of trouble trying to loop out multiple markers onto a map using information stored in an array.

The code creates the map no problem, but it's not displaying the markers I'm trying to loop out...

As you can see from the code below, there are two functions that are creating markers. The first is simply using two values. This marker displays fine.

The second function however, is grabbing the data from an array (the array has been set up to "squish" the latitude and longitude data together, in that order, as Google Maps requires it to be) and does not display anything when run.

Any ideas? I'm stumped!

Thanks in advance!

Here's the code:

Initial "locations" array:

var locations = new Array();

for (var i = 0; i < data.length; i++)
        {
        var row = data[i];   

        var longitude = row[0];
        var latitude = row[1];

        locations[i] = latitude + longitude;
        }

callMap(locations, locationFilename, userLatitude, userLongitude);

Google Maps Functions

    function callMap(locations, locationFilename, userLatitude, userLongitude) {

 var mapOptions = {
      zoom:16,
      center: new google.maps.LatLng(userLatitude, userLongitude),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('mapView'),mapOptions);

    setMarkers(map, locations, locationFilename);
    currentPosition(map, userLatitude, userLongitude);
  }

  function currentPosition(map, userLatitude, userLongitude)
  {

  var userLatLng = new google.maps.LatLng(userLatitude, userLongitude);

    var marker = new google.maps.Marker({
        position: userLatLng,
        map: map
            });

  }

  function setMarkers(map, locations, locationFilename) {

    for (var i = 0; i < locations.length; i++) {

    var markerLatLng = new google.maps.LatLng(locations[i]);

            var marker = new google.maps.Marker({
                position: markerLatLng,
                map: map
                    });

    }
  }

Answer 1

A google.maps.LatLng takes two numbers for arguments.

This is not correct:

var markerLatLng = new google.maps.LatLng(locations[i]);

This should work:

for (var i = 0; i < data.length; i++)
    {
    var row = data[i];   

    var longitude = row[0];
    var latitude = row[1];

    locations[i] = new google.maps.LatLng(latitude,longitude);
    }

Then

function setMarkers(map, locations, locationFilename) {

  for (var i = 0; i < locations.length; i++) {

    var markerLatLng = locations[i];

        var marker = new google.maps.Marker({
            position: markerLatLng,
            map: map
        });

    }
  }
}

Answer 2

You're just adding strings together, it needs to be an array:

for (var i = 0; i < data.length; i++) {
    var row = data[i];

    var longitude = row[0];
    var latitude = row[1];

    locations[i] = [latitude, longitude];
}

var markerLatLng = new google.maps.LatLng(locations[i].join(','));