samedi 25 avril 2015

How to add a filter checkbox to a google map with multiple markers

I need some help to add a filter check box to my nice piece of code below of a google map of Australia with a small amount of campground markers with info windows that I want to act as the filter for the check boxes. I need to have the check boxes situated near or next to the map so its easily accessible to check or uncheck any particular as needed. Each check box is as follows under their own headings, with the first one of "All campsites" being the default one being checked and all the others being unchecked until someone needs to take their dog with them and checks "Pet friendly" for example and all the other markers will dissapear off the map and only the campsies with "Pet friendly" in the info box filter will remain on the map.

CHECK BOXES INFO BOX FILTERS

-All campsites

DOGS - Pet friendly Pet friendly/No pets

CARAVANS - On road caravans On road caravans - Off road caravans only Off road caravans - Camper trailers only Camper trailers only

SHADE -Shady campsites Shady campsites/No shade

ABLUTIONS -Pit toilets Pit toilets -Flushing toilets Flushing toilets -Showers Showers -Water Water -Campers kitchen Campers kitchen

WHERE -Forrest camping Forrest camping -Bush camping Bush camping -Beach side camping Beach side camping -River side camping River side camping -Dam camping Dam camping -Lake side camping Lake side camping

GENERATORS -Generators allowed Generators allowed/No generators

WHO -National park National park -State forrest State forrest -Shire run Shire run -Privately owned Privately owned

CAMPFIRES -Campfires allowed Campfires allowed/No Campfires allowed

COST -Free camping only Free National park entry fee and small camping fee Small fee

Please add the check boxes code to my code below thanks in advance, and don't worry about the repeated code of "sue's Bridge campground" as its just for me use later for more campgrounds

    <html>
<head>
<meta charset="utf-8">
<title>map and markers</title>
<script type="text/javascript" src="http://ift.tt/1j9s9KP?       sensor=true&libraries=panoramio"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"> function initDexGoogleMap(canvas, width,   w_unit, height, h_unit, latitude, longitude, p_zoom, p_mapType,                                 p_navControl, p_navStyle, p_navPosition,                                 p_mapTypeC, p_mapTypeCStyle, p_mapTypeCPosition,                               p_scaleC, p_scaleCPosition,                               p_draggable, p_disableDoubleClickZoom, p_keyboardShortcuts,                               p_trafficL, p_bikeL, p_panoramio                               ) {     document.write('<div id="'+canvas+'"></div>');    document.getElementById(canvas).style.width = width + w_unit;   document.getElementById(canvas).style.height = height + h_unit;     var latlng = new google.maps.LatLng(latitude,longitude);    var myOptions = {     zoom: p_zoom,       center: latlng,     navigationControl: p_navControl,    navigationControlOptions:  {style: p_navStyle, position: p_navPosition},    mapTypeControl: p_mapTypeC,     mapTypeControlOptions: {style: p_mapTypeCStyle, position: p_mapTypeCPosition},      scaleControl: p_scaleC,     scaleControlOptions: {position: p_scaleCPosition},      mapTypeId: p_mapType,       draggable: p_draggable,     disableDoubleClickZoom: p_disableDoubleClickZoom,       keyboardShortcuts: p_keyboardShortcuts    };  var map = new google.maps.Map(document.getElementById(canvas), myOptions);  if (p_trafficL) {       var trafficLayer = new google.maps.TrafficLayer();      trafficLayer.setMap(map);   }   if (p_bikeL) {      var bikeLayer = new google.maps.BicyclingLayer();       bikeLayer.setMap(map);  }   if (p_panoramio) {      var panoramioLayer = new google.maps.panoramio.PanoramioLayer();        panoramioLayer.setMap(map);     }   return map;  }    function addMarker(map,lat,long,p_clickable,                     titleText,                     p_ico, p_shadow,                     p_event, p_contentString                    ) {      var markerLatlng = new google.maps.LatLng(lat,long);    var marker = new google.maps.Marker({           position: markerLatlng,         clickable: p_clickable,         map: map,           title: unescape(titleText),         icon: p_ico,        shadow: p_shadow,       draggable: false        });     var infowindow = new google.maps.InfoWindow({content: unescape(p_contentString)});     if (p_event == "open")     {         infowindow.open(map,marker);         google.maps.event.addListener(marker, "click", function() {infowindow.open(map,marker);});     }     else         google.maps.event.addListener(marker, p_event, function() {infowindow.open(map,marker);});  }   function updatePosition()  {      document.getElementById("position").innerHTML = (marker.getPosition().lat()+","+marker.getPosition().lng());  } </script>
</head>

