Polygons on Google Maps

Question

I have Polygons on Google Maps API V3, and I would like to write this shorter:

var myCoordinates = [
 new google.maps.LatLng(52.210722,21.007330),
 new google.maps.LatLng(52.211695,21.007030),
 new google.maps.LatLng(52.212707,21.006718),
 new google.maps.LatLng(52.214166,21.006246),
 new google.maps.LatLng(52.215152,21.005957),
 new google.maps.LatLng(52.215889,21.005796),
 new google.maps.LatLng(52.216986,21.005442),
 new google.maps.LatLng(52.217085,21.007201),
 new google.maps.LatLng(52.217098,21.007781),
 new google.maps.LatLng(52.217098,21.008886),
 new google.maps.LatLng(52.217059,21.009218),
 new google.maps.LatLng(52.216967,21.012158),
 new google.maps.LatLng(52.216960,21.012716),
 new google.maps.LatLng(52.216789,21.014819),
 new google.maps.LatLng(52.215862,21.015269),
 new google.maps.LatLng(52.214896,21.015977),
 new google.maps.LatLng(52.213667,21.016771),
 new google.maps.LatLng(52.213338,21.016997),
 new google.maps.LatLng(52.213154,21.017190),
 new google.maps.LatLng(52.212963,21.017437),
 new google.maps.LatLng(52.212819,21.017662),
 new google.maps.LatLng(52.212635,21.017286),
 new google.maps.LatLng(52.212510,21.016836),
 new google.maps.LatLng(52.212352,21.016042),
 new google.maps.LatLng(52.212220,21.015387),
 new google.maps.LatLng(52.211944,21.014336),
 new google.maps.LatLng(52.211609,21.012437),
 new google.maps.LatLng(52.210722,21.007330)
 ];
 var polyOptions = new google.maps.Polygon({
 path: myCoordinates,
 strokeColor: "#FF0000",
 strokeOpacity: 0,
 strokeWeight: 3,
 fillColor: "#94C11F",
 fillOpacity: 0.5, 
 clickable: false
 });
 var it = new google.maps.Polyline(polyOptions);
 it.setMap(map);
var myCoordinates2 = [
 new google.maps.LatLng(52.188629,20.98085),
 new google.maps.LatLng(52.188031,20.984788),
 new google.maps.LatLng(52.187926,20.984788),
 new google.maps.LatLng(52.187827,20.984852),
 new google.maps.LatLng(52.187636,20.984949),
 new google.maps.LatLng(52.187386,20.985099),
 new google.maps.LatLng(52.185295,20.986483),
 new google.maps.LatLng(52.185189,20.986547),
 new google.maps.LatLng(52.185097,20.98659),
 new google.maps.LatLng(52.184966,20.98658),
 new google.maps.LatLng(52.184828,20.986558),
 new google.maps.LatLng(52.184709,20.986494),
 new google.maps.LatLng(52.184571,20.986333),
 new google.maps.LatLng(52.183953,20.985539),
 new google.maps.LatLng(52.183821,20.985389),
 new google.maps.LatLng(52.182394,20.984026),
 new google.maps.LatLng(52.182841,20.982052),
 new google.maps.LatLng(52.182926,20.981827),
 new google.maps.LatLng(52.183321,20.982106),
 new google.maps.LatLng(52.183367,20.982074),
 new google.maps.LatLng(52.183394,20.981977),
 new google.maps.LatLng(52.183361,20.981902),
 new google.maps.LatLng(52.18294,20.981591),
 new google.maps.LatLng(52.183676,20.97923),
 new google.maps.LatLng(52.183972,20.979263),
 new google.maps.LatLng(52.185452,20.979767),
 new google.maps.LatLng(52.187031,20.980293),
 new google.maps.LatLng(52.18861,20.98084)
 ];
 var polyOptions2 = new google.maps.Polygon({
 path: myCoordinates2,
 strokeColor: "#FF0000",
 strokeOpacity: 0,
 strokeWeight: 3,
 fillColor: "#94C11F",
 fillOpacity: 0.5, 
 clickable: false
 });
 var it2 = new google.maps.Polyline(polyOptions2);
 it2.setMap(map);
var myCoordinates2a = [
 new google.maps.LatLng(52.183209,20.979037),
 new google.maps.LatLng(52.182591,20.981172),
 new google.maps.LatLng(52.182538,20.981462),
 new google.maps.LatLng(52.182446,20.981988),
 new google.maps.LatLng(52.182058,20.983533),
 new google.maps.LatLng(52.180262,20.981548),
 new google.maps.LatLng(52.180966,20.978898),
 new google.maps.LatLng(52.180795,20.978243),
 new google.maps.LatLng(52.181249,20.978297),
 new google.maps.LatLng(52.18219,20.978587),
 new google.maps.LatLng(52.182709,20.978769),
 new google.maps.LatLng(52.18319,20.979016)
 ];
 var polyOptions2a = new google.maps.Polygon({
 path: myCoordinates2a,
 strokeColor: "#FF0000",
 strokeOpacity: 0,
 strokeWeight: 3,
 fillColor: "#94C11F",
 fillOpacity: 0.5, 
 clickable: false
 });
 var it2a = new google.maps.Polyline(polyOptions2a);
 it2a.setMap(map);
