CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
KDP
KDP

Reputation: 634

Checkbox for showing and hiding all markers in driving directions in Google Maps API V3

Thanks for any help you can provide! I've reviewed these links, but I haven't been able to translate these examples into a solution for my code (I'm still learning a lot about JS and Google Maps):

I just want a checkbox that, when checked, shows the markers in my array (arrMarkers). When the checkbox is unchecked, I want to be able to toggle the markers to hidden. I do not want this code to affect the markers in my driving directions.

Below is my latest attempt at it. It doesn't result in any errors, but the checkbox isn't doing anything to the markers:

    <script>
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

    function initialize() {
          CODE            
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
          $.getJSON( "CODE", {}, function( data ) {
          CODE
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(CODE),
        map: map,
    });
    arrMarkers = marker;
    var infowindow = new google.maps.InfoWindow({
        content: "CODE"
    });
    arrInfoWindows = infowindow;
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });

    function MapAll () {
    if (document.getElementById("mapall").checked) {
          arrMarkers.setVisible(true);
          }
          else  {
          arrMarkers.setVisible(false);
          };
    }
    document.getElementById("mapall).onchange = MapAll;
    CODE
    </script>

** Edit 1 **

By replacing my JSON object with markers that I click to add (using @bnz's solution), I was able to get the markers to show / hide. Now, I need to be able to add the markers just with my JSON object. My updated code is below, but it gives an error: "arrMarkers.push is not a function". When I delete that line of code, the map loads the markers, but the checkbox doesn't do anything.

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
      CODE

      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      var arrMarkers = [];

      $.getJSON( "CODE", {}, function( data ) {
      $.each( data, function( i, item ) {
      var loc = item.masterlocation;
            $("#markers").append('<li><a href="#" rel="' + i + '">' + loc.nickname + '</a></li>');
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
                map: map,
                title: loc.nickname,
            });
            arrMarkers = marker;
    arrMarkers.push(marker);

    function clearOverlays() {
      if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(null);
    }
      }
    }

    function showOverlays() {
      if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(map);
    }
      }
    }

    $('#mapall').change(function() {
     if($('#mapall').attr('checked')) {
      showOverlays();
      }
      else  {
      clearOverlays();
      }
    });
    });
    }

    function calcRoute() {
    CODE
    }

Upvotes: 1

Views: 9370

Answers (1)

hwsw
hwsw

Reputation: 2606

I would define a global marker array. 

var arrMarkers = [];

Then add each marker to the array via push.

arrMarkers.push(marker);

Hide function

function clearOverlays() {
  if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(null);
    }
  }
}

Show function

function showOverlays() {
  if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(map);
    }
  }
}

EDIT:

Look at this fiddle:

http://jsfiddle.net/iambnz/mNh7A (w JQuery 1.4)

http://jsfiddle.net/iambnz/mNh7A/2/ (w JQuery 2)

EDIT 2:

Here is the JS code, HTML/ CSS on JSfiddle: http://jsfiddle.net/iambnz/jxzxF/

Now you only have to add / change the marker provider from manual to json feed.

var directionsService = new google.maps.DirectionsService();
var map;
var arrMarkers = [];

function addMarker(location){
      marker = new google.maps.Marker({
      position: location,
      map: map
      });
arrMarkers.push(marker);
}

function clearOverlays() {
  if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(null);
    }
  }
}

function showOverlays() {
  if (arrMarkers) {
    for( var i = 0, n = arrMarkers.length; i < n; ++i ) {
      arrMarkers[i].setMap(map);
    }
  }
}

$('#mapall').change(function() {
 if( $('#mapall').prop("checked")) {
          showOverlays();
          }
          else  {
          clearOverlays();
          }
});

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);

google.maps.event.addListener(map, 'click', function(event) 
      {
      addMarker(event.latLng);
      });      
}

$('#end').change( function(){
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
});

google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 3

Related Questions