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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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