toggle button in google map API

I work on a google map. In my map, there are two markers. I hid them. I would like to toggle these two markers with a button I already made.

I toggle function worked before with another kind of script but here it does not work! Thanks for your help!

var map;
var markers;

function initMap() {


   var bounds = new google.maps.LatLngBounds();
   var mapOptions = {
      mapTypeId: 'roadmap'
   };

   var nepal = {
      lat: 28.240381,
      lng: 83.973038
   };
   map = new google.maps.Map(document.getElementById('nepal_map'), {
      zoom: 7,
      center: nepal
   });

   var markers = [
      ['Lobuche', 27.955762, 86.794760],
      ['Island', 27.919593, 86.934933]
   ];

   var infoWindowContent = [
      ['Lobuche!!!'],
      ['Island!!!']
   ];

   // Display multiple markers on a map
   var infoWindow = new google.maps.InfoWindow(),
      marker, i;

   // Loop through our array of markers & place each one on the map  
   for (i = 0; i < markers.length; i++) {

      var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
      bounds.extend(position);
      marker = new google.maps.Marker({
         position: position,
         map: map,
         visible: (false)
      });

      // Allow each marker to have an info window    
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
         return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
         }
      })(marker, i));

      // Automatically center the map fitting all markers on the screen
      map.fitBounds(bounds);
   }

   // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
   var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
      this.setZoom(7);
      google.maps.event.removeListener(boundsListener);
   });

}

function toggleMarkers() {
   if (markers[0].getMap() != null) {
      var arg = null;
   } else {
      var arg = map;
   }
   for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(arg);
   }
}


ANSWERS:


The functions to set marker visibility are:

marker.setVisible(true);
marker.setVisible(false);

You can check whether a marker is visible with:

if(marker.getVisible() == true)

I have created a JSFiddle to demo this for you. The map starts out with two invisible markers and a button at the top to toggle the markers. Clicking the button makes them visible. Clicking again turns visibility off etc.

NOTE: Since you are using a button you already made and I don't have the code for it, I have used a button of my own. The logic should be the same for using your own button though. Please see fiddle here:

Note: You will need to insert your own API key into my Fiddle for it to work.

I hope this helps!



 MORE:


 ? Google Places Autocomplete boundaries doesn't always work
 ? I want google maps marker to stay in the centre of the map while camera position can change iOS SDK
 ? Google maps - keep center when zooming
 ? Type 'Promise<void>' is not assignable to type 'Marker'. Property '_objectInstance' is missing in type 'Promise<void>'. Ionic 2
 ? Google Map is not showing on live site using Avada theme
 ? Adding google tiles with R
 ? Chrome navigator.geolocation.getCurrentPosition() error 403
 ? How to move inside google maps only with two fingers?
 ? React Native: Alert message doesn't work when called frequently
 ? React native ToolbarAndroid action icon not working