Appending Variable js for loop

Question

I'm trying to loop through some sets of coordinates to plot vectors on a Google map but can't seem to get the syntax right in order to pul the coords in:

var buildingCoords1 = [
    new google.maps.LatLng(51.49609,-0.27609),
    new google.maps.LatLng(51.49604,-0.27502),
    new google.maps.LatLng(51.49586,-0.27504),
    new google.maps.LatLng(51.49588,-0.27533),
    new google.maps.LatLng(51.49563,-0.27537),
    new google.maps.LatLng(51.49568,-0.2764),
    new google.maps.LatLng(51.49585,-0.27637),
    new google.maps.LatLng(51.49584,-0.27613)
];

var buildingCoords2 = [
    new google.maps.LatLng(51.49548,-0.27586),
    new google.maps.LatLng(51.49504,-0.27593),
    new google.maps.LatLng(51.4951,-0.27701),
    new google.maps.LatLng(51.49555,-0.27695)
];

// plot and add listeners to buildings 1 through 2
var buildings = [];
for (i = 1; i < 3; i++) { 

    buildings[i] = new google.maps.Polygon({
        paths: buildingCoords[i],
        strokeColor: '#fccf25',
        strokeOpacity: 0.8,
        strokeWeight: 1,
        fillColor: '#fccf25',
        fillOpacity: 0.35
    });

    buildings[i].setMap(map);

} //end for

It seams to me that the line paths: buildingCoords[i] should work, it correctly gets the first set if I change it to paths: buildingCoords1. The error message I'm getting is

Uncaught ReferenceError: buildingCoords is not defined

How can I correctly append the 'i' variable to get my coordinates.?

Many thanks

var data = {"buildingCoords1": [...], "buildingCoords2": [...]}; -> data["buildingCoords" + i] — Andreas
– Andreas, Commented Jun 26, 2015 at 12:37
Like it says, you never defined buildingCoords, so I'm not sure why you expect that to work. You defined buildingCoords1 and buildingCoords2, not buildingCoords. Also, off-topic, note some poor indentation, missing semi-colons and trailing commas in the array definitions. — Mitya
– Mitya, Commented Jun 26, 2015 at 12:39

SimonR · Accepted Answer · 2015-06-26 12:39:52Z

1

By using buildingCoords you reference a not defined variable. Adding the following line should solve your problem:

var buildingCoords = [buildingCoords1,buildingCoords2];

answered Jun 26, 2015 at 12:39

SimonR

959 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

geocodezip · Accepted Answer · 2015-06-26 13:07:06Z

There is no buildingCoords array in your code. As SimonR indicated, you need to create that var buildingCoords = [buildingCoords1,buildingCoords2];
You only have two arrays, this for (i = 1; i < 3; i++) doesn't make sense, should be for (i = 0; i < buildingCoords.length; i++)

working fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(51.49609, -0.27609),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var buildingCoords1 = [
    new google.maps.LatLng(51.49609, -0.27609),
    new google.maps.LatLng(51.49604, -0.27502),
    new google.maps.LatLng(51.49586, -0.27504),
    new google.maps.LatLng(51.49588, -0.27533),
    new google.maps.LatLng(51.49563, -0.27537),
    new google.maps.LatLng(51.49568, -0.2764),
    new google.maps.LatLng(51.49585, -0.27637),
    new google.maps.LatLng(51.49584, -0.27613)
  ];

  var buildingCoords2 = [
    new google.maps.LatLng(51.49548, -0.27586),
    new google.maps.LatLng(51.49504, -0.27593),
    new google.maps.LatLng(51.4951, -0.27701),
    new google.maps.LatLng(51.49555, -0.27695)
  ];
  var buildingCoords = [buildingCoords1, buildingCoords2];
  // plot and add listeners to buildings 1 through 2
  var buildings = [];
  for (i = 0; i < buildingCoords.length; i++) {

    buildings[i] = new google.maps.Polygon({
      path: buildingCoords[i],
      strokeColor: '#fccf25',
      strokeOpacity: 0.8,
      strokeWeight: 1,
      fillColor: '#fccf25',
      fillOpacity: 0.35
    });

    buildings[i].setMap(map);

  } //end for
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

Collectives™ on Stack Overflow

Appending Variable js for loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related