Google Map API - Removing Markers -
i've tried looking @ large variety of code blocks here , on google maps api documentation still have not been able figure out how hide markers.
this current code using, , worked 1 instance. once added "for" loop in function markers.setmap(null) firefox displays following error:
error: typeerror: markers.setmap not function
function removemarkers(){ var markers; alert(markers); alert(locations.length); (i = 0; i<locations.length; i++){ markers = locations[i]; alert(markers.title); markers.setmap(null); } } additional information: campus map , full code (excluding map api)
you need keep array of google.maps.marker objects hide (or remove or run other operations on them).
in global scope:
var gmarkers = []; then push markers on array 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 newly created marker array: gmarkers.push(marker); then remove them:
function removemarkers(){ for(i=0; i<gmarkers.length; i++){ gmarkers[i].setmap(null); } } working example (toggles 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 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 @ 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 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 technological research industry", "description": "<p>john t. myers center technological research 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 , 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 , 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 , 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" }]; (i = 0; < 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() { (i = 0; < 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 markers" onclick="togglemarkers()" /> </div> <div id="map"></div>
Comments
Post a Comment