使用Google Web JavaScript API中的复选框单击切换多个geojson图层

Question

我想使用复选框将多个geojson图层加载到我的地图。我能够在地图中全部加载多个图层以及下面的代码片段，但是我需要的是仅在单击与之对应的复选框时才加载每个json图层。复选框启用时，它应该显示相应的图层；复选框禁用时，它应该隐藏。我在链接https://bl.ocks.org/tristen/6ad0cfe8c0913c85a008中为mapbox找到了类似的图片，但是我使用的是本地Google Web JavaScript API。

<input type="checkbox" id="jsonlayer1" onClick="togglejsonLayer(1);"/>
<input type="checkbox" id="jsonlayer2" onClick="togglejsonLayer(2);"/>
<input type="checkbox" id="jsonlayer3" onClick="togglejsonLayer(3);"/>

<div id="map-canvas"></div>
<script type="text/javascript">
var map;
function initMap() 
{
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    {
       zoom: 13, center: {lat: 8.4902, lng: 77.0361}, mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    var Layer = new google.maps.Data();
    Layer.loadGeoJson('file1.json');
    Layer.loadGeoJson('file2.json');
    Layer.loadGeoJson('file3.json');
    Layer.setStyle(function(feature) 
    {
      return ({
        fillColor: feature.getProperty('#ffffff'),
        fillOpacity: 0.35,
        strokeColor: '#FF0000',
        strokeWeight:1
             });
    });
    Layer.setMap(map);
    var infowindow = new google.maps.InfoWindow();
    Layer.addListener('mouseover', function(event) 
    {
        var feat = event.feature;
        var myHTMLss = "<b>Name: </b>" + feat.getProperty('NAME');
        infowindow.setContent(myHTMLss);
        infowindow.setPosition(event.latLng);
        infowindow.open(map);
    });
}
</script>

Answer 1

分别控制每个图层的数据的最简单方法是为每个图层创建一个单独的Data对象，然后根据复选框状态在地图中添加或删除它。

function createDataLayer(url) {
  var Layer = new google.maps.Data();
  Layer.loadGeoJson(url);
  Layer.setStyle(function(feature) {
    return ({
      fillColor: feature.getProperty('#ffffff'),
      fillOpacity: 0.35,
      strokeColor: '#FF0000',
      strokeWeight:1
    });
  });
  Layer.addListener('mouseover', function(event) {
    var feat = event.feature;
      var myHTMLss = "<b>Name: </b>" + feat.getProperty('NAME');
      infowindow.setContent(myHTMLss);
      infowindow.setPosition(event.latLng);
      infowindow.open(map);
  });
  return Layer;
}


function togglejsonLayer(index) {
  layers[index-1].setMap(layers[index-1].getMap()==null?map:null);
}

layers = [];
layers.push(createDataLayer('http://www.geocodezip.com/GeoJSON/Arizona.json.txt'));
layers.push(createDataLayer('http://www.geocodezip.com/GeoJSON/Utah.json.txt'));
layers.push(createDataLayer('http://www.geocodezip.com/GeoJSON/Colorado.json.txt'));

working example

代码段：（使用addGeoJson以避免CORS问题）

function togglejsonLayer(index) {
  layers[index - 1].setMap(layers[index - 1].getMap() == null ? map : null);
}
var map, layers;

function initMap() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 5,
    center: {
      lat: 35.879743,
      lng: -106.698479
    }
  });
  google.maps.event.addListener(map, 'center_changed', function() {
    console.log(map.getCenter().toUrlValue(6));
  });
  layers = [];
  layers.push(createDataLayer(Arizona)); // 'http://www.geocodezip.com/GeoJSON/Arizona.json.txt'));
  layers.push(createDataLayer(Utah)); // 'http://www.geocodezip.com/GeoJSON/Utah.json.txt'));
  layers.push(createDataLayer(Colorado)); //'http://www.geocodezip.com/GeoJSON/Colorado.json.txt'));
  var infowindow = new google.maps.InfoWindow();
}

