Display multiple polygons on Google Maps and toggle visibility of each polygonPolygons on Google MapsGeolocation check and error management for Google MapsObject-oriented JavaScript and Google Maps objects memory managementMultiple Google Maps using V3 APIDisplaying a Google map with multiple complex markers and unique info windowsDisplaying multiple Google Maps markers on a Visualforce pageSanitize and standardize street addresses using Google Maps lookupsDrawing multiple polygons in Google Maps in the same styleCustom Lightbox CodeDisplaying multiple objects on map and calculating distances using google api

Mimic lecturing on blackboard, facing audience

How do I tell my boss that I'm quitting in 15 days (a colleague left this week)

Echo with obfuscation

How to make money from a browser who sees 5 seconds into the future of any web page?

Should I warn new/prospective PhD Student that supervisor is terrible?

Why didn’t Eve recognize the little cockroach as a living organism?

How to preserve electronics (computers, iPads and phones) for hundreds of years

Integral Notations in Quantum Mechanics

If the only attacker is removed from combat, is a creature still counted as having attacked this turn?

Would this string work as string?

How do I prevent inappropriate ads from appearing in my game?

How do you justify more code being written by following clean code practices?

Would a primitive species be able to learn English from reading books alone?

Personal or impersonal in a technical resume

Why do Radio Buttons not fill the entire outer circle?

Should I assume I have passed probation?

Can I say "fingers" when referring to toes?

I'm just a whisper. Who am I?

Why didn't Voldemort know what Grindelwald looked like?

What's the name of the logical fallacy where a debater extends a statement far beyond the original statement to make it true?

Has the laser at Magurele, Romania reached a tenth of the Sun's power?

What does "tick" mean in this sentence?

Typing CO_2 easily

Do I have to take mana from my deck or hand when tapping a dual land?



Display multiple polygons on Google Maps and toggle visibility of each polygon


Polygons on Google MapsGeolocation check and error management for Google MapsObject-oriented JavaScript and Google Maps objects memory managementMultiple Google Maps using V3 APIDisplaying a Google map with multiple complex markers and unique info windowsDisplaying multiple Google Maps markers on a Visualforce pageSanitize and standardize street addresses using Google Maps lookupsDrawing multiple polygons in Google Maps in the same styleCustom Lightbox CodeDisplaying multiple objects on map and calculating distances using google api













2












$begingroup$


I want to display multiple polygons (with the co ordinates either given by the user or pre-defined) on Google Maps and to toggle the visibility of each polygon. I wrote the code to display multiple polygons by manually entering all the longitudes and latitudes values.



<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <meta charset="utf-8">
 <title>Multi Polygon</title>
 <style>
 html, body, #map-canvas 
 height: 700px;
 margin: 0px;
 padding: 0px
 
 </style>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
 <script>

var map;
var infoWindow;

function initialize() 
 var mapOptions = 
 zoom: 11,
 center: new google.maps.LatLng(41.8500,-87.9645),
 ;

 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 infoWindow = new google.maps.InfoWindow();

 var marker = new google.maps.Marker(position:new google.maps.LatLng(41.7508, -88.1535));
 marker.setMap(map);
 // Construct the polygon.
 var multiPolygon1 = new google.maps.Polygon(
 paths: [
 new google.maps.LatLng(41.769007157585534,-88.20167541503906), 
 new google.maps.LatLng(41.76081263047197,-88.12236785888672), 
 new google.maps.LatLng( 41.717517926019624,-88.19429397583008)],
 strokeColor: '#ff987b',
 strokeOpacity: 0.8,
 strokeWeight: 3,
 fillColor: '#ff987b',
 fillOpacity: 0.35,
 name: 'Polygon 1', 
 map: map
 );

 // Add a listener for the click event.
 google.maps.event.addListener(multiPolygon1, 'click', showArrays);

 var marker1 = new google.maps.Marker(position:new google.maps.LatLng(41.8661, -88.1070));
 marker1.setMap(map);
 // Construct the polygon.
 var multiPolygon2 = new google.maps.Polygon(
 paths: [
 new google.maps.LatLng(41.88336502279732,-88.09249877929688), 
 new google.maps.LatLng(41.88157575821145,-88.12957763671875), 
 new google.maps.LatLng( 41.84271080015277,-88.12408447265625),
 new google.maps.LatLng( 41.841431946284025,-88.08425903320312)],
 strokeColor: '#ff987b',
 strokeOpacity: 0.8,
 strokeWeight: 3,
 fillColor: '#ff987b',
 fillOpacity: 0.35,
 name: 'Polygon 2',
 map:map
 );

 // Add a listener for the click event.
 google.maps.event.addListener(multiPolygon2, 'click', showArrays);

 var marker2 = new google.maps.Marker(position:new google.maps.LatLng(41.9103, -88.0717));
 marker2.setMap(map);

 var multiPolygon3 = new google.maps.Polygon(
 paths: [
 new google.maps.LatLng(41.96051129429776,-88.12957763671875), 
 new google.maps.LatLng(41.93906275484857, -88.00048828125), 
 new google.maps.LatLng(41.884387437207835, -88.02314758300781),
 new google.maps.LatLng(41.879275201550634, -88.07395935058594),
 new google.maps.LatLng(41.948766559468574, -88.11172485351562)],
 strokeColor: '#FF0000',
 strokeOpacity: 0.8,
 strokeWeight: 3,
 fillColor: '#FF0000',
 fillOpacity: 0.35,
 name: 'Polygon 3',
 map:map
 );

 // Add a listener for the click event.
 google.maps.event.addListener(multiPolygon3, 'click', showArrays);

 var marker3 = new google.maps.Marker(position:new google.maps.LatLng(41.79179268262892, -88.07601928710938));
 marker3.setMap(map);

 var multiPolygon4 = new google.maps.Polygon(
 paths: [
 new google.maps.LatLng(41.80203073088394, -88.09730529785156), 
 new google.maps.LatLng(41.801006999656636, -88.07533264160156), 
 new google.maps.LatLng(41.74313962010849, -88.05301666259766)],
 strokeColor: '#FF0000',
 strokeOpacity: 0.8,
 strokeWeight: 3,
 fillColor: '#FF0000',
 fillOpacity: 0.35,
 name: 'Polygon 4',
 map:map
 );

 // Add a listener for the click event.
 google.maps.event.addListener(multiPolygon4, 'click', showArrays);

 var marker4 = new google.maps.Marker(position:new google.maps.LatLng(41.9231, -87.7093));
 marker4.setMap(map);

 var multiPolygon5 = new google.maps.Polygon(
 paths: [
 new google.maps.LatLng(41.901254912872794, -87.94418334960938), 
 new google.maps.LatLng(41.949277245116555, -87.92015075683594), 
 new google.maps.LatLng(41.93446570034958, -87.87895202636719),
 new google.maps.LatLng(41.96459591213679, -87.82608032226562),
 new google.maps.LatLng(41.9753167881278, -87.78968811035156),
 new google.maps.LatLng(41.899721690058364, -87.83706665039062),
 new google.maps.LatLng(41.937019660425264, -87.72239685058594),
 new google.maps.LatLng(41.87569639323101, -87.63175964355469)],
 strokeColor: '#FF0000',
 strokeOpacity: 0.8,
 strokeWeight: 3,
 fillColor: '#FF0000',
 fillOpacity: 0.35,
 name: 'Polygon 5',
 map:map
 );

 // Add a listener for the click event.
 google.maps.event.addListener(multiPolygon5, 'click', showArrays);

 var marker5 = new google.maps.Marker(position:new google.maps.LatLng(41.8050, -87.8692));
 marker5.setMap(map);

 var multiPolygon6 = new google.maps.Polygon(
 paths: [
 new google.maps.LatLng(41.780016905285535, -87.95448303222656), 
 new google.maps.LatLng(41.83171182161546, -87.96066284179688), 
 new google.maps.LatLng(41.83273506215261, -87.94281005859375),
 new google.maps.LatLng(41.81073178596061, -87.88925170898438),
 new google.maps.LatLng(41.81226714359981, -87.78282165527344),
 new google.maps.LatLng(41.87723019276536, -87.77114868164062),
 new google.maps.LatLng(41.782577040867636, -87.74848937988281),
 new google.maps.LatLng(41.77182378456081, -87.88581848144531),
 new google.maps.LatLng(41.801006999656636, -87.9290771484375)],
 strokeColor: '#FF0000',
 strokeOpacity: 0.8,
 strokeWeight: 3,
 fillColor: '#FF0000',
 fillOpacity: 0.35,
 name: 'Polygon 6',
 map:map
 );

 // Add a listener for the click event.
 google.maps.event.addListener(multiPolygon6, 'click', showArrays);

 var marker6 = new google.maps.Marker(position:new google.maps.LatLng(41.7200, -87.7480));
 marker6.setMap(map);

 var multiPolygon7 = new google.maps.Polygon(
 paths: [
 new google.maps.LatLng(41.852173524388824, -87.62489318847656), 
 new google.maps.LatLng(41.70880422215806, -87.62283325195312), 
 new google.maps.LatLng(41.70829161455626, -88.0059814453125),
 new google.maps.LatLng(41.74416427530836, -87.96821594238281),
 new google.maps.LatLng(41.73545418490723, -87.91603088378906),
 new google.maps.LatLng(41.735966575868716, -87.68051147460938),
 new google.maps.LatLng(41.840920397579936, -87.67707824707031)],
 strokeColor: '#FF0000',
 strokeOpacity: 0.8,
 strokeWeight: 3,
 fillColor: '#FF0000',
 fillOpacity: 0.35,
 name: 'Polygon 7',
 map:map
 );

 // Add a listener for the click event.
 google.maps.event.addListener(multiPolygon7, 'click', showArrays);


