Search code examples
javascripthtmlgoogle-mapsgoogle-maps-api-3google-fusion-tables

Toggle custom legend on google maps using a radio button

I created a legend for a google map using the following code from Google Developers Website

    <title>Fusion Tables Layer Example: Legend</title>

    <link href="/apis/fusiontables/docs/samples/style/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <style type="text/css">
      #legend {
        background: #FFF;
        padding: 10px;
        margin: 5px;
        font-size: 12px;
        font-family: Arial, sans-serif;
      }

      .color {
        border: 1px solid;
        height: 12px;
        width: 12px;
        margin-right: 3px;
        float: left;
      }

      .red {
        background: #C00;
      }

      .yellow {
        background: #FF3;
      }

      .green {
        background: #6F0;
      }

      .blue {
        background: #06C;
      }

      .purple {
        background: #63C;
      }
    </style>

    <script type="text/javascript">

      function initialize() {

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(37.4, -90.1),
          zoom: 3,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: 'Location',
            from: '1NIVOZxrr-uoXhpWSQH2YJzY5aWhkRZW0bWhfZw'
          },
          map: map
        });

        // Create the legend and display on the map
        var legend = document.createElement('div');
        legend.id = 'legend';
        var content = [];
        content.push('<h3>Butterflies*</h3>');
        content.push('<p><div class="color red"></div>Battus</p>');
        content.push('<p><div class="color yellow"></div>Speyeria</p>');
        content.push('<p><div class="color green"></div>Papilio</p>');
        content.push('<p><div class="color blue"></div>Limenitis</p>');
        content.push('<p><div class="color purple"></div>Myscelia</p>');
        content.push('<p>*Data is fictional</p>');
        legend.innerHTML = content.join('');
        legend.index = 1;
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
      }

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

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

However, I want to include two radio buttons, if the first radio button is checked, the legend should appear, if the second radio button is checked , the legend should disappear.

I tried and searched but couldn't make it work. Any help is appreciated.

Edited: Thanks to geocodezip, i managed to make it work. Please check this

Solution

  • Modified showHide function from this question (Simple setting off display: none / block with javascript):

    function showHide(id, btn) {
    var el = document.getElementById(id);
    var btns = document.getElementsByName(btn.name);
    for (var i=0; i<btns.length; i++) {
        if (btns[i].checked && btns[i].value == "ON")
            el.style.display = 'block';
        if (btns[i].checked && btns[i].value == "OFF")
            el.style.display = 'none';
    }
}

    Use it like this:

    showLegend
<label class='radio inline'>ON</label>
<input type='radio' name='types' value="ON" checked="checked" onchange="showHide('legend', this);" />
<label class='radio inline'>OFF</label>
<input type='radio' name='types' value="OFF" onchange="showHide('legend', this);" />

    proof of concept fiddle

    code snippet:

    function initialize() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(37.4, -90.1),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'Location',
      from: '1NIVOZxrr-uoXhpWSQH2YJzY5aWhkRZW0bWhfZw'
    },
    map: map
  });

  // Create the legend and display on the map
  var legend = document.createElement('div');
  legend.id = 'legend';
  var content = [];
  content.push('<h3>Butterflies*</h3>');
  content.push('<p><div class="color red"></div>Battus</p>');
  content.push('<p><div class="color yellow"></div>Speyeria</p>');
  content.push('<p><div class="color green"></div>Papilio</p>');
  content.push('<p><div class="color blue"></div>Limenitis</p>');
  content.push('<p><div class="color purple"></div>Myscelia</p>');
  content.push('<p>*Data is fictional</p>');
  legend.innerHTML = content.join('');
  legend.index = 1;
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

}

function showHide(id, btn) {
  var el = document.getElementById(id);
  var btns = document.getElementsByName(btn.name);
  for (var i = 0; i < btns.length; i++) {
    if (btns[i].checked && btns[i].value == "ON")
      el.style.display = 'block';
    if (btns[i].checked && btns[i].value == "OFF")
      el.style.display = 'none';
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
    html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#legend {
  background: #FFF;
  padding: 10px;
  margin: 5px;
  font-size: 12px;
  font-family: Arial, sans-serif;
}
.color {
  border: 1px solid;
  height: 12px;
  width: 12px;
  margin-right: 3px;
  float: left;
}
.red {
  background: #C00;
}
.yellow {
  background: #FF3;
}
.green {
  background: #6F0;
}
.blue {
  background: #06C;
}
.purple {
  background: #63C;
}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
showLegend
<label class='radio inline'>ON</label>
<input type='radio' name='types' id='rbPolygon2' value="ON" checked="checked" onchange="showHide('legend', this);" />
<label class='radio inline'>OFF</label>
<input type='radio' name='types' id='rbPolygon2' value="OFF" onchange="showHide('legend', this);" />
<div id="map-canvas"></div>