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
edited Jul 11 '17 at 5:23
Jamal♦
30.4k11121227
asked Jul 11 '17 at 4:49
user143089user143089
112
$endgroup$
add a comment |
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
edited Jul 11 '17 at 5:23
Jamal♦
30.4k11121227
asked Jul 11 '17 at 4:49
user143089user143089
112
$endgroup$
add a comment |
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
edited Jul 11 '17 at 5:23
Jamal♦
30.4k11121227
asked Jul 11 '17 at 4:49
user143089user143089
112
$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
edited Jul 11 '17 at 5:23
Jamal♦
30.4k11121227
asked Jul 11 '17 at 4:49
user143089user143089
112
edited Jul 11 '17 at 5:23
Jamal♦
30.4k11121227
asked Jul 11 '17 at 4:49
user143089user143089
112
edited Jul 11 '17 at 5:23
Jamal♦
30.4k11121227
edited Jul 11 '17 at 5:23
Jamal♦
30.4k11121227
edited Jul 11 '17 at 5:23
Jamal♦
30.4k11121227
30.4k11121227
asked Jul 11 '17 at 4:49
user143089user143089
112
asked Jul 11 '17 at 4:49
user143089user143089
112
asked Jul 11 '17 at 4:49
user143089user143089
112
112
add a comment |
add a comment |
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.
answered 9 mins ago
Nguyễn Hùng CườngNguyễn Hùng Cường
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.
$endgroup$
add a comment |
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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.
answered 9 mins ago
Nguyễn Hùng CườngNguyễn Hùng Cường
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.
$endgroup$
add a comment |
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.
answered 9 mins ago
Nguyễn Hùng CườngNguyễn Hùng Cường
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.
$endgroup$
add a comment |
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.
answered 9 mins ago
Nguyễn Hùng CườngNguyễn Hùng Cường
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.
$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.
answered 9 mins ago
Nguyễn Hùng CườngNguyễn Hùng Cường
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.
answered 9 mins ago
Nguyễn Hùng CườngNguyễn Hùng Cường
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.
answered 9 mins ago
Nguyễn Hùng CườngNguyễn Hùng Cường
1
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.
add a comment |
add a comment |
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