/** @this google.maps.Polygon */
function showArrays(event) 

 // Since this polygon has only one path, we can call getPath()
 // to return the MVCArray of LatLngs.
 var vertices = this.getPath();

 var contentString = '<b>' + this.name + '</b>';
 // '<br>' +
 // 'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
 // '<br>';

 // Iterate over the vertices.
 // for (var i =0; i < vertices.getLength(); i++) 
 // var xy = vertices.getAt(i);
 // contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
 // xy.lng();
 // 

 // Replace the info window's content and position.
 infoWindow.setContent(contentString);
 infoWindow.setPosition(event.latLng);

 infoWindow.open(map);


google.maps.event.addDomListener(window, 'load', initialize);

 </script>
 </head>
 <body>
 <div id="map-canvas"></div>
 </body>
</html>


But the code is too lengthy and inefficient. How can I make my code object oriented and reduce the repetitive code? I tried using function to reduce the code but it did not work.



<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <meta charset="utf-8">
 <title>Multi Polygon</title>
 <style>
 html, body, #map-canvas 
 height: 700px;
 margin: 0px;
 padding: 0px
 
 </style>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
 <script>

var path1 = [
 [41.769007157585534,-88.20167541503906],
 [41.76081263047197,-88.12236785888672],
 [41.717517926019624,-88.19429397583008]];

var path2 = [
 [41.88336502279732,-88.09249877929688],
 [41.88157575821145,-88.12957763671875],
 [41.84271080015277,-88.12408447265625],
 [41.841431946284025,-88.08425903320312]];

var path3 = [
 [41.96051129429776,-88.12957763671875],
 [41.93906275484857, -88.00048828125],
 [41.884387437207835, -88.02314758300781],
 [41.879275201550634, -88.07395935058594],
 [41.948766559468574, -88.11172485351562]];

var path4 = [
 [41.80203073088394, -88.09730529785156],
 [41.801006999656636, -88.07533264160156],
 [41.74313962010849, -88.05301666259766]];

var path5 = [
 [41.901254912872794, -87.94418334960938],
 [41.949277245116555, -87.92015075683594],
 [41.93446570034958, -87.87895202636719],
 [41.96459591213679, -87.82608032226562],
 [41.9753167881278, -87.78968811035156],
 [41.899721690058364, -87.83706665039062],
 [41.937019660425264, -87.72239685058594],
 [41.87569639323101, -87.63175964355469]];

var path6 = [
 [41.780016905285535, -87.95448303222656],
 [41.83171182161546, -87.96066284179688],
 [41.83273506215261, -87.94281005859375],
 [41.81073178596061, -87.88925170898438],
 [41.81226714359981, -87.78282165527344],
 [41.87723019276536, -87.77114868164062],
 [41.782577040867636, -87.74848937988281],
 [41.77182378456081, -87.88581848144531],
 [41.801006999656636, -87.9290771484375]];

var path7 = [
 [41.852173524388824, -87.62489318847656],
 [41.70880422215806, -87.62283325195312],
 [41.70829161455626, -88.0059814453125],
 [41.74416427530836, -87.96821594238281],
 [41.73545418490723, -87.91603088378906],
 [41.735966575868716, -87.68051147460938],
 [41.840920397579936, -87.67707824707031]];

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 poly1 = newPolyLine(newPolyOptions(toLatLng(path1)));
var poly2 = newPolyLine(newPolyOptions(toLatLng(path2)));
var poly3 = newPolyLine(newPolyOptions(toLatLng(path3)));
var poly4 = newPolyLine(newPolyOptions(toLatLng(path4)));
var poly5 = newPolyLine(newPolyOptions(toLatLng(path5)));
var poly6 = newPolyLine(newPolyOptions(toLatLng(path6)));
var poly7 = newPolyLine(newPolyOptions(toLatLng(path7)));

 </script>
 </head>
 <body>
 <div id="map-canvas"></div>
 </body>
</html>


Also, I want to toggle the visibility of each polygon using checkbox. I tried doing that and the code works perfectly fine for only 1 polygon. However, if I apply for multiple polygons, it doesn't work.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <style>
 html, body, #map-canvas
 height: 100%; 
 margin: 0px; 
 padding: 0px; 
 height: 590px; 
 </style>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
 <!-- Include jQuery -->
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script>

 // Move map declaration
 var map;

 function toggleLayer(toggleLayer,id)
 
 if ($('#'+id).is(':checked')) 
 toggleLayer.setMap(map);
 
 else
 
 toggleLayer.setMap(null);
 
 

 function initialize() 
 var mapOptions = 
 zoom: 11,
 center: new google.maps.LatLng(41.8500,-87.9645),
 // mapTypeId: google.maps.MapTypeId.TERRAIN
 ;

 // Set map 
 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 var marker = new google.maps.Marker(position:new google.maps.LatLng(41.7508, -88.1535));
 marker.setMap(map);

 poly1 = new google.maps.Polygon(
 path: [
 new google.maps.LatLng(41.769007157585534,-88.20167541503906), 
 new google.maps.LatLng(41.76081263047197,-88.12236785888672), 
 new google.maps.LatLng( 41.717517926019624,-88.19429397583008)],
 strokeColor: '#FF0000',
 strokeOpacity: 0.8,
 strokeWeight: 3,
 fillOpacity: 0.1,
 fillColor: '#ff987b',
 fillOpacity: 0.35,
 name: 'Polygon 2',
 map:map
 );

 
 google.maps.event.addDomListener(window, 'load', initialize);
 </script>
