Google Map API - Removing Markers

2019-01-03 17:50发布

站内问答 / 后端开发
911 3 5

I've tried looking at a large variety of code blocks here and on the Google Maps API documentation but STILL have not been able to figure out how to hide markers.

This is the current code that I am using, and it worked for one instance. Once I added the "for" loop in the function with markers.setMap(null) Firefox displays the following error:

Error: TypeError: markers.setMap is not a function

function removeMarkers(){
    var markers;
    alert(markers);
    alert(locations.length);
    for (i = 0; i<locations.length; i++){
        markers = locations[i];
        alert(markers.title);
        markers.setMap(null);
    }
}

Additional Information: Campus Map and full code (excluding Map API)

3条回答
Emotional °昔
2楼-- · 2019-01-03 18:13

You need to keep an array of the google.maps.Marker objects to hide (or remove or run other operations on them).

In the global scope:

var gmarkers = [];

Then push the markers on that array as you create them:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude),
    title: locations[i].title,
    icon: icon,
    map:map
});

// Push your newly created marker into the array:
gmarkers.push(marker);

Then to remove them:

function removeMarkers(){
    for(i=0; i<gmarkers.length; i++){
        gmarkers[i].setMap(null);
    }
}

working example (toggles the markers)

code snippet:

var gmarkers = [];
var RoseHulman = new google.maps.LatLng(39.483558, -87.324593);
var styles = [{
  stylers: [{
    hue: "black"
  }, {
    saturation: -90
  }]
}, {
  featureType: "road",
  elementType: "geometry",
  stylers: [{
    lightness: 100
  }, {
    visibility: "simplified"
  }]
}, {
  featureType: "road",
  elementType: "labels",
  stylers: [{
    visibility: "on"
  }]
}];

var styledMap = new google.maps.StyledMapType(styles, {
  name: "Campus"
});
var mapOptions = {
  center: RoseHulman,
  zoom: 15,
  mapTypeControl: true,
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
  },
  mapTypeControlOptions: {
    mapTypeIds: ['map_style', google.maps.MapTypeId.HYBRID],
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  },
  scrollwheel: false,
  streetViewControl: true,

};