var myCoordinates2b = [
 new google.maps.LatLng(52.188789,21.014442),
 new google.maps.LatLng(52.188828,21.016932),
 new google.maps.LatLng(52.188157,21.017253),
 new google.maps.LatLng(52.187802,21.014571),
 new google.maps.LatLng(52.188749,21.014442)
 ];
 var polyOptions2b = new google.maps.Polygon({
 path: myCoordinates2b,
 strokeColor: "#FF0000",
 strokeOpacity: 0,
 strokeWeight: 3,
 fillColor: "#94C11F",
 fillOpacity: 0.5, 
 clickable: false
 });
 var it2b = new google.maps.Polyline(polyOptions2b);
 it2b.setMap(map);

Answer 1

How about:

// Just the raw data ...
var myCoordinates = [
 [52.210722, 21.007330],
 [52.212707, 21.006718],
 [52.214166, 21.006246],
 [52.215152, 21.005957],
 [52.215889, 21.005796],
 [52.216986, 21.005442],
 [52.217085, 21.007201],
 [52.217098, 21.007781],
 [52.217098, 21.008886],
 [52.217059, 21.009218],
 [52.216967, 21.012158],
 [52.216960, 21.012716],
 [52.216789, 21.014819],
 [52.215862, 21.015269],
 [52.214896, 21.015977],
 [52.213667, 21.016771],
 [52.213338, 21.016997],
 [52.213154, 21.017190],
 [52.212963, 21.017437],
 [52.212819, 21.017662],
 [52.212635, 21.017286],
 [52.212510, 21.016836],
 [52.212352, 21.016042],
 [52.212220, 21.015387],
 [52.211944, 21.014336],
 [52.211609, 21.012437],
 [52.210722, 21.007330]
];
var myCoordinates2 = [
 [52.188629, 20.98085],
 [52.188031, 20.984788],
 [52.187926, 20.984788],
 [52.187827, 20.984852],
 [52.187636, 20.984949],
 [52.187386, 20.985099],
 [52.185295, 20.986483],
 [52.185189, 20.986547],
 [52.185097, 20.98659],
 [52.184966, 20.98658],
 [52.184828, 20.986558],
 [52.184709, 20.986494],
 [52.184571, 20.986333],
 [52.183953, 20.985539],
 [52.183821, 20.985389],
 [52.182394, 20.984026],
 [52.182841, 20.982052],
 [52.182926, 20.981827],
 [52.183321, 20.982106],
 [52.183367, 20.982074],
 [52.183394, 20.981977],
 [52.183361, 20.981902],
 [52.18294, 20.981591],
 [52.183676, 20.97923],
 [52.183972, 20.979263],
 [52.185452, 20.979767],
 [52.187031, 20.980293],
 [52.18861, 20.98084]
];
var myCoordinates2a = [
 [52.183209, 20.979037],
 [52.182591, 20.981172],
 [52.182538, 20.981462],
 [52.182446, 20.981988],
 [52.182058, 20.983533],
 [52.180262, 20.981548],
 [52.180966, 20.978898],
 [52.180795, 20.978243],
 [52.181249, 20.978297],
 [52.18219, 20.978587],
 [52.182709, 20.978769],
 [52.18319, 20.979016]
];
var myCoordinates2b = [
 [52.188789, 21.014442],
 [52.188828, 21.016932],
 [52.188157, 21.017253],
 [52.187802, 21.014571],
 [52.188749, 21.014442]
];

And the restructured functionality:

function mapToLatLng(source, index, array) {
 return new google.maps.LatLng(source[0], source[1])
}
function toLatLng(array) {
 return array.map(mapToLatLng);
}
function newPolyOptions(path) {
 return new google.maps.Polygon({
 path:path,
 strokeColor:"FF0000",
 strokeOpacity:0,
 strokeWeight:3,
 fillColor:"#94C11F",
 fillOpacity:0.5,
 clickable:false
 });
}
function newPolyLine(polyOptions) {
 var polyLine = new google.maps.Polyline(polyOptions);
 polyLine.setMap(map);
 return polyLine;
}
var it = newPolyLine(newPolyOptions(toLatLng(myCoordinates)));
var it2 = newPolyLine(newPolyOptions(toLatLng(myCoordinates2)));
var it2a = newPolyLine(newPolyOptions(toLatLng(myCoordinates2a)));
var it2b = newPolyLine(newPolyOptions(toLatLng(myCoordinates2b)));

Or you could also compress it in one function.

function newPolyLine(path) {
 var polyLine = new google.maps.Polyline(new google.maps.Polygon({
 path:path.map(
 function(source, index, array) {
 return new google.maps.LatLng(source[0], source[1]);
 }),
 strokeColor:"FF0000",
 strokeOpacity:0,
 strokeWeight:3,
 fillColor:"#94C11F",
 fillOpacity:0.5,
 clickable:false
 }));
 polyLine.setMap(map);
 return polyLine;
};
var it = newPolyLine(myCoordinates);
var it2 = newPolyLine(myCoordinates2);
var it2a = newPolyLine(myCoordinates2a);
var it2b = newPolyLine(myCoordinates2b);

• gidzior: i will try this and let u know
• Florian Salihovic: Sure, i also compressed it int a single method. Just edited my post.
• gidzior: works perfect, thx a lot mate