Add Polylines inside a loop?

[Canam Group]

Hi,

I'm in the process of migrating our Map application from V2 to V3 (3.2).
Sorry, I can't post a link to our map cause we use it internally (don't worry, we paid for this).

I had a loop that read LatLng and put them in a array to display as a Polyline on the map.
I then set the length of my array to 0 and then fill it again in the loop with other LatLng to display another Polyline... and so on (many times).

It was working fine in V2, but not in V3.
Since my code is complex, I tried to write the simpliest code possible to demonstrate my issue:

function setPolyline(points) {
    var polyline = new google.maps.Polyline({
        path: points,
        strokeColor: '#FF0000',
        strokeOpacity: 0.5,
        strokeWeight: 2
    });
    polyline.setMap(map);
 }

var mapDiv = document.getElementById('map');
var mapCenter = new google.maps.LatLng(0,0);
var mapOptions = {
    zoom: 2,
    center: mapCenter,
    backgroundColor: '#E1E1E1',
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, mapOptions);

var points=[];   
points[0]=new google.maps.LatLng(-35, 71);
points[1]=new google.maps.LatLng(-36, 75);
points[2]=new google.maps.LatLng(-37, 91);
setPolyline(points);

points.length=0;
points[0]=new google.maps.LatLng(-31, 71);
points[1]=new google.maps.LatLng(-32, 75);       
setPolyline(points);

What happens is that only the second Polyline is shown (and not the first one).
To make it works, I have to either use a different variable name (points1, points2, points3, ...) which I can't use because my code is normally in a loop or re-declare my variable each time in the loop instead of before it (var points=[] before each Polyline and remove the points.length=0 line).

Maybe I'm missing something about JavaScript, but I usually declare my variable outside the loop (before) once and use it inside the loop.

What am I doing wrong?
Can someone help?

Thanks!

[geoco...@gmail.com]