var map = new google.maps.Map(document.getElementById('map'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

var infowindow = new google.maps.InfoWindow({
  maxWidth: 300,
  infoBoxClearance: new google.maps.Size(1, 1),
  disableAutoPan: false
});

var marker, i, icon, image;

var locations = [{
  "id": "1",
  "category": "6",
  "campus_location": "F2",
  "title": "Alpha Tau Omega Fraternity",
  "description": "<p>Alpha Tau Omega house</p>",
  "longitude": "-87.321133",
  "latitude": "39.484092"
}, {
  "id": "2",
  "category": "6",
  "campus_location": "B2",
  "title": "Apartment Commons",
  "description": "<p>The commons area of the apartment-style residential complex</p>",
  "longitude": "-87.329282",
  "latitude": "39.483599"
}, {
  "id": "3",
  "category": "6",
  "campus_location": "B2",
  "title": "Apartment East",
  "description": "<p>Apartment East</p>",
  "longitude": "-87.328809",
  "latitude": "39.483748"
}, {
  "id": "4",
  "category": "6",
  "campus_location": "B2",
  "title": "Apartment West",
  "description": "<p>Apartment West</p>",
  "longitude": "-87.329732",
  "latitude": "39.483429"
}, {
  "id": "5",
  "category": "6",
  "campus_location": "C2",
  "title": "Baur-Sames-Bogart (BSB) Hall",
  "description": "<p>Baur-Sames-Bogart Hall</p>",
  "longitude": "-87.325714",
  "latitude": "39.482382"
}, {
  "id": "6",
  "category": "6",
  "campus_location": "D3",
  "title": "Blumberg Hall",
  "description": "<p>Blumberg Hall</p>",
  "longitude": "-87.328321",
  "latitude": "39.483388"
}, {
  "id": "7",
  "category": "1",
  "campus_location": "E1",
  "title": "The Branam Innovation Center",
  "description": "<p>The Branam Innovation Center</p>",
  "longitude": "-87.322614",
  "latitude": "39.48494"
}, {
  "id": "8",
  "category": "6",
  "campus_location": "G3",
  "title": "Chi Omega Sorority",
  "description": "<p>Chi Omega house</p>",
  "longitude": "-87.319905",
  "latitude": "39.482071"
}, {
  "id": "9",
  "category": "3",
  "campus_location": "D1",
  "title": "Cook Stadium/Phil Brown Field",
  "description": "<p>Cook Stadium at Phil Brown Field</p>",
  "longitude": "-87.325258",
  "latitude": "39.485007"
}, {
  "id": "10",
  "category": "1",
  "campus_location": "D2",
  "title": "Crapo Hall",
  "description": "<p>Crapo Hall</p>",
  "longitude": "-87.324368",
  "latitude": "39.483709"
}, {
  "id": "11",
  "category": "6",
  "campus_location": "G3",
  "title": "Delta Delta Delta Sorority",
  "description": "<p>Delta Delta Delta</p>",
  "longitude": "-87.317477",
  "latitude": "39.482951"
}, {
  "id": "12",
  "category": "6",
  "campus_location": "D2",
  "title": "Deming Hall",
  "description": "<p>Deming Hall</p>",
  "longitude": "-87.325822",
  "latitude": "39.483421"
}, {
  "id": "13",
  "category": "5",
  "campus_location": "F1",
  "title": "Facilities Operations",
  "description": "<p>Facilities Operations</p>",
  "longitude": "-87.321782",
  "latitude": "39.484916"
}, {
  "id": "14",
  "category": "2",
  "campus_location": "E3",
  "title": "Flame of the Millennium",
  "description": "<p>Flame of Millennium sculpture</p>",
  "longitude": "-87.323306",
  "latitude": "39.481978"
}, {
  "id": "15",
  "category": "5",
  "campus_location": "E2",
  "title": "Hadley Hall",
  "description": "<p>Hadley Hall</p>",
  "longitude": "-87.324046",
  "latitude": "39.482887"
}, {
  "id": "16",
  "category": "2",
  "campus_location": "F2",
  "title": "Hatfield Hall",
  "description": "<p>Hatfield Hall</p>",
  "longitude": "-87.322340",
  "latitude": "39.482146"
}, {
  "id": "17",
  "category": "6",
  "campus_location": "C2",
  "title": "Hulman Memorial Union",
  "description": "<p>Hulman Memorial Union</p>",
  "longitude": "-87.32698",
  "latitude": "39.483574"
}, {
  "id": "18",
  "category": "1",
  "campus_location": "E2",
  "title": "John T. Myers Center for Technological Research with Industry",
  "description": "<p>John T. Myers Center for Technological Research With Industry</p>",
  "longitude": "-87.322984",
  "latitude": "39.484063"
}, {
  "id": "19",
  "category": "6",
  "campus_location": "A2",
  "title": "Lakeside Hall",
  "description": "<p></p>",
  "longitude": "-87.330612",
  "latitude": "39.482804"
}, {
  "id": "20",
  "category": "6",
  "campus_location": "F2",
  "title": "Lambda Chi Alpha Fraternity",
  "description": "<p>Lambda Chi Alpha</p>",
  "longitude": "-87.320999",
  "latitude": "39.48305"
}, {
  "id": "21",
  "category": "1",
  "campus_location": "D2",
  "title": "Logan Library",
  "description": "<p>Logan Library</p>",
  "longitude": "-87.324851",
  "latitude": "39.483408"
}, {
  "id": "22",
  "category": "6",
  "campus_location": "C2",
  "title": "Mees Hall",
  "description": "<p>Mees Hall</p>",
  "longitude": "-87.32778",
  "latitude": "39.483533"
}, {
  "id": "23",
  "category": "1",
  "campus_location": "E2",
  "title": "Moench Hall",
  "description": "<p>Moench Hall</p>",
  "longitude": "-87.323695",
  "latitude": "39.483471"
}, {
  "id": "24",
  "category": "1",
  "campus_location": "G4",
  "title": "Oakley Observatory",
  "description": "<p>Oakley Observatory</p>",
  "longitude": "-87.31616",
  "latitude": "39.483789"
}, {
  "id": "25",
  "category": "1",
  "campus_location": "D2",
  "title": "Olin Hall and Olin Advanced Learning Center",
  "description": "<p>Olin Hall</p>",
  "longitude": "-87.324550",
  "latitude": "39.482796"
}, {
  "id": "26",
  "category": "6",
  "campus_location": "C3",
  "title": "Percopo Hall",
  "description": "<p>Percopo Hall</p>",
  "longitude": "-87.328182",
  "latitude": "39.482121"
}, {
  "id": "27",
  "category": "6",
  "campus_location": "G3",
  "title": "Public Safety Office",
  "description": "<p>The Office of Public Safety</p>",
  "longitude": "-87.320377",
  "latitude": "39.48191"
}, {
  "id": "28",
  "category": "1",
  "campus_location": "E2",
  "title": "Rotz Mechanical Engineering Lab",
  "description": "<p>Rotz Lab</p>",
  "longitude": "-87.323247",
  "latitude": "39.483711"
}, {
  "id": "28",
  "category": "6",
  "campus_location": "C2",
  "title": "Scharpenberg Hall",
  "description": "<p>Scharpenberg Hall</p>",
  "longitude": "-87.328139",
  "latitude": "39.483582"
}, {
  "id": "29",
  "category": "6",
  "campus_location": "G2",
  "title": "Sigma Nu Fraternity",
  "description": "<p>The Sigma Nu house</p>",
  "longitude": "-87.31999",
  "latitude": "39.48374"
}, {
  "id": "30",
  "category": "6",
  "campus_location": "E4",
  "title": "South Campus / Rose-Hulman Ventures",
  "description": "<p></p>",
  "longitude": "-87.330623",
  "latitude": "39.417646"
}, {
  "id": "31",
  "category": "6",
  "campus_location": "C3",
  "title": "Speed Hall",
  "description": "<p>Speed Hall</p>",
  "longitude": "-87.326632",
  "latitude": "39.482121"
}, {
  "id": "32",
  "category": "3",
  "campus_location": "C1",
  "title": "Sports and Recreation Center",
  "description": "<p></p>",
  "longitude": "-87.3272",
  "latitude": "39.484874"
}, {
  "id": "33",
  "category": "6",
  "campus_location": "F2",
  "title": "Triangle Fraternity",
  "description": "<p>Triangle fraternity</p>",
  "longitude": "-87.32113",
  "latitude": "39.483659"
}, {
  "id": "34",
  "category": "6",
  "campus_location": "B3",
  "title": "White Chapel",
  "description": "<p>The White Chapel</p>",
  "longitude": "-87.329367",
  "latitude": "39.482481"
}, {
  "id": "35",
  "category": "6",
  "campus_location": "F2",
  "title": "Women's Fraternity Housing",
  "description": "",
  "image": "",
  "longitude": "-87.320753",
  "latitude": "39.482401"
}, {
  "id": "36",
  "category": "3",
  "campus_location": "E1",
  "title": "Intramural Fields",
  "description": "<p></p>",
  "longitude": "-87.321267",
  "latitude": "39.485934"
}, {
  "id": "37",
  "category": "3",
  "campus_location": "A3",
  "title": "James Rendel Soccer Field",
  "description": "<p></p>",
  "longitude": "-87.332135",
  "latitude": "39.480933"
}, {
  "id": "38",
  "category": "3",
  "campus_location": "B2",
  "title": "Art Nehf Field",
  "description": "<p>Art Nehf Field</p>",
  "longitude": "-87.330923",
  "latitude": "39.48022"
}, {
  "id": "39",
  "category": "3",
  "campus_location": "B2",
  "title": "Women's Softball Field",
  "description": "<p></p>",
  "longitude": "-87.329904",
  "latitude": "39.480278"
}, {
  "id": "40",
  "category": "3",
  "campus_location": "D1",
  "title": "Joy Hulbert Tennis Courts",
  "description": "<p>The Joy Hulbert Outdoor Tennis Courts</p>",
  "longitude": "-87.323767",
  "latitude": "39.485595"
}, {
  "id": "41",
  "category": "6",
  "campus_location": "B2",
  "title": "Speed Lake",
  "description": "",
  "image": "",
  "longitude": "-87.328134",
  "latitude": "39.482779"
}, {
  "id": "42",
  "category": "5",
  "campus_location": "F1",
  "title": "Recycling Center",
  "description": "",
  "image": "",
  "longitude": "-87.320098",
  "latitude": "39.484593"
}, {
  "id": "43",
  "category": "1",
  "campus_location": "F3",
  "title": "Army ROTC",
  "description": "",
  "image": "",
  "longitude": "-87.321342",
  "latitude": "39.481992"
}, {
  "id": "44",
  "category": "2",
  "campus_location": "  ",
  "title": "Self Made Man",
  "description": "",
  "image": "",
  "longitude": "-87.326272",
  "latitude": "39.484481"
}, {
  "id": "P1",
  "category": "4",
  "title": "Percopo Parking",
  "description": "",
  "image": "",
  "longitude": "-87.328756",
  "latitude": "39.481587"
}, {
  "id": "P2",
  "category": "4",
  "title": "Speed Parking",
  "description": "",
  "image": "",
  "longitude": "-87.327361",
  "latitude": "39.481694"
}, {
  "id": "P3",
  "category": "4",
  "title": "Main Parking",
  "description": "",
  "image": "",
  "longitude": "-87.326245",
  "latitude": "39.481446"
}, {
  "id": "P4",
  "category": "4",
  "title": "Lakeside Parking",
  "description": "",
  "image": "",
  "longitude": "-87.330848",
  "latitude": "39.483284"
}, {
  "id": "P5",
  "category": "4",
  "title": "Hatfield Hall Parking",
  "description": "",
  "image": "",
  "longitude": "-87.321417",
  "latitude": "39.482398"
}, {
  "id": "P6",
  "category": "4",
  "title": "Women's Fraternity Parking",
  "description": "",
  "image": "",
  "longitude": "-87.320977",
  "latitude": "39.482315"
}, {
  "id": "P7",
  "category": "4",
  "title": "Myers and Facilities Parking",
  "description": "",
  "image": "",
  "longitude": "-87.322243",
  "latitude": "39.48417"
}, {
  "id": "P8",
  "category": "4",
  "title": "",
  "description": "",
  "image": "",
  "longitude": "-87.323241",
  "latitude": "39.484758"
}, {
  "id": "P9",
  "category": "4",
  "title": "",
  "description": "",
  "image": "",
  "longitude": "-87.323617",
  "latitude": "39.484311"
}, {
  "id": "P10",
  "category": "4",
  "title": "",
  "description": "",
  "image": "",
  "longitude": "-87.325714",
  "latitude": "39.484584"
}, {
  "id": "P11",
  "category": "4",
  "title": "",
  "description": "",
  "image": "",
  "longitude": "-87.32778",
  "latitude": "39.484145"
}, {
  "id": "P12",
  "category": "4",
  "title": "",
  "description": "",
  "image": "",
  "longitude": "-87.329035",
  "latitude": "39.4848"
}];

for (i = 0; i < locations.length; i++) {

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude),
    title: locations[i].title,
    map: map
  });
  gmarkers.push(marker);
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      if (locations[i].description !== "" || locations[i].title !== "") {
        infowindow.setContent('<div class="content" id="content-' + locations[i].id +
          '" style="max-height:300px; font-size:12px;"><h3>' + locations[i].title + '</h3>' +
          '<hr class="grey" />' +
          hasImage(locations[i]) +
          locations[i].description) + '</div>';
        infowindow.open(map, marker);
      }
    }
  })(marker, i));
}

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

function hasImage(location) {
  return '';
}
html,
body,
#map {
  height: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="controls">
  <input type="button" value="Toggle All Markers" onClick="toggleMarkers()" />
</div>
<div id="map"></div>

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
3楼-- · 2019-01-03 18:20

You can try this

    markers[markers.length-1].setMap(null);

Hope it works.

查看更多
0人赞 添加讨论(0) 举报
女痞
4楼-- · 2019-01-03 18:23

According to Google documentation they said that this is the best way to do it. First create this function to find out how many markers there are/

   function setMapOnAll(map1) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map1);
    }
  }

Next create another function to take away all these markers

 function clearMarker(){
setMapOnAll(null);
}

Then create this final function to erase all the markers when ever this function is called upon.

 function delateMarkers(){
clearMarker()
markers = []
//console.log(markers) This is just if you want to

}

Hope that helped good luck

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)