CODEWITHSUNDEEP
javascriptgoogle-mapsfor-loop
Kevin Nugent
Kevin Nugent

Reputation: 277

Appending Variable js for loop

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

Upvotes: 0

Views: 34

Answers (2)

geocodezip
geocodezip

Reputation: 161404

  1. There is no buildingCoords array in your code. As SimonR indicated, you need to create that var buildingCoords = [buildingCoords1,buildingCoords2];

  2. 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>

Upvotes: 0

SimonR
SimonR

Reputation: 95

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

var buildingCoords = [buildingCoords1,buildingCoords2];

Upvotes: 1

Related Questions