title: Radio button to display google maps
body: <p>I would like to display a google map via the Google API but i want the map to be displayed only when the user select a certain radio input.
  <a href="https://i.stack.imgur.com/tRkRt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tRkRt.png" alt="enter image description here"></a></p>
  
  <p>I don't want the map to be displayed by default. I want to display it when "Livraison" or "Point de reception" is checked.</p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>&lt;div&gt;&lt;input type="radio" name="reception" value="livraison"&gt; Livraison&lt;/div&gt;
  &lt;div&gt;&lt;input type="radio" name="reception" value="point"&gt; Point de récuperation&lt;/div&gt;
  &lt;div id="map" style="height: 300px; border: 1px solid red;"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      window.onload=function(){
      var receps=document.querySelectorAll('[name=reception]');
          //console.log(document.querySelectorAll('[name=reception]'))
  
          for (var i = 0; i &lt; receps.length ; i++)
          {
              receps[i].onclick=function(e){
                  if(e.target.value == 'point'){
                      console.log('cest un point')
                  }
                  else{
                      console.log('cest une livraison')
  
                  }
  
              }
          }
  
      }
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      function initMap() {
          var uluru = {lat: -25.363, lng: 131.044};
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: uluru
          });
          var marker = new google.maps.Marker({
            position: uluru,
            map: map
          });
        }
  &lt;/script&gt;
   &lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?key=THE_KEY&amp;callback=initMap"&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>Can you help please...</p>