Google Maps, array + GLatLng + GPolyline

Question

Hi!

I am using the following code to group and show a list of ship positions on a map:

function configure_ship_polylines() {

    var shipPoints = new Array();

    // Group positions by ship
    for (var ScenarioPositionID in __data['scenarioPositions']) {

        var scenarioPosition = __data['scenarioPositions'][ScenarioPositionID];
        var key = "ShipID_" + scenarioPosition.ShipID;

        // Initialize if necessary
        if (shipPoints[key] == null) {
            shipPoints[key] = new Array();
        }

        var latLong = new GLatLng(scenarioPosition.Latitude, scenarioPosition.Longitude);

        // Append coordinates
        shipPoints[key].push(latLong);
    }


    // Loop through the grouped coordinates and add to map
    for (var key in shipPoints) {

        var points = shipPoints[key];
        var ShipID = key.substring(7);

        // Only add polygons with points.length > 1
        if (points.length > 1) {

            var shipPolyline = new GPolyline(points);

            //alert("Adding polyline: " + shipPolyline + " for ship: " + ShipID + " " + points + " " + typeof points);

            __mapItems['shipPolylines'][key] = shipPolyline;

            __map.addOverlay(shipPolyline);

        }
    }
}

What happens is that only one of the polylines are displayed on the map. The rest are invisible or aren't added at all (I'm not quite sure how to debug google maps to find out). I have used firebug extensively over and over again to debug this, but everything seems fine.

If I create polylines manually I can add them to the map and everything works fine. If I create markers on each point instead of polylines then the markers display fine at the correct places.

I'm getting kinda pissed at this because I have almost spent a full work day trying to figure out what the hell is going on. Any ideas?

Answer 1

Have you tried looking at the javascript error console (ctrl + shift + j in Firefox)? One thing I noticed is that you are using a for-in loop to iterate through the array, which is typically not done in javascript. If you are using a javascript library that alters the Array.prototype, the for-in loop will break (use an index to iterate through).

Have you also tried to call the polyline.show() method after adding the overlay?

Answer 2

It might be something to do with all the polylines being based on the variable shipPolyline, and for some reason all referring to the same initial data. Try this for the second loop:

// Loop through the grouped coordinates and add to map
for (var key in shipPoints) {

    var points = shipPoints[key];
    var ShipID = key.substring(7);

    // Only add polygons with points.length > 1
    if (points.length > 1) {

        //alert("Adding polyline: " + shipPolyline + " for ship: " + ShipID + " " + points + " " + typeof points);

        __mapItems['shipPolylines'][key] = new GPolyline(points);

        __map.addOverlay(__mapItems['shipPolylines'][key]);

    }

Answer 3

It appears that the 'Key' you are using to index an array is non numeric. See if following changes help:

// var shipPoints = new Array( );
// should become
var shipPoints = { };

// if ( shipPoints[key] == null )
// should become
if ( typeof shipPoints[ key ] == 'undefined' )

Answer 4

From your code, it looks like you add one GLatLng per shipPoints[key], so you never create enough points to make a line. In your first loop, you do:

shipPoints[key].push(latLong);

In your second loop you do

// points is a latlong
var points = shipPoints[key];
// create a polyline using one latlng
var shipPolyline = new GPolyline(points);
// add polyline to map
__map.addOverlay(shipPolyline);

If your goal, however, is to make a single polyline out of all the points, you need to create an array of many GLatLngs and then create one GPolyline after your loop ends. Then add that single polyline to the map.

By the way, you could do the whole thing in one loop.