3
\$\begingroup\$

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);
\$\endgroup\$

1 Answer 1

6
\$\begingroup\$

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);
\$\endgroup\$
3
  • \$\begingroup\$ i will try this and let u know \$\endgroup\$
    – gidzior
    Jun 15, 2012 at 12:14
  • \$\begingroup\$ Sure, i also compressed it int a single method. Just edited my post. \$\endgroup\$ Jun 15, 2012 at 12:18
  • \$\begingroup\$ works perfect, thx a lot mate \$\endgroup\$
    – gidzior
    Jun 15, 2012 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.