Переключатель для отображения карт Google

Question

Я хотел бы отобразить карту Google через Google API, но я хочу, чтобы карта отображалась только тогда, когда пользователь выбирает определенный радиовход.

Я не хочу, чтобы карта отображалась по умолчанию. Я хочу отобразить его, когда установлен флажок "Livraison" или "Point de получении".

Вот мой код:

<div><input type="radio" name="reception" value="livraison"> Livraison</div>
<div><input type="radio" name="reception" value="point"> Point de récuperation</div>
<div id="map" style="height: 300px; border: 1px solid red;"></div>

<script type="text/javascript">
    window.onload=function(){
    var receps=document.querySelectorAll('[name=reception]');
        //console.log(document.querySelectorAll('[name=reception]'))

        for (var i = 0; i < receps.length ; i++)
        {
            receps[i].onclick=function(e){
                if(e.target.value == 'point'){
                    console.log('cest un point')
                }
                else{
                    console.log('cest une livraison')

                }

            }
        }

    }
</script>

<script type="text/javascript">
    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
        });
      }
</script>
 <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=THE_KEY&callback=initMap">
    </script>

Можете ли вы помочь, пожалуйста ...

Answer 1

1. Установите для map div значение display: none.
2. Если установлен переключатель, установите для div значение display: block и вызовите initMap()

подтверждение концепции скрипки

перед выбором радиокнопки:

после выбора переключателя:

фрагмент кода:

#map {
  height: 100%;
  display: none;
}

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

<div><input type="radio" name="reception" value="livraison"> Livraison</div>
<div><input type="radio" name="reception" value="point"> Point de récuperation</div>
<div id="map" style="height: 300px; border: 1px solid red;"></div>

<script type="text/javascript">
  window.onload = function() {
    var receps = document.querySelectorAll('[name=reception]');

    for (var i = 0; i < receps.length; i++) {
      receps[i].onclick = function(e) {
        if (e.target.value == 'point') {
          console.log('cest un point')
          document.getElementById('map').style.display = "block";
          initMap();
        } else {
          console.log('cest une livraison')
          document.getElementById('map').style.display = "block";
          initMap();
        }
      }
    }
  }
</script>

<script type="text/javascript">
  var map;

  function initMap() {
    var uluru = {
      lat: -25.363,
      lng: 131.044
    };
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>