CODEWITHSUNDEEP
javascriptgoogle-maps
Liam Richardson
Liam Richardson

Reputation: 151

Google Maps - Creating multiple markers

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
                    });

    }
  }

Upvotes: 2

Views: 2903

Answers (2)

adeneo
adeneo

Reputation: 318332

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(','));

Upvotes: 2

geocodezip
geocodezip

Reputation: 161384

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
        });

    }
  }
}

Upvotes: 4

Related Questions