Home » Javascript » javascript – How can i Hide Pins when i Zoom Out?

javascript – How can i Hide Pins when i Zoom Out?

Posted by: admin February 24, 2020 Leave a comment

Questions:

When I zoom out then How i can hide my Markers?

Here loc_lat is a latitude and loc_long is a longtitude.

I am using this code:

 setTimeout(explode, 2000);
function explode() {

    var gmarkers = [];
    var loc_lat = $(".loc_lat").val();
    var loc_long = $(".loc_long").val();
    var InfoWindow = [<?= $new_data ?>];
    console.log(loc_lat);
    console.log(loc_long);
    $(document).ready(function (e) {

        var sites = InfoWindow;

        var myLatlng = new google.maps.LatLng(loc_lat, loc_long);

        var myOptions = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < InfoWindow.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(InfoWindow[i][4], InfoWindow[i][5]),
                map: map
            });

            var img = InfoWindow[i][3];
            if (img == "") {
                img = 'http://localhost:8888/genegledna/assets/images/location_pin.png';
            }

            marker.contentString = '<div style="max-width:280px;width:auto;position:relative;padding-left:20px;" class="overflow"><div class="row Margin-0"><a href="#"><img src="http://socialinfotech.in/development/genegledna/assets/images/logo.png" class="img-responsive  img_map"></a><h4 class="map_view">' + InfoWindow[i][2] + '</h4></div><hr style="margin-top:-10px;"/><div class="col-sm-12 overflow" style="padding-left:0px;"><h5 class="map_view_cat"><strong>Address :</strong>  ' + InfoWindow[i][1] + '</h5><h6><strong>Zip-Code :</strong> ' + InfoWindow[i][0] + '</h6></div><hr style="margin-bottom:0px;"/></div></div></div>';
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(this.contentString);
                    infowindow.open(map, marker);
                }
            })(marker, i));


        }

    });
}

Than is my Markers enter image description here

How to&Answers:

call this function at the point where you need to clear the markers

  clearMarkers() {
    this.gmarkers = []
  }