Friday 15 July 2011

javascript - Loading specific markers by checkbox? -



javascript - Loading specific markers by checkbox? -

i loading markers database display on google map below. working fine however, implement alternative of pressing particular button somewhere else on page, , map dynamically alter show markers pertaining clicked.

basically, filter 'type' column in database still maintain types loaing default. eg. page loads, map loads , displays types, user clicks on button causes map show markers have type1 value in db. kind of toggle check box.

any ideas of how go ahead this, don't think reloading markers db efficient way, can hide markers have property?

map = new google.maps.map(document.getelementbyid("google_map"), googlemapoptions); //load markers xml file, check (map_process.php) $.get("map_process.php", function (data) { $(data).find("marker").each(function () { var name = $(this).attr('name'); var address = '<p>'+ $(this).attr('address') +'</p>'; var type = $(this).attr('type'); var description ='<p>'+ $(this).attr('description') +'</p>'; var point = new google.maps.latlng(parsefloat($(this).attr('lat')),parsefloat($(this).attr('lng'))); var icon1 = customicons[type] || {}; create_marker(point, name, address, false, false, false, icon1.icon);//"http://sanwebe.com/assets/google-map-save-markers-db/icons/pin_blue.png"); }); });

you can't hide specific markers according tag or type, have hide/remove them first , add together need on map

here functions need:

var all_markers = []; var show_markers = []; function setmarkers(map) { (var = 0; < show_markers.length; i++) { show_markers[i].setmap(map); } } function showmarkers(type) { setmarkers(null); show_markers = [] (var = 0; < all_markers.length; i++) { if (all_markers[i].type == type){ show_markers.push(all_markers[i]) } } setmarkers(map); }

here idea: load markers all_markers, on first loading markers show_markers must equal all_markers. hitting button showing specific markers must trigger function showmarkers clear map , reload specific ones.

javascript jquery google-maps google-maps-api-3

No comments:

Post a Comment