On Nov 12, 6:34 am, Canam Group <canamgr...@gmail.com> wrote:
> Hi,
>
> I'm in the process of migrating our Map application from V2 to
> V3 (3.2). Sorry, I can't post a link to our map cause we use it
> internally (don't worry, we paid for this).

That doesn't mean you can't find public (possibly even free) hosting
and put a map there that exhibits the problem.

Not without a link. I can create many polylines in a loop, here is an
example with three:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_tennis-lines_highlight.html

-- Larry


>
> Thanks!

[Canam Group]

Hi Larry,

I can't put the complete map application on a public web site cause It contains confidential data (and it has many relations with in-house applications).
However, I put the simple example I posted above here:
http://www.canamgroup.ws/GM.nsf/Map?OpenPage

It's not in a loop, but the issue is the same. Only the last Polyline is displayed if I don't use a different variable name for my array or if I don't re-declare it each time..

I'll take a look at your example.

Thanks a lot for your help, and sorry for the link.

[Canam Group]

Any idea why my simple example doesn't behave like I thought it should be?

Thanks!

[geoco...@gmail.com]

On Nov 15, 7:24 am, Canam Group <canamgr...@gmail.com> wrote:
> Any idea why my simple example doesn't behave like I thought it should
> be?

Not off hand. FYI - it doesn't show anything on the map in IE6, which
is the only browser I have easily available because this line
generates an error:

map = new google.maps.Map(mapDiv, mapOptions);

(I assume that you didn't ever create the global javascript "map"
variable, and IE is trying to use the div with id="map"...)

-- Larry

>
> Thanks!

[Canam Group]

Oops, you're right.  Sorry, I did this small map demo in a hurry.
I am always testing with Firefox and it was working fine.

I just did the change. It should now work in IE too.

[geoco...@gmail.com]

If I replace:
points.length=0;
with
var points=[];
It works. I have never seen the points.length=0 before.

-- Larry

[Canam Group]

I've seen it at many places... including Google Maps API official doc:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#RemovingOverlays

[geoco...@gmail.com]

On Nov 15, 10:28 am, Canam Group <canamgr...@gmail.com> wrote:
> I've seen it at many places... including Google Maps API official doc:http://code.google.com/apis/maps/documentation/javascript/overlays.ht...

I don't use it. But that is just me. I am not going to spend time
figuring out why that works in google's examples and not it your code.

-- Larry

[Canam Group]

I just wanted to show you that Google use this (array.length=0) and that is why I was using that as well.
The Google code doesn't add many polylines in a loop as I'm trying to do... so it's of no help.

Again, I cannot make my very simple example works unless I re-declare my array of polylines each time before adding them to the map.
I don't have this problem with markers.

It almost looks like markers are immediately added to the map, while polylines are added after some delay (asynchronously).

I'm just trying to find out if other people has experienced this.

Thanks.

[geoco...@gmail.com]

I have seen at least one other example posted to this group with a
similar issue, I think it was this one:
http://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/62a64b11019cfa25

I don't see any responses to his thread, but I think when I
investigated I found something similar to what you are experiencing.

-- Larry

>
> Thanks.

[Canam Group]

Yeah, very similar.
Actually, in my application (not the example I provided), when I refresh my map (not the page, but an AJAX call to update markers and polylines), it works the second time (and every time after that). I have the problem only on the first load.

When I reload the whole page, only the last polyline is shown (but all markers are still shown correctly).

[John M Phillips]

The term used is closure (which I do not fully understand), but I had
to wrap
the creation of each polyline inside of a function. See
http://www.jtphillips.com/cgi-bin/AtcInspectionForm.cgi
and the function
addLineWithClosure

Hope this example helps

[geoco...@gmail.com]

On Nov 15, 7:06 pm, John M Phillips <johnm.phillips1...@gmail.com>
wrote:

> The term used is closure (which I do not fully understand),
> but I had to wrap the creation of each polyline inside of a
> function.  

Here is Mike Williams' explanation from his (v2) tutorial:
Javascript Concepts: Function Closure
http://econym.org.uk/gmap/closure.htm

-- Larry

[Canam Group]

John,
I might be wrong, but I don't think it's because you used a function (or closures) that you solved the problem... but because you re-declare your array each time in the loop (inside a function in your example):

function addLineWithClosure(coordinates,i) {
  var points      = coordinates.split(' ',2);
  var p0          = points[0].split(',',3);
  var p1          = points[1].split(',',3);
  var linePos     = new Array();  
  var lineOptions = {  strokeColor: "#FF0000", 
                       strokeOpacity: 1.0, 
                       strokeWeight: 2,
                       zIndex: i
                    };

  linePos[0]  = new google.maps.LatLng(Number(p0[1]),Number(p0[0]));
  linePos[1]  = new google.maps.LatLng(Number(p1[1]),Number(p1[0]));

  var line    = new google.maps.Polyline(lineOptions);
  line.setPath(linePos);
  line.setMap(map);
}

  for (i=0; i < placemarks.length; i++) {
    markName    = placemarks[i].getElementsByTagName("name"       )[0].childNodes[0].nodeValue; 
    coordinates = placemarks[i].getElementsByTagName("coordinates")[0].childNodes[0].nodeValue;
    
    addLineWithClosure(coordinates,i);
  }

You re-declare your array each time in the loop (in your function):
var linePos     = new Array();

It's exactly what I'm experiencing.
If I re-declare my array before adding each polyline (in a loop or not), it works:
var points=[]; 

If I declare my array once, and empty it before using it again:
points.length=0;

It doesn't work the first time... but it works every time after (if just the polylines are reloaded and not the whole page).
I think we are experiencing the same issue (and I've found other people on the web with that problem as well).

Now, until I find a better solution, I re-declare my array each time in the loop (or I could use a function like you that create a new array every time) but I still don't understand why it behaves like this with polylines and not with markers...

Larry,
Mike Williams' tutorials helped me a lot when I was designing my application with v2 last year.
I hope he'll do the same with v3 :)

Thanks to both of you!

[geoco...@gmail.com]

He posted a message to one of the groups the said his take is that
Google's tutorials and examples cover everything a tutorial from him
would cover (my words, you can probably find the thread if you
search).

I know that I am still pointing people to his v2 tutorial for help
solving problems in v3 (like the dreaded pitfall #3, solved by
function closure) and his "Javascript Concepts" pages.

-- Larry

[Ben Appleton]

Hi,

The issue is that Polyline takes a reference to your points array, but you reuse the points array in both Polylines. The result is that 2 identical polylines are rendered on top of each other. Instead if you replace

    points.length = 0;  // Clobber the first array

with

    points = []; // Create a new array

your code will work as you expect.

Ben

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[John M Phillips]

I stand corrected. The extra functional layer was not necessary. See
the
revised code at http://www.jtphillips.com/cgi-bin/AtcInspectionForm.cgi
(you have to select a state and apply to see the code).

More details
line[] is an array of Polylines
linePos is an array of coordinates, created and then deleted for
each instance of line[i].

[Canam Group]

Larry,
Google Tutorials are very nice indeed, but they cover only the basics. For example, their Polyline example only display one polyline (no loop).
I'm sure Mike Williams' tutorials in V3 would still be very useful... but I can understand his decision.

John,
Thanks for confirming my theory... and thanks for your example.

Ben,
Thanks for confirming that I absolutely need to create a new array each time for each polyline.
That's what I discovered in my tests.
I would appreciate if you could explain me this in more details:

"The issue is that Polyline takes a reference to your points array,"

Could you give me some more details about how Polylines are added to a map.

I don't understand why it displayed one polyline the first time (many polylines but the same one on top of each other) and If I reloaded the polylines a second time (using AJAX), then it worked as expected.

In V2, I didn't have to create a brand new array each time.  Was it because there were no reference between a Polyline and the array in that release, but in V3, they are tied together?

I know what to do to solve the problem, I'm just trying to understand how all this works.

Thanks everybody!

[geoco...@gmail.com]

On Nov 19, 8:33 am, Canam Group <canamgr...@gmail.com> wrote:
> Larry,
> Google Tutorials are very nice indeed, but they cover only the basics.
> For example, their Polyline example only display one polyline (no loop).
> I'm sure Mike Williams' tutorials in V3 would still be very useful...
> but I can understand his decision.

I can as well. I have ported some of his examples to v3 as part of
learning this version of the API and have posted them for others to
see (they are not particularly pretty, but they do work).

http://www.geocodezip.com

-- Larry

[Rossko]

> "The issue is that Polyline takes a reference to your points array,"

I'll point to the famous tutorial again ...
http://econym.org.uk/gmap/byreference.htm

[Canam Group]

Larry,
Thanks for the link!

Rossko,
My point was that with the Google Maps API v2, my code was working.
The way Polylines are added to the map must have changed in v3... this is what I was trying to understand.

[bratliff]

The API retains its own reference to your MVC array for two rather
unlikely occurrances. You change projection with a different map.
You edit poly points interactively. It adds a lot of overhead if you
are doing neither.

You might find PolyCluster useful:

http://www.polylib.us

The V2 & V3 code is essentially the same.

[Yogalakshmi J]

Dear All,

This thread was very useful. I was also having similar problem. Once I declared a function and moved the rendering of polyline to the function and used local variable, all my routes were rendered with appropriate colour.

Thanks,

Yogalakshmi.