<body>
<div id="DEX_GContainer0">
<script type="text/javascript">var my_DEX_GContainer0 = initDexGoogleMap("DEX_GContainer0","99","%","99","%",-28.500,133.900,5,google.maps.MapTypeId.HYBRID,true,google.maps.NavigationControlStyle.DEFAULT,google.maps.ControlPosition.TOP_LEFT,true,google.maps.MapTypeControlStyle.DEFAULT,google.maps.ControlPosition.TOP_RIGHT,true,google.maps.ControlPosition.BOTTOM_LEFT,true,false,true,false,false,false)

001;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge Campground","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Water campers kitchen Forrest camping River side camping No generators Shire run Campfires allowed Small fee....click for campground info page with photo's, video and links")
002;addMarker(my_DEX_GContainer0,-33.066818,151.332210,true,"Olney State Forrest","","","click","Olney State Forrest: Pet friendly On road caravans Off road caravans Shady campsites Pit toilets Forrest camping Generators Campfires allowed Free camping....Click here for more detailed info of campground with photo's, video and links") 003;addMarker(my_DEX_GContainer0,-32.545591,152.309042,true,"Myall Lakes","","","click","Myall lakes Campgrounds: Pet friendly On road caravans Off road caravans Shady campsites Pit toilets Lake side camping No generators Natinal park Campfires allowed National park entrance fee and small camping fee....Click here for more detailed info of campground with photo's, video and links ") 004;addMarker(my_DEX_GContainer0,-25.544210,113.491358,true,"Francois Peron National Park","","","click","Francois Peron National Park Campground: No Pets Camper trailers only No shade No ablutions Beach side camping No generators National park No campfires allowed National park entry fee with small camping fee....Click here for more detailed info of campground with photo's, video's and links") 005;addMarker(my_DEX_GContainer0,-30.184276,114.997790,true,"Sandy Cape Campground","","","click","Sandy Cape Campground: Pet friendly On road caravans Off road caravans Shady campsites Pit toilets Bore Water Beach side camping Generators allowed Shire run Campfires allowed between 1st June and 1st August Small fee....Click here for more detailed info of campground with photo's, video's and links") 006;addMarker(my_DEX_GContainer0,-33.991602,122.219999,true,"Lucky Bay Campground","","","click","Lucky Bay Campground Cape Legrande National Park: No pets On road caravans Off road caravans Shady campsites Flushing toilets Showers Water Campers kitchen Beach side camping No generators National park no campfires allowed National parkentry fee and small camping fee....Click here for more detailed info of campground with photo's, video's and links") 007;addMarker(my_DEX_GContainer0,-33.887842,120.805229,true,"Munglinup Campground","","","click","Munglinup Campground: Pet friendly On road caravans Off road caravans Shady campsites Pit toilets Showers Bore Water Generators allowed Shire run small fee....Click here for more detailed info of campground with photo's, video's and links") 008;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 009;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 010;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 011;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 012;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 013;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 014;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 015;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 016;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 017;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 018;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 019;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 020;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 021;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 022;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 023;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 024;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 025;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 026;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 027;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 028;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links") 029;addMarker(my_DEX_GContainer0,-34.075879,115.386913,true,"Sue%27s%20Bridge","","","click","Sue's Bridge Campground: Pet friendly On road caravans Shady campsites Pit toilets Forrest camping River side camping No generators Shire run small fee, non potable rain water tank, campers kitchen, Campfires allowed....Click here for more detailed info of campground with photo's, video's and links")

 </script>
</div>
</body>
</html>




Aucun commentaire:

Enregistrer un commentaire