The immediate cause of your problem is that the 'k' and 'points2' variables
don't have the values you expect when your 'click' listener function runs.
Note the order of execution:
1) When your code first runs, it all runs except for the click listener (or
any other event listeners). Your two big outer loops both run to completion.
GEvent.addListener() is called each time through the second loop, but it
just saves a reference to the click listener function instead of calling it.
Time passes, and eventually the user clicks...
2) Now, the click listener function runs.
What are the values of 'k' and 'points2' in step 2? Whatever they were last
set by that big loop - because that loop ran to completion during step 1.
There's a quick and easy way you could fix this, but I'm not going to tell
you what it is :-) because it would make a complicated piece of code even
more complicated. Instead, you should simplify this code and give it some
proper structure, and then the fix will fall out of just doing things right.
Some problems I saw in the code:
* One big function does two different things. Break it into two or more
functions.
* "Parallel arrays/objects" - several arrays or objects that are all indexed
by the same key - regionPolys, regionBounds, etc. Instead, create a single
array (or object) containing individual objects that have the properties you
need. So you'd have a list of region objects, each of which has properties
like region.polys, region.bounds, etc.
* Confusion between objects {} and arrays []. Don't use "for( key in array
)" on an array, only on an object. Don't use an array when you'll be
accessing it with arbitrary string keys and you don't need the "array-like"
behavior of things like .push(), .length, etc. - use an object instead.
* Not a problem per se, but is the use of XML a requirement? If you have the
option of using JSON for your data instead of XML, you could remove most of
the XML parsing code.
I'll post a specific coding suggestion for you in a bit, but I thought I'd
share those comments first to get you thinking (and find out about the XML
vs. JSON).
Oh - this is the V3 API group, and it looks like you're writing V2 API code,
right? The V2 group would be the place to post V2 API questions. But let's
continue this discussion here since we started here - the problems actually
have nothing to do with the Maps API at all, and you'd have exactly the same
problem with V2 or V3 or indeed ordinary DOM event handlers - so this is as
good a place to discuss it as any. :-)
-Mike
On Mon, May 2, 2011 at 8:27 AM, Robert Knieriem <knierie...@gmail.com>wrote:
> I am trying to assign a click event to each polygon stored in my array so
> that when clicked the map zooms into the bounds of that specific polygon.
> As it stands now, when clicked the map zoomes in to Kansas, which is not
> near any of the polygons in my test file. The polygons display correctly,
> the click event is just not working and I think it has something to do with
> the way I am using the array to store them. Here is the function that reads
> in the XML file and creates the polygons. If you have time please review it
> and let me know if I have a coding error or if I am trying to use polygons
> or the array in a manner that is not supported. Thank you.
>
> function processXML(xmlDoc) {
> if (!xmlDoc) {
> alert("Invalid XML file");
> return;
> }
> var regions = [];
> var regionBounds = [];
> var regionPolys = [];
> var regionTransparentPolys = [];
> var regionLabels = [];
> regions = xmlDoc.documentElement.getElementsByTagName("region");
> for (var i = 0; i < regions.length; i++) {
> var points = [];
> for (var j = 0; j < regions[i].childNodes.length; j++){
> var vertex = new
> GLatLng(parseFloat(regions[i].childNodes[j].getAttribute("lat")),
> parseFloat(regions[i].childNodes[j].getAttribute("lng")));
> points.push(vertex);
> }
> points.push(points[0]);
> var regionID = regions[i].getAttribute("id")
> regionBounds[regionID] = points;
> }
> for (var k in regionBounds){
> if (regionBounds[k].length > 0 ){
> var zone = new GPolygon(regionBounds[k], "#ff0000", 3, 0.5, "#0000ff",
> 0.3, {clickable:true});
> var zoneTransparent = new GPolygon(regionBounds[k], "#ff0000", 3, 0.5,
> "#0000ff", 0.0, {clickable:false});
> regionPolys[k] = zone;
> regionTransparentPolys[k] = zoneTransparent;
> map.addOverlay(regionPolys[k]);
> var labelAnchorPoint = zone.getBounds().getCenter();
> regionLabels[k] = new ELabel(labelAnchorPoint, k , "style1");
> regionLabels[k].pixelOffset=new GSize(-40,0);
> map.addOverlay(regionLabels[k]);
> var points2 = [];
> points2 = regionBounds[k];
>
> GEvent.addListener(regionPolys[k], "click", function(zoomToZone) {
> var bounds = new GLatLngBounds();
> for (var q = 0; q < points2.length; q++){
> bounds.extend(points2[q])
> }
> map.setZoom(map.getBoundsZoomLevel(bounds));
> // map.setCenter(bounds.getCenter());
> map.removeOverlay(regionPolys[k]);
> map.removeOverlay(regionLabels[k]);
> // map.addOverlay(regionTransparentPolys[k]);
> });
> }
> }
> }
>
>
> And here is sample of my XML file:
>
> <regions>
> <region id="EWA">
> <vertex lat="49.001589" lng="-120.846486"/>
> <vertex lat="45.197487" lng="-115.466422"/>
> <vertex lat="45.380297" lng="-115.344087"/>
> <vertex lat="44.600895" lng="-119.661347"/>
> <vertex lat="44.728007" lng="-119.804428"/>
> <vertex lat="44.590489" lng="-119.904091"/>
> <vertex lat="44.65455" lng="-120.113484"/>
> <vertex lat="44.757084" lng="-119.981409"/>
> <vertex lat="44.881296" lng="-120.106073"/>
> <vertex lat="46.385117" lng="-121.520241"/>
> <vertex lat="46.384318" lng="-121.387264"/>
> <vertex lat="48.490819" lng="-121.057011"/>
> <vertex lat="48.727902" lng="-120.663121"/>
> </region>
> <region id="WWA">
> <vertex lat="49.001589" lng="-120.846486"/>
> <vertex lat="48.727902" lng="-120.663121"/>
> <vertex lat="48.03042" lng="-121.169789"/>
> <vertex lat="46.886935" lng="-121.50894"/>
> <vertex lat="46.721443" lng="-121.386509"/>
> <vertex lat="46.384318" lng="-121.387264"/>
> <vertex lat="46.385117" lng="-121.520241"/>
> <vertex lat="48.699724" lng="-123.241813"/>
> <vertex lat="48.74414" lng="-122.713585"/>
> <vertex lat="48.998458" lng="-122.744256"/>
> </region>
> <region id="WOR">
> <vertex lat="43.956267" lng="-118.816799"/>
> <vertex lat="43.885562" lng="-118.819398"/>
> <vertex lat="42.325074" lng="-124.427834"/>
> <vertex lat="42.603493" lng="-124.398159"/>
> <vertex lat="42.839295" lng="-124.550751"/>
> <vertex lat="43.521269" lng="-124.250568"/>
> <vertex lat="46.181297" lng="-123.968193"/>
> <vertex lat="45.714448" lng="-120.390145"/>
> <vertex lat="45.736762" lng="-120.642546"/>
> <vertex lat="45.513532" lng="-120.379624"/>
> <vertex lat="45.455346" lng="-120.522396"/>
> <vertex lat="44.776166" lng="-120.393372"/>
> <vertex lat="44.752989" lng="-120.218379"/>
> <vertex lat="44.728007" lng="-119.804428"/>
> <vertex lat="44.600895" lng="-119.661347"/>
> <vertex lat="43.960258" lng="-119.648179"/>
> </region>
> </regions>
> Again, thanks for your time.
>
> --
> 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-maps-js-api-v3@googlegroups.com.
> To unsubscribe from this group, send email to
> google-maps-js-api-v3+unsubscr...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
--
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-maps-js-api-v3@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
