Multiple Polygons MySQL - google-maps-api-3

Question

I am trying to draw several seperated Polygons (buildings) out of a database.
The data I get out of my database looks like this:
<buildings>
<building build_id="94" build_gebaeude="A"
build_geoX="49.26173942769648" build_geoY="7.350542675857582"
/>
<building build_id="95" build_gebaeude="A"
build_geoX="49.26173942769648" build_geoY="7.3524094933319475"
/>
<building build_id="96" build_gebaeude="A"
build_geoX="49.26019903253632" build_geoY="7.35234512031559"
/>
<building build_id="97" build_gebaeude="A"
build_geoX="49.26032506667364" build_geoY="7.350692879562416"
/>
<building build_id="98" build_gebaeude="B"
build_geoX="49.26155738350112" build_geoY="7.362129818801918"
/>
<building build_id="99" build_gebaeude="B"
build_geoX="49.26157138692462" build_geoY="7.364275586013832"
/>
<building build_id="100" build_gebaeude="B"
build_geoX="49.260255047748224" build_geoY="7.364361416702309"
/>
<building build_id="101" build_gebaeude="B"
build_geoX="49.260311062896506" build_geoY="7.362065445785561"
/>
</buildings>
The following code shows what I am doing to draw the buildings:
for (var i = 0; i < building.length-1; i++) {
var point = new google.maps.LatLng(
parseFloat(building[i].getAttribute("build_geoX")),
parseFloat(building[i].getAttribute("build_geoY"))
);
latlngbounds.extend(point);
if( building[i].getAttribute("build_gebaeude") ==
building[i+1].getAttribute("build_gebaeude") )
{
path.push(point);
}
else {
path.push(point);
poly = new google.maps.Polygon({
paths: path,
strokeWeight: 5,
strokeOpacity: 1,
fillOpacity: 0.30,
strokeColor:'#FFFFFF',
fillColor: '#a3141d'
});
polygons.push(poly);
path.clear();
}
}
polygons[0].setMap(map);
polygons[1].setMap(map);
The problem is that not all points are drawn? I don´t understand where the problem is?

Answer 1

It looks like there may be a problem with the paths array. It's not clear from the code you have included whether paths is a JavaScript Array or an array-like object, but since you are working with paths within the for loop and then attempting to clear the paths within the loop, I suggest:
Create a new paths Array within the loop as it is needed
Add code to manage the state of the array looping
Change the code you use to check the building attributes and testing equality
Since you are passing the paths array to the Polygon constructor, don't clear the array
var paths = null;
var aNewPathIsNeeded = true;
for ( var i = 0; i < building.length-1; i++) {
//Create your point
//Extend your bounds
//Since you always add the point to the paths array, move it out of the if
//check and perform some array state management:
if ( aNewPathIsNeeded ) {
paths = new Array( point );
aNewPathIsNeeded = false;
}
else { paths.push( point ); }
//Change the if condition to deal with just the specific case of interest:
var currentBldgAttr = building[i].getAttribute("build_gebaeude");
var nextBldgAttr = building[i+1].getAttribute("build_gebaeude");
if ( !( currentBldgAttr === nextBldgAttr ) ) { //Change to use: '==='
//Create your polygon
//Add the polygon to the polygons array
//New code to manage paths state:
aNewPathIsNeeded = true;
}
}
I'm not sure exactly what your problem is, but I believe this code will help you move forward. As a side note, clear() is not a JavaScript Array method; when you want to empty an Array, use: array.length = 0 as described in: Is JavaScript's array.clear() not a function?