javascript - Checkbox for showing and hiding all markers in driving directions in Google Maps API V3 - Stack Overflow

admin管理员组

文章数量:1414852

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):

• What is the difference between "marker.setVisible(false)" and "marker.setMap(null)" in Google Maps v3?
• Toggle hide/show Google map markers ,
• .cfm/2012/12/1/Simple-Google-Maps-demo-with-Custom-Markers
• .html

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
    }

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):

• What is the difference between "marker.setVisible(false)" and "marker.setMap(null)" in Google Maps v3?
• Toggle hide/show Google map markers ,
• http://www.raymondcamden./index.cfm/2012/12/1/Simple-Google-Maps-demo-with-Custom-Markers
• http://www.geocodezip./v3_MW_example_categories.html

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
    }

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited May 23, 2017 at 12:13 CommunityBot 111 silver badge asked Jul 13, 2013 at 20:47 KDPKDP 63411 gold badge1111 silver badges3232 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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/iambnz/mNh7A (w JQuery 1.4)

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

EDIT 2:

Here is the JS code, HTML/ CSS on JSfiddle: http://jsfiddle/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); 

本文标签：