function createDataLayer(url) {
  var Layer = new google.maps.Data();
  // Layer.loadGeoJson(url);
  Layer.addGeoJson(url);
  Layer.setStyle(function(feature) {
    return ({
      fillColor: feature.getProperty('#ffffff'),
      fillOpacity: 0.35,
      strokeColor: '#FF0000',
      strokeWeight: 1
    });
  });
  Layer.addListener('mouseover', function(event) {
    var feat = event.feature;
    var myHTMLss = "<b>Name: </b>" + feat.getProperty('NAME');
    infowindow.setContent(myHTMLss);
    infowindow.setPosition(event.latLng);
    infowindow.open(map);
  });
  return Layer;
}
var Utah = {"type": "FeatureCollection","features": [{"type": "Feature","properties": {"GEO_ID": "0400000US49","STATE": "49","NAME": "Utah","LSAD": "","CENSUSAREA": 82169.620000},"geometry": {"type": "Polygon","coordinates": [[[-111.046689, 42.001567],[-111.046402, 41.579845],[-111.046264, 41.377731],[-111.046600, 41.360692],[-111.046551, 41.251716],[-111.046723, 40.997959],[-110.500718, 40.994746],[-110.048474, 40.997103],[-110.000708, 40.997352],[-109.999838, 40.997330],[-109.855299, 40.997614],[-109.854302, 40.997661],[-109.715409, 40.998191],[-109.713877, 40.998266],[-109.676421, 40.998395],[-109.207383, 41.001459],[-109.050076, 41.000659],[-109.048296, 40.662602],[-109.048249, 40.653601],[-109.050074, 40.540358],[-109.049955, 40.539901],[-109.050854, 40.222662],[-109.050973, 40.180849],[-109.050944, 40.180712],[-109.050813, 40.059579],[-109.050873, 40.058915],[-109.051221, 39.660472],[-109.051363, 39.497674],[-109.051417, 39.366677],[-109.051516, 39.124982],[-109.053292, 38.942878],[-109.053233, 38.942467],[-109.053797, 38.905284],[-109.053943, 38.904414],[-109.059541, 38.719888],[-109.059962, 38.499987],[-109.060062, 38.275489],[-109.042062, 38.155490],[-109.042074, 38.153023],[-109.042820, 37.999301],[-109.042819, 37.997068],[-109.043121, 37.974260],[-109.042137, 37.881160],[-109.041723, 37.842051],[-109.041754, 37.835826],[-109.041760, 37.713182],[-109.041732, 37.711214],[-109.042089, 37.623795],[-109.042131, 37.617662],[-109.041806, 37.604171],[-109.041865, 37.530726],[-109.041915, 37.530653],[-109.043053, 37.485161],[-109.045810, 37.374993],[-109.045156, 37.112064],[-109.045203, 37.111958],[-109.045173, 37.109464],[-109.045189, 37.096271],[-109.044995, 37.086429],[-109.045058, 37.074661],[-109.045166, 37.072742],[-109.045223, 36.999084],[-109.181196, 36.999271],[-109.233848, 36.999266],[-109.246917, 36.999346],[-109.263390, 36.999263],[-109.268213, 36.999242],[-109.270097, 36.999266],[-109.378039, 36.999135],[-109.381226, 36.999148],[-110.000677, 36.997968],[-110.331050, 36.998216],[-110.495259, 37.003875],[-110.750690, 37.003197],[-111.189888, 37.000959],[-111.405517, 37.001497],[-111.405869, 37.001481],[-111.412784, 37.001478],[-112.357690, 37.001025],[-112.368946, 37.001125],[-112.534545, 37.000684],[-112.538593, 37.000674],[-112.540368, 37.000669],[-112.545094, 37.000734],[-112.558974, 37.000692],[-112.609787, 37.000753],[-112.899366, 37.000319],[-112.966471, 37.000219],[-113.965907, 36.999976],[-113.965907, 37.000025],[-114.050600, 37.000396],[-114.051749, 37.088434],[-114.051822, 37.090976],[-114.051974, 37.283848],[-114.051974, 37.284511],[-114.051800, 37.293044],[-114.051800, 37.293548],[-114.051927, 37.370459],[-114.051927, 37.370734],[-114.052701, 37.492014],[-114.052685, 37.502513],[-114.052718, 37.517264],[-114.052689, 37.517859],[-114.052472, 37.604776],[-114.051728, 37.745997],[-114.051785, 37.746249],[-114.051670, 37.746958],[-114.051109, 37.756276],[-114.048473, 37.809861],[-114.050423, 37.999961],[-114.049903, 38.148601],[-114.050120, 38.404536],[-114.050091, 38.404673],[-114.049834, 38.543784],[-114.049862, 38.547764],[-114.050154, 38.572920],[-114.049893, 38.677365],[-114.047728, 39.542742],[-114.047134, 39.906037],[-114.046555, 40.116931],[-114.045518, 40.494474],[-114.045577, 40.495801],[-114.045281, 40.506586],[-114.043505, 40.726292],[-114.043831, 40.758666],[-114.043803, 40.759205],[-114.042145, 40.999926],[-114.039882, 41.741991],[-114.041152, 41.850595],[-114.041107, 41.850573],[-114.041723, 41.993720],[-113.893261, 41.988057],[-113.796082, 41.989104],[-113.764530, 41.989459],[-113.431563, 41.993799],[-113.402230, 41.994161],[-113.396497, 41.994250],[-113.000821, 41.998223],[-113.000820, 41.998223],[-112.979218, 41.998263],[-112.909587, 41.998791],[-112.882367, 41.998922],[-112.880619, 41.998921],[-112.833125, 41.999345],[-112.833084, 41.999305],[-112.788542, 41.999681],[-112.709375, 42.000309],[-112.648019, 42.000307],[-112.450814, 42.000953],[-112.450567, 42.001092],[-112.386170, 42.001126],[-112.264936, 42.000991],[-112.239107, 42.001217],[-112.163956, 41.996708],[-112.109528, 41.997105],[-111.915837, 41.998519],[-111.915622, 41.998496],[-111.876491, 41.998528],[-111.507264, 41.999518],[-111.425535, 42.000840],[-111.420898, 42.000793],[-111.415873, 42.000748],[-111.046689, 42.001567]]]}}]};
var Colorado = {"type": "FeatureCollection","features": [{"type": "Feature","properties": {"GEO_ID": "0400000US08","STATE": "08","NAME": "Colorado","LSAD": "","CENSUSAREA": 103641.888000},"geometry": {"type": "Polygon","coordinates": [[[-107.317794, 41.002957],[-107.000606, 41.003444],[-106.857772, 41.003082],[-106.453859, 41.002057],[-106.439563, 41.001978],[-106.437419, 41.001795],[-106.430950, 41.001752],[-106.391852, 41.001176],[-106.386356, 41.001144],[-106.321165, 40.999123],[-106.190550, 40.998056],[-106.061181, 40.996999],[-105.730421, 40.996886],[-105.724804, 40.996910],[-105.277138, 40.998173],[-105.276860, 40.998173],[-105.256527, 40.998191],[-105.254779, 40.998210],[-104.943371, 40.998190],[-104.882452, 40.998186],[-104.497149, 41.001828],[-104.497058, 41.001805],[-104.214692, 41.001657],[-104.214191, 41.001568],[-104.211473, 41.001591],[-104.123586, 41.001626],[-104.104590, 41.001543],[-104.086068, 41.001563],[-104.066961, 41.001504],[-104.053249, 41.001406],[-104.039238, 41.001502],[-104.023383, 41.001887],[-104.018223, 41.001617],[-103.972642, 41.001615],[-103.971373, 41.001524],[-103.953525, 41.001596],[-103.896207, 41.001750],[-103.877967, 41.001673],[-103.858449, 41.001681],[-103.574522, 41.001721],[-103.497447, 41.001635],[-103.486697, 41.001914],[-103.421975, 41.002007],[-103.421925, 41.001969],[-103.382493, 41.001883],[-103.365314, 41.001846],[-103.362979, 41.001844],[-103.077804, 41.002298],[-103.076536, 41.002253],[-103.059538, 41.002368],[-103.057998, 41.002368],[-103.043444, 41.002344],[-103.038704, 41.002251],[-103.002026, 41.002486],[-103.000102, 41.002400],[-102.982690, 41.002157],[-102.981483, 41.002112],[-102.963669, 41.002186],[-102.962522, 41.002072],[-102.960706, 41.002059],[-102.959624, 41.002095],[-102.944830, 41.002303],[-102.943109, 41.002051],[-102.925568, 41.002280],[-102.924029, 41.002142],[-102.906547, 41.002276],[-102.904796, 41.002207],[-102.887407, 41.002178],[-102.885746, 41.002131],[-102.867822, 41.002183],[-102.865784, 41.001988],[-102.849263, 41.002301],[-102.846455, 41.002256],[-102.830303, 41.002351],[-102.827280, 41.002143],[-102.773546, 41.002414],[-102.766723, 41.002275],[-102.754617, 41.002361],[-102.739624, 41.002230],[-102.653463, 41.002332],[-102.621033, 41.002597],[-102.578696, 41.002291],[-102.575738, 41.002268],[-102.575496, 41.002200],[-102.566048, 41.002200],[-102.556789, 41.002219],[-102.487955, 41.002445],[-102.470537, 41.002382],[-102.469223, 41.002424],[-102.379593, 41.002301],[-102.364066, 41.002174],[-102.292833, 41.002207],[-102.292622, 41.002230],[-102.292553, 41.002207],[-102.291354, 41.002207],[-102.272100, 41.002245],[-102.267812, 41.002383],[-102.231931, 41.002327],[-102.212200, 41.002462],[-102.209361, 41.002442],[-102.191210, 41.002326],[-102.124972, 41.002338],[-102.070598, 41.002423],[-102.051718, 41.002377],[-102.051614, 41.002377],[-102.051292, 40.749591],[-102.051292, 40.749586],[-102.051398, 40.697542],[-102.051725, 40.537839],[-102.051519, 40.520094],[-102.051465, 40.440008],[-102.051840, 40.396396],[-102.051572, 40.393080],[-102.051669, 40.349213],[-102.051922, 40.235344],[-102.051894, 40.229193],[-102.051909, 40.162674],[-102.052001, 40.148359],[-102.051744, 40.003078],[-102.051569, 39.849805],[-102.051363, 39.843471],[-102.051318, 39.833311],[-102.051254, 39.818992],[-102.050594, 39.675594],[-102.049954, 39.592331],[-102.049806, 39.574058],[-102.049764, 39.568180],[-102.049554, 39.538932],[-102.049673, 39.536691],[-102.049679, 39.506183],[-102.049369, 39.423333],[-102.049370, 39.418210],[-102.049167, 39.403597],[-102.048960, 39.373712],[-102.048449, 39.303138],[-102.047250, 39.137020],[-102.047189, 39.133147],[-102.047134, 39.129701],[-102.046571, 39.047038],[-102.045388, 38.813392],[-102.045334, 38.799463],[-102.045448, 38.783453],[-102.045371, 38.770064],[-102.045287, 38.755528],[-102.045375, 38.754339],[-102.045212, 38.697567],[-102.045156, 38.688555],[-102.045127, 38.686725],[-102.045160, 38.675221],[-102.045102, 38.674946],[-102.045074, 38.669617],[-102.045288, 38.615249],[-102.045288, 38.615168],[-102.045211, 38.581609],[-102.045189, 38.558732],[-102.045223, 38.543797],[-102.045112, 38.523784],[-102.045262, 38.505532],[-102.045263, 38.505395],[-102.044944, 38.384419],[-102.044613, 38.312324],[-102.044568, 38.268819],[-102.044567, 38.268749],[-102.044510, 38.262412],[-102.044398, 38.250015],[-102.043844, 37.928102],[-102.043845, 37.926135],[-102.043219, 37.867929],[-102.043033, 37.824146],[-102.042953, 37.803535],[-102.042668, 37.788758],[-102.042158, 37.760164],[-102.041990, 37.738541],[-102.041876, 37.723875],[-102.041574, 37.680436],[-102.041694, 37.665681],[-102.041582, 37.654495],[-102.041585, 37.644282],[-102.041618, 37.607868],[-102.041894, 37.557977],[-102.041899, 37.541186],[-102.042016, 37.535261],[-102.041786, 37.506066],[-102.041801, 37.469488],[-102.041755, 37.434855],[-102.041669, 37.434740],[-102.041676, 37.409898],[-102.041826, 37.389191],[-102.042089, 37.352819],[-102.041974, 37.352613],[-102.041817, 37.309490],[-102.041664, 37.297650],[-102.041963, 37.258164],[-102.042002, 37.141744],[-102.042135, 37.125021],[-102.042092, 37.125021],[-102.041809, 37.111973],[-102.041983, 37.106551],[-102.041920, 37.035083],[-102.041749, 37.034397],[-102.041921, 37.032178],[-102.041950, 37.030805],[-102.041952, 37.024742],[-102.042240, 36.993083],[-102.054503, 36.993109],[-102.184271, 36.993593],[-102.208316, 36.993730],[-102.355288, 36.994506],[-102.355367, 36.994575],[-102.570896, 36.995136],[-102.875481, 36.999628],[-102.979613, 36.998549],[-102.985807, 36.998571],[-102.986976, 36.998524],[-103.002199, 37.000104],[-103.086105, 36.999864],[-103.733247, 36.998016],[-103.734364, 36.998041],[-104.007855, 36.996239],[-104.732031, 36.993447],[-104.732120, 36.993484],[-105.000554, 36.993264],[-105.120800, 36.995428],[-105.155042, 36.995339],[-105.220613, 36.995169],[-105.419310, 36.995856],[-105.442459, 36.995994],[-105.447255, 36.996017],[-105.465182, 36.995991],[-105.508836, 36.995895],[-105.512485, 36.995777],[-105.533922, 36.995875],[-105.627470, 36.995679],[-105.664720, 36.995874],[-105.716471, 36.995849],[-105.718470, 36.995846],[-105.996159, 36.995418],[-105.997472, 36.995417],[-106.006634, 36.995343],[-106.247705, 36.994266],[-106.248675, 36.994288],[-106.476228, 36.993472],[-106.617159, 36.992967],[-106.617125, 36.993004],[-106.628652, 36.993175],[-106.628733, 36.993161],[-106.661344, 36.993243],[-106.675626, 36.993123],[-106.869796, 36.992426],[-107.000592, 37.000009],[-107.420913, 37.000005],[-107.420915, 37.000005],[-107.481737, 36.999973],[-108.288086, 36.999555],[-108.288400, 36.999520],[-108.320464, 36.999499],[-108.320721, 36.999510],[-108.379203, 36.999459],[-108.619689, 36.999249],[-108.620309, 36.999287],[-108.954404, 36.998906],[-108.958868, 36.998913],[-109.045223, 36.999084],[-109.045166, 37.072742],[-109.045058, 37.074661],[-109.044995, 37.086429],[-109.045189, 37.096271],[-109.045173, 37.109464],[-109.045203, 37.111958],[-109.045156, 37.112064],[-109.045810, 37.374993],[-109.043053, 37.485161],[-109.041915, 37.530653],[-109.041865, 37.530726],[-109.041806, 37.604171],[-109.042131, 37.617662],[-109.042089, 37.623795],[-109.041732, 37.711214],[-109.041760, 37.713182],[-109.041754, 37.835826],[-109.041723, 37.842051],[-109.042137, 37.881160],[-109.043121, 37.974260],[-109.042819, 37.997068],[-109.042820, 37.999301],[-109.042074, 38.153023],[-109.042062, 38.155490],[-109.060062, 38.275489],[-109.059962, 38.499987],[-109.059541, 38.719888],[-109.053943, 38.904414],[-109.053797, 38.905284],[-109.053233, 38.942467],[-109.053292, 38.942878],[-109.051516, 39.124982],[-109.051417, 39.366677],[-109.051363, 39.497674],[-109.051221, 39.660472],[-109.050873, 40.058915],[-109.050813, 40.059579],[-109.050944, 40.180712],[-109.050973, 40.180849],[-109.050854, 40.222662],[-109.049955, 40.539901],[-109.050074, 40.540358],[-109.048249, 40.653601],[-109.048296, 40.662602],[-109.050076, 41.000659],[-108.250649, 41.000114],[-107.918421, 41.002036],[-107.317794, 41.002957]]]}}]};
var Arizona = {"type": "FeatureCollection","features": [{"type": "Feature","properties": {"GEO_ID": "0400000US04","STATE": "04","NAME": "Arizona","LSAD": "","CENSUSAREA": 113594.084000},"geometry": {"type": "Polygon","coordinates": [[[-112.538593, 37.000674],[-112.534545, 37.000684],[-112.368946, 37.001125],[-112.357690, 37.001025],[-111.412784, 37.001478],[-111.405869, 37.001481],[-111.405517, 37.001497],[-111.189888, 37.000959],[-110.750690, 37.003197],[-110.495259, 37.003875],[-110.331050, 36.998216],[-110.000677, 36.997968],[-109.381226, 36.999148],[-109.378039, 36.999135],[-109.270097, 36.999266],[-109.268213, 36.999242],[-109.263390, 36.999263],[-109.246917, 36.999346],[-109.233848, 36.999266],[-109.181196, 36.999271],[-109.045223, 36.999084],[-109.045244, 36.969489],[-109.045272, 36.968871],[-109.045407, 36.874998],[-109.045433, 36.874589],[-109.045973, 36.002338],[-109.046011, 35.925896],[-109.046054, 35.925860],[-109.046055, 35.888721],[-109.046024, 35.879800],[-109.046295, 35.616517],[-109.046296, 35.614251],[-109.046509, 35.546440],[-109.046481, 35.546326],[-109.046082, 35.174665],[-109.045851, 34.959718],[-109.046156, 34.579291],[-109.046182, 34.522553],[-109.046182, 34.522393],[-109.046627, 33.778233],[-109.046870, 33.372654],[-109.047045, 33.369280],[-109.046909, 33.365570],[-109.046827, 33.365272],[-109.047237, 33.208965],[-109.047116, 33.137995],[-109.047117, 33.137559],[-109.047013, 33.092917],[-109.046905, 33.091931],[-109.047453, 33.069427],[-109.047480, 33.068420],[-109.047117, 32.777570],[-109.047117, 32.777569],[-109.047638, 32.693439],[-109.047645, 32.689988],[-109.047653, 32.686327],[-109.047653, 32.681379],[-109.047926, 32.426376],[-109.048286, 32.089114],[-109.048296, 32.084093],[-109.048731, 32.028174],[-109.048599, 32.013651],[-109.048590, 31.870791],[-109.048769, 31.861383],[-109.048763, 31.810776],[-109.049195, 31.796551],[-109.049813, 31.499528],[-109.049843, 31.499515],[-109.050044, 31.332502],[-109.426931, 31.334033],[-110.460172, 31.333051],[-110.760997, 31.332765],[-110.976828, 31.332560],[-111.098097, 31.339836],[-111.366635, 31.425880],[-111.579530, 31.494095],[-112.246102, 31.704195],[-112.867074, 31.895488],[-113.125961, 31.972780],[-113.333794, 32.038521],[-113.493196, 32.088943],[-114.250775, 32.323910],[-114.813613, 32.494277],[-114.809393, 32.617119],[-114.807390, 32.621332],[-114.799302, 32.625115],[-114.781872, 32.625050],[-114.753111, 32.658304],[-114.748000, 32.664184],[-114.719633, 32.718763],[-114.678632, 32.736614],[-114.677091, 32.736218],[-114.658840, 32.733830],[-114.658260, 32.733799],[-114.615585, 32.728446],[-114.615733, 32.729427],[-114.496827, 32.822119],[-114.496284, 32.822326],[-114.465715, 32.879191],[-114.465715, 32.879420],[-114.462890, 32.905797],[-114.468605, 32.971649],[-114.511343, 33.023455],[-114.516912, 33.026871],[-114.523578, 33.030961],[-114.571653, 33.036624],[-114.578287, 33.035375],[-114.584765, 33.028231],[-114.589778, 33.026228],[-114.606282, 33.025703],[-114.623870, 33.028720],[-114.675104, 33.047532],[-114.707819, 33.091102],[-114.706175, 33.105335],[-114.696829, 33.131209],[-114.687074, 33.142196],[-114.679359, 33.159519],[-114.675360, 33.185489],[-114.672088, 33.258499],[-114.700103, 33.341045],[-114.721233, 33.396912],[-114.665278, 33.415358],[-114.627125, 33.433554],[-114.622918, 33.456561],[-114.594534, 33.495059],[-114.558898, 33.531819],[-114.535664, 33.568788],[-114.535965, 33.569154],[-114.540300, 33.580615],[-114.540617, 33.591412],[-114.530348, 33.679245],[-114.523959, 33.685879],[-114.519113, 33.688473],[-114.496489, 33.696901],[-114.494197, 33.707922],[-114.504340, 33.756381],[-114.523365, 33.806120],[-114.525539, 33.838614],[-114.518434, 33.917518],[-114.499883, 33.961789],[-114.463610, 33.993431],[-114.438266, 34.022609],[-114.434949, 34.037784],[-114.435429, 34.079727],[-114.433380, 34.088413],[-114.420499, 34.103466],[-114.411681, 34.110031],[-114.401352, 34.111652],[-114.390565, 34.110084],[-114.366521, 34.118575],[-114.321618, 34.138093],[-114.312592, 34.144453],[-114.244191, 34.179625],[-114.225861, 34.201774],[-114.164476, 34.251667],[-114.133264, 34.258462],[-114.131489, 34.260387],[-114.138282, 34.303230],[-114.176909, 34.349306],[-114.199482, 34.361373],[-114.264317, 34.401329],[-114.339627, 34.451435],[-114.452547, 34.653494],[-114.465607, 34.692260],[-114.552682, 34.766871],[-114.633051, 34.869971],[-114.635176, 34.875003],[-114.636725, 34.889107],[-114.630877, 34.907263],[-114.629015, 34.986148],[-114.629190, 34.991887],[-114.633013, 35.002085],[-114.633544, 35.015644],[-114.635469, 35.028266],[-114.621956, 35.094678],[-114.599120, 35.121050],[-114.584300, 35.124999],[-114.578524, 35.128750],[-114.572747, 35.138725],[-114.569569, 35.163053],[-114.569238, 35.183480],[-114.595931, 35.325234],[-114.604314, 35.353584],[-114.627137, 35.409504],[-114.652005, 35.429165],[-114.662125, 35.444241],[-114.677643, 35.489742],[-114.676733, 35.499063],[-114.674981, 35.510564],[-114.671147, 35.520641],[-114.653806, 35.599490],[-114.653406, 35.610789],[-114.657506, 35.618289],[-114.676707, 35.640989],[-114.689407, 35.651412],[-114.700308, 35.700387],[-114.707710, 35.811885],[-114.705611, 35.848884],[-114.704211, 35.851984],[-114.706130, 35.878712],[-114.731296, 35.945157],[-114.743576, 35.983721],[-114.755618, 36.087166],[-114.744857, 36.098693],[-114.736165, 36.104367],[-114.631716, 36.142306],[-114.572031, 36.151610],[-114.513256, 36.151217],[-114.381446, 36.141665],[-114.365835, 36.133722],[-114.328777, 36.105501],[-114.310857, 36.083787],[-114.307235, 36.076544],[-114.303614, 36.066456],[-114.292663, 36.051118],[-114.263146, 36.025937],[-114.252651, 36.020193],[-114.238799, 36.014561],[-114.233289, 36.014289],[-114.213690, 36.015613],[-114.154130, 36.023862],[-114.148774, 36.027310],[-114.138202, 36.041284],[-114.125796, 36.077531],[-114.120193, 36.102228],[-114.063021, 36.186942],[-114.060302, 36.189363],[-114.046838, 36.194069],[-114.047106, 36.250591],[-114.048515, 36.289598],[-114.046403, 36.371873],[-114.046488, 36.473449],[-114.050562, 36.656259],[-114.050578, 36.800173],[-114.050583, 36.843141],[-114.050600, 37.000396],[-113.965907, 37.000025],[-113.965907, 36.999976],[-112.966471, 37.000219],[-112.899366, 37.000319],[-112.609787, 37.000753],[-112.558974, 37.000692],[-112.545094, 37.000734],[-112.540368, 37.000669],[-112.538593, 37.000674]]]}}]};

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map-canvas {
  height: 80%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<input type="checkbox" id="jsonlayer1" onClick="togglejsonLayer(1);" />
<input type="checkbox" id="jsonlayer2" onClick="togglejsonLayer(2);" />
<input type="checkbox" id="jsonlayer3" onClick="togglejsonLayer(3);" />
<div id="map-canvas"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>