xxxxxxxxxx<html> <head><meta name="description" content="Contención CONAVI" /> <meta charset="UTF-8"> <title>Perímetros de Contención Urbana</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } #leftcolumn { background: #F5F5F5; width: 200px; height: 100%; float: left; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script> <script>var map;var layers = []; function initialize() { var mapOptions = { center: new google.maps.LatLng(20.40, -103.20), zoom: 10 }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);layers[0] = new google.maps.visualization.MapsEngineLayer({ mapId: '14855877116337498765-18071441934244143617', layerKey: 'PCU_U1_2015' }); //mapsEngineLayer2.setMap(map); layers[1]= new google.maps.visualization.MapsEngineLayer({ mapId: '14855877116337498765-18071441934244143617', layerKey: 'PCU_U2_2015' }); //mapsEngineLayer3.setMap(map); layers[2] = new google.maps.visualization.MapsEngineLayer({ mapId: '14855877116337498765-18071441934244143617', layerKey: 'PCU_U3_2015' }); //mapsEngineLayer4.setMap(map); layers[3] = new google.maps.KmlLayer('https://googledrive.com/host/0B4KJF4s9aIZUSlBMYW5XMVJiRTg/U1.kml', {preserveViewport: true}); layers[4] = new google.maps.KmlLayer('https://googledrive.com/host/0B4KJF4s9aIZUSlBMYW5XMVJiRTg/U2.kml', {preserveViewport: true}); layers[5] = new google.maps.KmlLayer('https://googledrive.com/host/0B4KJF4s9aIZUSlBMYW5XMVJiRTg/U3.kml', {preserveViewport: true}); for (var i = 0; i < layers.length; i++) { layers[i].setMap(null); }} google.maps.event.addDomListener(window, 'load', initialize); function toggleLayer(i) { if(layers[i].getMap() === null) { layers[i].setMap(map); } else { layers[i].setMap(null); } } </script> </head> <body> <div id="leftcolumn"> <img src="https://www.imeplan.mx/wp-content/uploads/2014/10/IMEPLAN_TWITTER_PROFILEPICK.png" width="200px" height="200px"> <td> </td> <p align="center"><strong>Perímetros de Contención Urbana</strong></p> <p align="center"> </p> <p align="center">Simbología</p> <p align="center"> </p> <table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 100px;"> <tbody> <tr> <td><strong><input type="checkbox" id="layer0" onclick="toggleLayer(0)" unchecked></br></strong></td> <td>U1-2015</td> <td> </td> <td style="background-color: rgba(255, 51, 0,0.6);"> </td> </tr> <tr> <td><strong><input type="checkbox" id="layer1" onclick="toggleLayer(1)" unchecked></br></strong></td> <td>U2-2015</td> <td> </td> <td style="background-color: rgba(51, 204, 0,0.6);"> </td> </tr> <tr> <td><strong><input type="checkbox" id="layer2" onclick="toggleLayer(2)" unchecked></br></strong></td> <td>U3-2015</td> <td> </td> <td style="background-color: rgba(0, 0, 255,0.6);"> </td> </tr> <tr> <td><strong><input type="checkbox" id="layer3" onclick="toggleLayer(3)" unchecked></br></strong></td> <td>U1-2014</td> <td> </td> <td style="border: 1px solid red;"> </td> </tr><tr> <td><strong><input type="checkbox" id="layer4" onclick="toggleLayer(4)" unchecked></br></strong></td> <td>U2-2014</td> <td> </td> <td style="border: 1px solid red;"> </td> </tr><tr> <td><strong><input type="checkbox" id="layer5" onclick="toggleLayer(5)" unchecked></br></strong></td> <td>U3-2014</td> <td> </td> <td style="border: 1px solid red;"> </td> </tr> </tbody> </table> </div> <div id="map-canvas"></div> </body></html> https://maps.googleapis.com/maps/api/js?libraries=visualization