lundi 30 avril 2018

Load Google Maps without markers

I have two radio button. When the first is checked, i display a google map with some markers in it . I would like that when i check the second radion button, it display that same map, but without the markers. Could you help please?

<div><input type="radio" name="reception" id="rad" value="livraison"> Livraison</div>
<div><input type="radio" name="reception" value="point"> Point de récuperation</div>

<div id="map" style=" display:none; 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 == 'livraison'){

                    document.getElementById('map').style.display  = 'block';
                }
                else{
                    //How to display the map without markers
                }

            }
        }

There is the callback function of the maps api:

function initMap() {

        var sp = {lat: 23.54565, lng: 11.453};
        var metro_a={lat:12.4545  , lng: 13.3148};
        var metro_n={lat:10.934329596  , lng: 10.323665372};
        var lieux=[
                    {
                        nom: "MT" ,
                        coordonnees:{lat: 11.93863, lng: 10.31413}
                    },
                    {
                        nom: "MA",
                        coordonnees:{lat:19.9361  , lng: 10.3148}
                    },
                    {
                        nom:"MN" ,
                        coordonnees:{lat:18.936  , lng: 10.323665372}
                    }
        ];

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: sp
        });


        //--------------------------------------------------------------
        for (var i = 0; i < lieux.length; i++) {
            var marker= new google.maps.Marker({
                position:lieux[i].coordonnees,
                nom:lieux[i].nom,
                map:map
            });

        }




Aucun commentaire:

Enregistrer un commentaire