</head>
<body>
<div id="map-canvas"></div>
<input id="togglepoly1" type="checkbox" checked="yes" onClick="toggleLayer(poly1,'togglepoly1')" /> Polygon 1
</body>
</html>





javascript google-maps







share|improve this question











$endgroup$
















    2












    $begingroup$


    I want to display multiple polygons (with the co ordinates either given by the user or pre-defined) on Google Maps and to toggle the visibility of each polygon. I wrote the code to display multiple polygons by manually entering all the longitudes and latitudes values.



    <!DOCTYPE html>
    <html>
     <head>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
     <title>Multi Polygon</title>
     <style>
     html, body, #map-canvas 
     height: 700px;
     margin: 0px;
     padding: 0px
     
     </style>
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
     <script>

    var map;
    var infoWindow;

    function initialize() 
     var mapOptions = 
     zoom: 11,
     center: new google.maps.LatLng(41.8500,-87.9645),
     ;

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     infoWindow = new google.maps.InfoWindow();

     var marker = new google.maps.Marker(position:new google.maps.LatLng(41.7508, -88.1535));
     marker.setMap(map);
     // Construct the polygon.
     var multiPolygon1 = new google.maps.Polygon(
     paths: [
     new google.maps.LatLng(41.769007157585534,-88.20167541503906), 
     new google.maps.LatLng(41.76081263047197,-88.12236785888672), 
     new google.maps.LatLng( 41.717517926019624,-88.19429397583008)],
     strokeColor: '#ff987b',
     strokeOpacity: 0.8,
     strokeWeight: 3,
     fillColor: '#ff987b',
     fillOpacity: 0.35,
     name: 'Polygon 1', 
     map: map
     );

     // Add a listener for the click event.
     google.maps.event.addListener(multiPolygon1, 'click', showArrays);

     var marker1 = new google.maps.Marker(position:new google.maps.LatLng(41.8661, -88.1070));
     marker1.setMap(map);
     // Construct the polygon.
     var multiPolygon2 = new google.maps.Polygon(
     paths: [
     new google.maps.LatLng(41.88336502279732,-88.09249877929688), 
     new google.maps.LatLng(41.88157575821145,-88.12957763671875), 
     new google.maps.LatLng( 41.84271080015277,-88.12408447265625),
     new google.maps.LatLng( 41.841431946284025,-88.08425903320312)],
     strokeColor: '#ff987b',
     strokeOpacity: 0.8,
     strokeWeight: 3,
     fillColor: '#ff987b',
     fillOpacity: 0.35,
     name: 'Polygon 2',
     map:map
     );

     // Add a listener for the click event.
     google.maps.event.addListener(multiPolygon2, 'click', showArrays);

     var marker2 = new google.maps.Marker(position:new google.maps.LatLng(41.9103, -88.0717));
     marker2.setMap(map);

     var multiPolygon3 = new google.maps.Polygon(
     paths: [
     new google.maps.LatLng(41.96051129429776,-88.12957763671875), 
     new google.maps.LatLng(41.93906275484857, -88.00048828125), 
     new google.maps.LatLng(41.884387437207835, -88.02314758300781),
     new google.maps.LatLng(41.879275201550634, -88.07395935058594),
     new google.maps.LatLng(41.948766559468574, -88.11172485351562)],
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 3,
     fillColor: '#FF0000',
     fillOpacity: 0.35,
     name: 'Polygon 3',
     map:map
     );

     // Add a listener for the click event.
     google.maps.event.addListener(multiPolygon3, 'click', showArrays);

     var marker3 = new google.maps.Marker(position:new google.maps.LatLng(41.79179268262892, -88.07601928710938));
     marker3.setMap(map);

     var multiPolygon4 = new google.maps.Polygon(
     paths: [
     new google.maps.LatLng(41.80203073088394, -88.09730529785156), 
     new google.maps.LatLng(41.801006999656636, -88.07533264160156), 
     new google.maps.LatLng(41.74313962010849, -88.05301666259766)],
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 3,
     fillColor: '#FF0000',
     fillOpacity: 0.35,
     name: 'Polygon 4',
     map:map
     );

     // Add a listener for the click event.
     google.maps.event.addListener(multiPolygon4, 'click', showArrays);

     var marker4 = new google.maps.Marker(position:new google.maps.LatLng(41.9231, -87.7093));
     marker4.setMap(map);

     var multiPolygon5 = new google.maps.Polygon(
     paths: [
     new google.maps.LatLng(41.901254912872794, -87.94418334960938), 
     new google.maps.LatLng(41.949277245116555, -87.92015075683594), 
     new google.maps.LatLng(41.93446570034958, -87.87895202636719),
     new google.maps.LatLng(41.96459591213679, -87.82608032226562),
     new google.maps.LatLng(41.9753167881278, -87.78968811035156),
     new google.maps.LatLng(41.899721690058364, -87.83706665039062),
     new google.maps.LatLng(41.937019660425264, -87.72239685058594),
     new google.maps.LatLng(41.87569639323101, -87.63175964355469)],
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 3,
     fillColor: '#FF0000',
     fillOpacity: 0.35,
     name: 'Polygon 5',
     map:map
     );

     // Add a listener for the click event.
     google.maps.event.addListener(multiPolygon5, 'click', showArrays);

     var marker5 = new google.maps.Marker(position:new google.maps.LatLng(41.8050, -87.8692));
     marker5.setMap(map);

     var multiPolygon6 = new google.maps.Polygon(
     paths: [
     new google.maps.LatLng(41.780016905285535, -87.95448303222656), 
     new google.maps.LatLng(41.83171182161546, -87.96066284179688), 
     new google.maps.LatLng(41.83273506215261, -87.94281005859375),
     new google.maps.LatLng(41.81073178596061, -87.88925170898438),
     new google.maps.LatLng(41.81226714359981, -87.78282165527344),
     new google.maps.LatLng(41.87723019276536, -87.77114868164062),
     new google.maps.LatLng(41.782577040867636, -87.74848937988281),
     new google.maps.LatLng(41.77182378456081, -87.88581848144531),
     new google.maps.LatLng(41.801006999656636, -87.9290771484375)],
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 3,
     fillColor: '#FF0000',
     fillOpacity: 0.35,
     name: 'Polygon 6',
     map:map
     );

     // Add a listener for the click event.
     google.maps.event.addListener(multiPolygon6, 'click', showArrays);

     var marker6 = new google.maps.Marker(position:new google.maps.LatLng(41.7200, -87.7480));
     marker6.setMap(map);

     var multiPolygon7 = new google.maps.Polygon(
     paths: [
     new google.maps.LatLng(41.852173524388824, -87.62489318847656), 
     new google.maps.LatLng(41.70880422215806, -87.62283325195312), 
     new google.maps.LatLng(41.70829161455626, -88.0059814453125),
     new google.maps.LatLng(41.74416427530836, -87.96821594238281),
     new google.maps.LatLng(41.73545418490723, -87.91603088378906),
     new google.maps.LatLng(41.735966575868716, -87.68051147460938),
     new google.maps.LatLng(41.840920397579936, -87.67707824707031)],
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 3,
     fillColor: '#FF0000',
     fillOpacity: 0.35,
     name: 'Polygon 7',
     map:map
     );

     // Add a listener for the click event.
     google.maps.event.addListener(multiPolygon7, 'click', showArrays);


    /** @this google.maps.Polygon */
    function showArrays(event) 

     // Since this polygon has only one path, we can call getPath()
     // to return the MVCArray of LatLngs.
     var vertices = this.getPath();

     var contentString = '<b>' + this.name + '</b>';
     // '<br>' +
     // 'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
     // '<br>';

     // Iterate over the vertices.
     // for (var i =0; i < vertices.getLength(); i++) 
     // var xy = vertices.getAt(i);
     // contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
     // xy.lng();
     // 

     // Replace the info window's content and position.
     infoWindow.setContent(contentString);
     infoWindow.setPosition(event.latLng);

     infoWindow.open(map);


    google.maps.event.addDomListener(window, 'load', initialize);

     </script>
     </head>
     <body>
     <div id="map-canvas"></div>
     </body>
    </html>


    But the code is too lengthy and inefficient. How can I make my code object oriented and reduce the repetitive code? I tried using function to reduce the code but it did not work.



    <!DOCTYPE html>
    <html>
     <head>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
     <title>Multi Polygon</title>
     <style>
     html, body, #map-canvas 
     height: 700px;
     margin: 0px;
     padding: 0px
     
     </style>
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
     <script>

    var path1 = [
     [41.769007157585534,-88.20167541503906],
     [41.76081263047197,-88.12236785888672],
     [41.717517926019624,-88.19429397583008]];

    var path2 = [
     [41.88336502279732,-88.09249877929688],
     [41.88157575821145,-88.12957763671875],
     [41.84271080015277,-88.12408447265625],
     [41.841431946284025,-88.08425903320312]];

    var path3 = [
     [41.96051129429776,-88.12957763671875],
     [41.93906275484857, -88.00048828125],
     [41.884387437207835, -88.02314758300781],
     [41.879275201550634, -88.07395935058594],
     [41.948766559468574, -88.11172485351562]];

    var path4 = [
     [41.80203073088394, -88.09730529785156],
     [41.801006999656636, -88.07533264160156],
     [41.74313962010849, -88.05301666259766]];

    var path5 = [
     [41.901254912872794, -87.94418334960938],
     [41.949277245116555, -87.92015075683594],
     [41.93446570034958, -87.87895202636719],
     [41.96459591213679, -87.82608032226562],
     [41.9753167881278, -87.78968811035156],
     [41.899721690058364, -87.83706665039062],
     [41.937019660425264, -87.72239685058594],
     [41.87569639323101, -87.63175964355469]];

    var path6 = [
     [41.780016905285535, -87.95448303222656],
     [41.83171182161546, -87.96066284179688],
     [41.83273506215261, -87.94281005859375],
     [41.81073178596061, -87.88925170898438],
     [41.81226714359981, -87.78282165527344],
     [41.87723019276536, -87.77114868164062],
     [41.782577040867636, -87.74848937988281],
     [41.77182378456081, -87.88581848144531],
     [41.801006999656636, -87.9290771484375]];

    var path7 = [
     [41.852173524388824, -87.62489318847656],
     [41.70880422215806, -87.62283325195312],
     [41.70829161455626, -88.0059814453125],
     [41.74416427530836, -87.96821594238281],
     [41.73545418490723, -87.91603088378906],
     [41.735966575868716, -87.68051147460938],
     [41.840920397579936, -87.67707824707031]];

    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 poly1 = newPolyLine(newPolyOptions(toLatLng(path1)));
    var poly2 = newPolyLine(newPolyOptions(toLatLng(path2)));
    var poly3 = newPolyLine(newPolyOptions(toLatLng(path3)));
    var poly4 = newPolyLine(newPolyOptions(toLatLng(path4)));
    var poly5 = newPolyLine(newPolyOptions(toLatLng(path5)));
    var poly6 = newPolyLine(newPolyOptions(toLatLng(path6)));
    var poly7 = newPolyLine(newPolyOptions(toLatLng(path7)));

     </script>
     </head>
     <body>
     <div id="map-canvas"></div>
     </body>
    </html>


    Also, I want to toggle the visibility of each polygon using checkbox. I tried doing that and the code works perfectly fine for only 1 polygon. However, if I apply for multiple polygons, it doesn't work.



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
     <style>
     html, body, #map-canvas
     height: 100%; 
     margin: 0px; 
     padding: 0px; 
     height: 590px; 
     </style>
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
     <!-- Include jQuery -->
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>

     // Move map declaration
     var map;

     function toggleLayer(toggleLayer,id)
     
     if ($('#'+id).is(':checked')) 
     toggleLayer.setMap(map);
     
     else
     
     toggleLayer.setMap(null);
     
     

     function initialize() 
     var mapOptions = 
     zoom: 11,
     center: new google.maps.LatLng(41.8500,-87.9645),
     // mapTypeId: google.maps.MapTypeId.TERRAIN
     ;

     // Set map 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     var marker = new google.maps.Marker(position:new google.maps.LatLng(41.7508, -88.1535));
     marker.setMap(map);

     poly1 = new google.maps.Polygon(
     path: [
     new google.maps.LatLng(41.769007157585534,-88.20167541503906), 
     new google.maps.LatLng(41.76081263047197,-88.12236785888672), 
     new google.maps.LatLng( 41.717517926019624,-88.19429397583008)],
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 3,
     fillOpacity: 0.1,
     fillColor: '#ff987b',
     fillOpacity: 0.35,
     name: 'Polygon 2',
     map:map
     );

     
     google.maps.event.addDomListener(window, 'load', initialize);
     </script>
    </head>
    <body>
    <div id="map-canvas"></div>
    <input id="togglepoly1" type="checkbox" checked="yes" onClick="toggleLayer(poly1,'togglepoly1')" /> Polygon 1
    </body>
    </html>





    javascript google-maps







    share|improve this question











    $endgroup$














      2












      2








      2





      $begingroup$


      I want to display multiple polygons (with the co ordinates either given by the user or pre-defined) on Google Maps and to toggle the visibility of each polygon. I wrote the code to display multiple polygons by manually entering all the longitudes and latitudes values.



      <!DOCTYPE html>
      <html>
       <head>
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
       <meta charset="utf-8">
       <title>Multi Polygon</title>
       <style>
       html, body, #map-canvas 
       height: 700px;
       margin: 0px;
       padding: 0px
       
       </style>
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
       <script>

      var map;
      var infoWindow;

      function initialize() 
       var mapOptions = 
       zoom: 11,
       center: new google.maps.LatLng(41.8500,-87.9645),
       ;

       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

       infoWindow = new google.maps.InfoWindow();

       var marker = new google.maps.Marker(position:new google.maps.LatLng(41.7508, -88.1535));
       marker.setMap(map);
       // Construct the polygon.
       var multiPolygon1 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.769007157585534,-88.20167541503906), 
       new google.maps.LatLng(41.76081263047197,-88.12236785888672), 
       new google.maps.LatLng( 41.717517926019624,-88.19429397583008)],
       strokeColor: '#ff987b',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#ff987b',
       fillOpacity: 0.35,
       name: 'Polygon 1', 
       map: map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon1, 'click', showArrays);

       var marker1 = new google.maps.Marker(position:new google.maps.LatLng(41.8661, -88.1070));
       marker1.setMap(map);
       // Construct the polygon.
       var multiPolygon2 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.88336502279732,-88.09249877929688), 
       new google.maps.LatLng(41.88157575821145,-88.12957763671875), 
       new google.maps.LatLng( 41.84271080015277,-88.12408447265625),
       new google.maps.LatLng( 41.841431946284025,-88.08425903320312)],
       strokeColor: '#ff987b',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#ff987b',
       fillOpacity: 0.35,
       name: 'Polygon 2',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon2, 'click', showArrays);

       var marker2 = new google.maps.Marker(position:new google.maps.LatLng(41.9103, -88.0717));
       marker2.setMap(map);

       var multiPolygon3 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.96051129429776,-88.12957763671875), 
       new google.maps.LatLng(41.93906275484857, -88.00048828125), 
       new google.maps.LatLng(41.884387437207835, -88.02314758300781),
       new google.maps.LatLng(41.879275201550634, -88.07395935058594),
       new google.maps.LatLng(41.948766559468574, -88.11172485351562)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       name: 'Polygon 3',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon3, 'click', showArrays);

       var marker3 = new google.maps.Marker(position:new google.maps.LatLng(41.79179268262892, -88.07601928710938));
       marker3.setMap(map);

       var multiPolygon4 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.80203073088394, -88.09730529785156), 
       new google.maps.LatLng(41.801006999656636, -88.07533264160156), 
       new google.maps.LatLng(41.74313962010849, -88.05301666259766)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       name: 'Polygon 4',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon4, 'click', showArrays);

       var marker4 = new google.maps.Marker(position:new google.maps.LatLng(41.9231, -87.7093));
       marker4.setMap(map);

       var multiPolygon5 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.901254912872794, -87.94418334960938), 
       new google.maps.LatLng(41.949277245116555, -87.92015075683594), 
       new google.maps.LatLng(41.93446570034958, -87.87895202636719),
       new google.maps.LatLng(41.96459591213679, -87.82608032226562),
       new google.maps.LatLng(41.9753167881278, -87.78968811035156),
       new google.maps.LatLng(41.899721690058364, -87.83706665039062),
       new google.maps.LatLng(41.937019660425264, -87.72239685058594),
       new google.maps.LatLng(41.87569639323101, -87.63175964355469)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       name: 'Polygon 5',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon5, 'click', showArrays);

       var marker5 = new google.maps.Marker(position:new google.maps.LatLng(41.8050, -87.8692));
       marker5.setMap(map);

       var multiPolygon6 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.780016905285535, -87.95448303222656), 
       new google.maps.LatLng(41.83171182161546, -87.96066284179688), 
       new google.maps.LatLng(41.83273506215261, -87.94281005859375),
       new google.maps.LatLng(41.81073178596061, -87.88925170898438),
       new google.maps.LatLng(41.81226714359981, -87.78282165527344),
       new google.maps.LatLng(41.87723019276536, -87.77114868164062),
       new google.maps.LatLng(41.782577040867636, -87.74848937988281),
       new google.maps.LatLng(41.77182378456081, -87.88581848144531),
       new google.maps.LatLng(41.801006999656636, -87.9290771484375)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       name: 'Polygon 6',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon6, 'click', showArrays);

       var marker6 = new google.maps.Marker(position:new google.maps.LatLng(41.7200, -87.7480));
       marker6.setMap(map);

       var multiPolygon7 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.852173524388824, -87.62489318847656), 
       new google.maps.LatLng(41.70880422215806, -87.62283325195312), 
       new google.maps.LatLng(41.70829161455626, -88.0059814453125),
       new google.maps.LatLng(41.74416427530836, -87.96821594238281),
       new google.maps.LatLng(41.73545418490723, -87.91603088378906),
       new google.maps.LatLng(41.735966575868716, -87.68051147460938),
       new google.maps.LatLng(41.840920397579936, -87.67707824707031)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       name: 'Polygon 7',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon7, 'click', showArrays);


      /** @this google.maps.Polygon */
      function showArrays(event) 

       // Since this polygon has only one path, we can call getPath()
       // to return the MVCArray of LatLngs.
       var vertices = this.getPath();

       var contentString = '<b>' + this.name + '</b>';
       // '<br>' +
       // 'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
       // '<br>';

       // Iterate over the vertices.
       // for (var i =0; i < vertices.getLength(); i++) 
       // var xy = vertices.getAt(i);
       // contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
       // xy.lng();
       // 

       // Replace the info window's content and position.
       infoWindow.setContent(contentString);
       infoWindow.setPosition(event.latLng);

       infoWindow.open(map);


      google.maps.event.addDomListener(window, 'load', initialize);

       </script>
       </head>
       <body>
       <div id="map-canvas"></div>
       </body>
      </html>


      But the code is too lengthy and inefficient. How can I make my code object oriented and reduce the repetitive code? I tried using function to reduce the code but it did not work.



      <!DOCTYPE html>
      <html>
       <head>
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
       <meta charset="utf-8">
       <title>Multi Polygon</title>
       <style>
       html, body, #map-canvas 
       height: 700px;
       margin: 0px;
       padding: 0px
       
       </style>
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
       <script>

      var path1 = [
       [41.769007157585534,-88.20167541503906],
       [41.76081263047197,-88.12236785888672],
       [41.717517926019624,-88.19429397583008]];

      var path2 = [
       [41.88336502279732,-88.09249877929688],
       [41.88157575821145,-88.12957763671875],
       [41.84271080015277,-88.12408447265625],
       [41.841431946284025,-88.08425903320312]];

      var path3 = [
       [41.96051129429776,-88.12957763671875],
       [41.93906275484857, -88.00048828125],
       [41.884387437207835, -88.02314758300781],
       [41.879275201550634, -88.07395935058594],
       [41.948766559468574, -88.11172485351562]];

      var path4 = [
       [41.80203073088394, -88.09730529785156],
       [41.801006999656636, -88.07533264160156],
       [41.74313962010849, -88.05301666259766]];

      var path5 = [
       [41.901254912872794, -87.94418334960938],
       [41.949277245116555, -87.92015075683594],
       [41.93446570034958, -87.87895202636719],
       [41.96459591213679, -87.82608032226562],
       [41.9753167881278, -87.78968811035156],
       [41.899721690058364, -87.83706665039062],
       [41.937019660425264, -87.72239685058594],
       [41.87569639323101, -87.63175964355469]];

      var path6 = [
       [41.780016905285535, -87.95448303222656],
       [41.83171182161546, -87.96066284179688],
       [41.83273506215261, -87.94281005859375],
       [41.81073178596061, -87.88925170898438],
       [41.81226714359981, -87.78282165527344],
       [41.87723019276536, -87.77114868164062],
       [41.782577040867636, -87.74848937988281],
       [41.77182378456081, -87.88581848144531],
       [41.801006999656636, -87.9290771484375]];

      var path7 = [
       [41.852173524388824, -87.62489318847656],
       [41.70880422215806, -87.62283325195312],
       [41.70829161455626, -88.0059814453125],
       [41.74416427530836, -87.96821594238281],
       [41.73545418490723, -87.91603088378906],
       [41.735966575868716, -87.68051147460938],
       [41.840920397579936, -87.67707824707031]];

      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 poly1 = newPolyLine(newPolyOptions(toLatLng(path1)));
      var poly2 = newPolyLine(newPolyOptions(toLatLng(path2)));
      var poly3 = newPolyLine(newPolyOptions(toLatLng(path3)));
      var poly4 = newPolyLine(newPolyOptions(toLatLng(path4)));
      var poly5 = newPolyLine(newPolyOptions(toLatLng(path5)));
      var poly6 = newPolyLine(newPolyOptions(toLatLng(path6)));
      var poly7 = newPolyLine(newPolyOptions(toLatLng(path7)));

       </script>
       </head>
       <body>
       <div id="map-canvas"></div>
       </body>
      </html>


      Also, I want to toggle the visibility of each polygon using checkbox. I tried doing that and the code works perfectly fine for only 1 polygon. However, if I apply for multiple polygons, it doesn't work.



      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html>
      <head>
       <style>
       html, body, #map-canvas
       height: 100%; 
       margin: 0px; 
       padding: 0px; 
       height: 590px; 
       </style>
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
       <!-- Include jQuery -->
       <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
       <script>

       // Move map declaration
       var map;

       function toggleLayer(toggleLayer,id)
       
       if ($('#'+id).is(':checked')) 
       toggleLayer.setMap(map);
       
       else
       
       toggleLayer.setMap(null);
       
       

       function initialize() 
       var mapOptions = 
       zoom: 11,
       center: new google.maps.LatLng(41.8500,-87.9645),
       // mapTypeId: google.maps.MapTypeId.TERRAIN
       ;

       // Set map 
       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

       var marker = new google.maps.Marker(position:new google.maps.LatLng(41.7508, -88.1535));
       marker.setMap(map);

       poly1 = new google.maps.Polygon(
       path: [
       new google.maps.LatLng(41.769007157585534,-88.20167541503906), 
       new google.maps.LatLng(41.76081263047197,-88.12236785888672), 
       new google.maps.LatLng( 41.717517926019624,-88.19429397583008)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillOpacity: 0.1,
       fillColor: '#ff987b',
       fillOpacity: 0.35,
       name: 'Polygon 2',
       map:map
       );

       
       google.maps.event.addDomListener(window, 'load', initialize);
       </script>
      </head>
      <body>
      <div id="map-canvas"></div>
      <input id="togglepoly1" type="checkbox" checked="yes" onClick="toggleLayer(poly1,'togglepoly1')" /> Polygon 1
      </body>
      </html>





      javascript google-maps







      share|improve this question











      $endgroup$




      I want to display multiple polygons (with the co ordinates either given by the user or pre-defined) on Google Maps and to toggle the visibility of each polygon. I wrote the code to display multiple polygons by manually entering all the longitudes and latitudes values.



      <!DOCTYPE html>
      <html>
       <head>
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
       <meta charset="utf-8">
       <title>Multi Polygon</title>
       <style>
       html, body, #map-canvas 
       height: 700px;
       margin: 0px;
       padding: 0px
       
       </style>
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
       <script>

      var map;
      var infoWindow;

      function initialize() 
       var mapOptions = 
       zoom: 11,
       center: new google.maps.LatLng(41.8500,-87.9645),
       ;

       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

       infoWindow = new google.maps.InfoWindow();

       var marker = new google.maps.Marker(position:new google.maps.LatLng(41.7508, -88.1535));
       marker.setMap(map);
       // Construct the polygon.
       var multiPolygon1 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.769007157585534,-88.20167541503906), 
       new google.maps.LatLng(41.76081263047197,-88.12236785888672), 
       new google.maps.LatLng( 41.717517926019624,-88.19429397583008)],
       strokeColor: '#ff987b',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#ff987b',
       fillOpacity: 0.35,
       name: 'Polygon 1', 
       map: map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon1, 'click', showArrays);

       var marker1 = new google.maps.Marker(position:new google.maps.LatLng(41.8661, -88.1070));
       marker1.setMap(map);
       // Construct the polygon.
       var multiPolygon2 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.88336502279732,-88.09249877929688), 
       new google.maps.LatLng(41.88157575821145,-88.12957763671875), 
       new google.maps.LatLng( 41.84271080015277,-88.12408447265625),
       new google.maps.LatLng( 41.841431946284025,-88.08425903320312)],
       strokeColor: '#ff987b',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#ff987b',
       fillOpacity: 0.35,
       name: 'Polygon 2',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon2, 'click', showArrays);

       var marker2 = new google.maps.Marker(position:new google.maps.LatLng(41.9103, -88.0717));
       marker2.setMap(map);

       var multiPolygon3 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.96051129429776,-88.12957763671875), 
       new google.maps.LatLng(41.93906275484857, -88.00048828125), 
       new google.maps.LatLng(41.884387437207835, -88.02314758300781),
       new google.maps.LatLng(41.879275201550634, -88.07395935058594),
       new google.maps.LatLng(41.948766559468574, -88.11172485351562)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       name: 'Polygon 3',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon3, 'click', showArrays);

       var marker3 = new google.maps.Marker(position:new google.maps.LatLng(41.79179268262892, -88.07601928710938));
       marker3.setMap(map);

       var multiPolygon4 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.80203073088394, -88.09730529785156), 
       new google.maps.LatLng(41.801006999656636, -88.07533264160156), 
       new google.maps.LatLng(41.74313962010849, -88.05301666259766)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       name: 'Polygon 4',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon4, 'click', showArrays);

       var marker4 = new google.maps.Marker(position:new google.maps.LatLng(41.9231, -87.7093));
       marker4.setMap(map);

       var multiPolygon5 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.901254912872794, -87.94418334960938), 
       new google.maps.LatLng(41.949277245116555, -87.92015075683594), 
       new google.maps.LatLng(41.93446570034958, -87.87895202636719),
       new google.maps.LatLng(41.96459591213679, -87.82608032226562),
       new google.maps.LatLng(41.9753167881278, -87.78968811035156),
       new google.maps.LatLng(41.899721690058364, -87.83706665039062),
       new google.maps.LatLng(41.937019660425264, -87.72239685058594),
       new google.maps.LatLng(41.87569639323101, -87.63175964355469)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       name: 'Polygon 5',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon5, 'click', showArrays);

       var marker5 = new google.maps.Marker(position:new google.maps.LatLng(41.8050, -87.8692));
       marker5.setMap(map);

       var multiPolygon6 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.780016905285535, -87.95448303222656), 
       new google.maps.LatLng(41.83171182161546, -87.96066284179688), 
       new google.maps.LatLng(41.83273506215261, -87.94281005859375),
       new google.maps.LatLng(41.81073178596061, -87.88925170898438),
       new google.maps.LatLng(41.81226714359981, -87.78282165527344),
       new google.maps.LatLng(41.87723019276536, -87.77114868164062),
       new google.maps.LatLng(41.782577040867636, -87.74848937988281),
       new google.maps.LatLng(41.77182378456081, -87.88581848144531),
       new google.maps.LatLng(41.801006999656636, -87.9290771484375)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       name: 'Polygon 6',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon6, 'click', showArrays);

       var marker6 = new google.maps.Marker(position:new google.maps.LatLng(41.7200, -87.7480));
       marker6.setMap(map);

       var multiPolygon7 = new google.maps.Polygon(
       paths: [
       new google.maps.LatLng(41.852173524388824, -87.62489318847656), 
       new google.maps.LatLng(41.70880422215806, -87.62283325195312), 
       new google.maps.LatLng(41.70829161455626, -88.0059814453125),
       new google.maps.LatLng(41.74416427530836, -87.96821594238281),
       new google.maps.LatLng(41.73545418490723, -87.91603088378906),
       new google.maps.LatLng(41.735966575868716, -87.68051147460938),
       new google.maps.LatLng(41.840920397579936, -87.67707824707031)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       name: 'Polygon 7',
       map:map
       );

       // Add a listener for the click event.
       google.maps.event.addListener(multiPolygon7, 'click', showArrays);


      /** @this google.maps.Polygon */
      function showArrays(event) 

       // Since this polygon has only one path, we can call getPath()
       // to return the MVCArray of LatLngs.
       var vertices = this.getPath();

       var contentString = '<b>' + this.name + '</b>';
       // '<br>' +
       // 'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
       // '<br>';

       // Iterate over the vertices.
       // for (var i =0; i < vertices.getLength(); i++) 
       // var xy = vertices.getAt(i);
       // contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
       // xy.lng();
       // 

       // Replace the info window's content and position.
       infoWindow.setContent(contentString);
       infoWindow.setPosition(event.latLng);

       infoWindow.open(map);


      google.maps.event.addDomListener(window, 'load', initialize);

       </script>
       </head>
       <body>
       <div id="map-canvas"></div>
       </body>
      </html>


      But the code is too lengthy and inefficient. How can I make my code object oriented and reduce the repetitive code? I tried using function to reduce the code but it did not work.



      <!DOCTYPE html>
      <html>
       <head>
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
       <meta charset="utf-8">
       <title>Multi Polygon</title>
       <style>
       html, body, #map-canvas 
       height: 700px;
       margin: 0px;
       padding: 0px
       
       </style>
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
       <script>

      var path1 = [
       [41.769007157585534,-88.20167541503906],
       [41.76081263047197,-88.12236785888672],
       [41.717517926019624,-88.19429397583008]];

      var path2 = [
       [41.88336502279732,-88.09249877929688],
       [41.88157575821145,-88.12957763671875],
       [41.84271080015277,-88.12408447265625],
       [41.841431946284025,-88.08425903320312]];

      var path3 = [
       [41.96051129429776,-88.12957763671875],
       [41.93906275484857, -88.00048828125],
       [41.884387437207835, -88.02314758300781],
       [41.879275201550634, -88.07395935058594],
       [41.948766559468574, -88.11172485351562]];

      var path4 = [
       [41.80203073088394, -88.09730529785156],
       [41.801006999656636, -88.07533264160156],
       [41.74313962010849, -88.05301666259766]];

      var path5 = [
       [41.901254912872794, -87.94418334960938],
       [41.949277245116555, -87.92015075683594],
       [41.93446570034958, -87.87895202636719],
       [41.96459591213679, -87.82608032226562],
       [41.9753167881278, -87.78968811035156],
       [41.899721690058364, -87.83706665039062],
       [41.937019660425264, -87.72239685058594],
       [41.87569639323101, -87.63175964355469]];

      var path6 = [
       [41.780016905285535, -87.95448303222656],
       [41.83171182161546, -87.96066284179688],
       [41.83273506215261, -87.94281005859375],
       [41.81073178596061, -87.88925170898438],
       [41.81226714359981, -87.78282165527344],
       [41.87723019276536, -87.77114868164062],
       [41.782577040867636, -87.74848937988281],
       [41.77182378456081, -87.88581848144531],
       [41.801006999656636, -87.9290771484375]];

      var path7 = [
       [41.852173524388824, -87.62489318847656],
       [41.70880422215806, -87.62283325195312],
       [41.70829161455626, -88.0059814453125],
       [41.74416427530836, -87.96821594238281],
       [41.73545418490723, -87.91603088378906],
       [41.735966575868716, -87.68051147460938],
       [41.840920397579936, -87.67707824707031]];

      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 poly1 = newPolyLine(newPolyOptions(toLatLng(path1)));
      var poly2 = newPolyLine(newPolyOptions(toLatLng(path2)));
      var poly3 = newPolyLine(newPolyOptions(toLatLng(path3)));
      var poly4 = newPolyLine(newPolyOptions(toLatLng(path4)));
      var poly5 = newPolyLine(newPolyOptions(toLatLng(path5)));
      var poly6 = newPolyLine(newPolyOptions(toLatLng(path6)));
      var poly7 = newPolyLine(newPolyOptions(toLatLng(path7)));

       </script>
       </head>
       <body>
       <div id="map-canvas"></div>
       </body>
      </html>


      Also, I want to toggle the visibility of each polygon using checkbox. I tried doing that and the code works perfectly fine for only 1 polygon. However, if I apply for multiple polygons, it doesn't work.



      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html>
      <head>
       <style>
       html, body, #map-canvas
       height: 100%; 
       margin: 0px; 
       padding: 0px; 
       height: 590px; 
       </style>
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
       <!-- Include jQuery -->
       <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
       <script>

       // Move map declaration
       var map;

       function toggleLayer(toggleLayer,id)
       
       if ($('#'+id).is(':checked')) 
       toggleLayer.setMap(map);
       
       else
       
       toggleLayer.setMap(null);
       
       

       function initialize() 
       var mapOptions = 
       zoom: 11,
       center: new google.maps.LatLng(41.8500,-87.9645),
       // mapTypeId: google.maps.MapTypeId.TERRAIN
       ;

       // Set map 
       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

       var marker = new google.maps.Marker(position:new google.maps.LatLng(41.7508, -88.1535));
       marker.setMap(map);

       poly1 = new google.maps.Polygon(
       path: [
       new google.maps.LatLng(41.769007157585534,-88.20167541503906), 
       new google.maps.LatLng(41.76081263047197,-88.12236785888672), 
       new google.maps.LatLng( 41.717517926019624,-88.19429397583008)],
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 3,
       fillOpacity: 0.1,
       fillColor: '#ff987b',
       fillOpacity: 0.35,
       name: 'Polygon 2',
       map:map
       );

       
       google.maps.event.addDomListener(window, 'load', initialize);
       </script>
      </head>
      <body>
      <div id="map-canvas"></div>
      <input id="togglepoly1" type="checkbox" checked="yes" onClick="toggleLayer(poly1,'togglepoly1')" /> Polygon 1
      </body>
      </html>





      javascript google-maps




      javascript google-maps






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jul 11 '17 at 5:23









      Jamal♦

      30.4k11121227




      30.4k11121227










      asked Jul 11 '17 at 4:49









      user143089user143089

      112




      112




















          1 Answer
          1






          active

          oldest

          votes


















          0












          $begingroup$

          If you want to use checkboxes to toggle polygons, you can set a user-defined properties when you creating a new polygon. For example:



          var polygon = new google.maps.Polygon(
           paths: data.location,
           fillColor: '#6c757d',
           fillOpacity: 0.4,
           strokeWeight: 0,
           strokeOpacity: 0,
           clickable: true,
           markers: [],
           treeMap: new Map(),
           name: data.name,
           manager: data.manager,
           id: data.id,
           density_color: '#6c757d'
           );


          The last 6 properties are user-defined so that you can add ID property for each polygon and toggle them using setMap(Null).
          Ps: You should put all your polygons in an array for better manipulating.





          share








          New contributor




          Nguyễn Hùng Cường is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.






          $endgroup$












            Your Answer





            StackExchange.ifUsing("editor", function ()
            return StackExchange.using("mathjaxEditing", function ()
            StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
            StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
            );
            );
            , "mathjax-editing");

            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "196"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f168929%2fdisplay-multiple-polygons-on-google-maps-and-toggle-visibility-of-each-polygon%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0












            $begingroup$

            If you want to use checkboxes to toggle polygons, you can set a user-defined properties when you creating a new polygon. For example:



            var polygon = new google.maps.Polygon(
             paths: data.location,
             fillColor: '#6c757d',
             fillOpacity: 0.4,
             strokeWeight: 0,
             strokeOpacity: 0,
             clickable: true,
             markers: [],
             treeMap: new Map(),
             name: data.name,
             manager: data.manager,
             id: data.id,
             density_color: '#6c757d'
             );


            The last 6 properties are user-defined so that you can add ID property for each polygon and toggle them using setMap(Null).
            Ps: You should put all your polygons in an array for better manipulating.





            share








            New contributor




            Nguyễn Hùng Cường is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
            Check out our Code of Conduct.






            $endgroup$

















              0












              $begingroup$

              If you want to use checkboxes to toggle polygons, you can set a user-defined properties when you creating a new polygon. For example:



              var polygon = new google.maps.Polygon(
               paths: data.location,
               fillColor: '#6c757d',
               fillOpacity: 0.4,
               strokeWeight: 0,
               strokeOpacity: 0,
               clickable: true,
               markers: [],
               treeMap: new Map(),
               name: data.name,
               manager: data.manager,
               id: data.id,
               density_color: '#6c757d'
               );


              The last 6 properties are user-defined so that you can add ID property for each polygon and toggle them using setMap(Null).
              Ps: You should put all your polygons in an array for better manipulating.





              share








              New contributor




              Nguyễn Hùng Cường is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
              Check out our Code of Conduct.






              $endgroup$















                0












                0








                0





                $begingroup$

                If you want to use checkboxes to toggle polygons, you can set a user-defined properties when you creating a new polygon. For example:



                var polygon = new google.maps.Polygon(
                 paths: data.location,
                 fillColor: '#6c757d',
                 fillOpacity: 0.4,
                 strokeWeight: 0,
                 strokeOpacity: 0,
                 clickable: true,
                 markers: [],
                 treeMap: new Map(),
                 name: data.name,
                 manager: data.manager,
                 id: data.id,
                 density_color: '#6c757d'
                 );


                The last 6 properties are user-defined so that you can add ID property for each polygon and toggle them using setMap(Null).
                Ps: You should put all your polygons in an array for better manipulating.





                share








                New contributor




                Nguyễn Hùng Cường is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.






                $endgroup$



                If you want to use checkboxes to toggle polygons, you can set a user-defined properties when you creating a new polygon. For example:



                var polygon = new google.maps.Polygon(
                 paths: data.location,
                 fillColor: '#6c757d',
                 fillOpacity: 0.4,
                 strokeWeight: 0,
                 strokeOpacity: 0,
                 clickable: true,
                 markers: [],
                 treeMap: new Map(),
                 name: data.name,
                 manager: data.manager,
                 id: data.id,
                 density_color: '#6c757d'
                 );


                The last 6 properties are user-defined so that you can add ID property for each polygon and toggle them using setMap(Null).
                Ps: You should put all your polygons in an array for better manipulating.






                share








                New contributor




                Nguyễn Hùng Cường is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.








                share


                share






                New contributor




                Nguyễn Hùng Cường is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.









                answered 9 mins ago









                Nguyễn Hùng CườngNguyễn Hùng Cường

                1




                1




                New contributor




                Nguyễn Hùng Cường is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.





                New contributor





                Nguyễn Hùng Cường is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.






                Nguyễn Hùng Cường is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Code Review Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    Use MathJax to format equations. MathJax reference.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f168929%2fdisplay-multiple-polygons-on-google-maps-and-toggle-visibility-of-each-polygon%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    名間水力發電廠 目录 沿革 設施 鄰近設施 註釋 外部連結 导航菜单23°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.7113923°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.71139計畫概要原始内容臺灣第一座BOT 模式開發的水力發電廠－名間水力電廠名間水力發電廠 水利署首件BOT案原始内容《小檔案》名間電廠 首座BOT水力發電廠原始内容名間電廠BOT - 經濟部水利署中區水資源局编编

                    Image
                    東螺溪清水溪加走寮溪阿里山溪東埔蚋溪獅尾堀清水溪清水溝溪水里溪陳有蘭溪郡坑溪十八重溪那馬嘎班溪松柏坑溪卓棍溪瓠瓢坑溪益則坑溪玉崙溪丹大溪郡大溪巒大溪卡社溪栗栖溪萬大溪萬大北溪萬大南溪霧社溪塔羅灣溪馬赫坡溪萬大發電廠大觀發電廠日月潭第一發電所明潭發電廠...
                    Read more

                    Prove that NP is closed under karp reduction?Space(n) not closed under Karp reductions - what about NTime(n)?Class P is closed under rotation?Prove or disprove that $NL$ is closed under polynomial many-one reductions$mathbfNC_2$ is closed under log-space reductionOn Karp reductionwhen can I know if a class (complexity) is closed under reduction (cook/karp)Check if class $PSPACE$ is closed under polyonomially space reductionIs NPSPACE also closed under polynomial-time reduction and under log-space reduction?Prove PSPACE is closed under complement?Prove PSPACE is closed under union?

                    Image
                    Is a conference paper whose proceedings will be published in IEEE Xplore counted as a publication? Prove that NP is closed under karp reduction? Is it important to consider tone, melody, and musical form while writing a song? How is it possible to have an ability score that is less than 3? Can I make popcorn with any corn? Mathematical cryptic clues tikz: show 0 at the axis origin Minkowski space can i play a electric guitar through a bass amp? Why not use SQL instead of GraphQL? How can I prevent hyper evolved versions of regular creatures from wiping out their cousins? How old can references or sources in a thesis be? Do VLANs within a subnet need to have their own subnet for router on a stick? How to add double frame in tcolorbox? How much RAM could one put in a typical 80386 setup? "You are your self first supporter", a more proper way to say it How is the claim "I am in New York only if I am in America" the same as "If I am ...
                    Read more

                    Is my guitar’s action too high? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)Strings too stiff on a recently purchased acoustic guitar | Cort AD880CEIs the action of my guitar really high?Μy little finger is too weak to play guitarWith guitar, how long should I give my fingers to strengthen / callous?When playing a fret the guitar sounds mutedPlaying (Barre) chords up the guitar neckI think my guitar strings are wound too tight and I can't play barre chordsF barre chord on an SG guitarHow to find to the right strings of a barre chord by feel?High action on higher fret on my steel acoustic guitar

                    Image
                    Is the Mordenkainen's Sword spell underpowered? Escaping $ in listings environment Short story about astronauts fertilizing soil with their own bodies No invitation for tourist visa but I want to visit Do regular languages belong to Space(1)? Can I take recommendation from someone I met at a conference? How to name indistinguishable henchmen in a screenplay? Found this skink in my tomato plant bucket. Is he trapped? Or could he leave if he wanted? How can I prevent/balance waiting and turtling as a response to cooldown mechanics Can I feed enough spin up electron to a black hole to affect it's angular momentum? Why does BitLocker not use RSA? Is my guitar’s action too high? Does GDPR cover the collection of data by websites that crawl the web and resell user data Trying to enter the Fox's den How to achieve cat-like agility? "Destructive power" carried by a B-52? Should man-made satellites feature an intelligent inverted "cow c...
                    Read more