Need a multiple checkbox with their respective places. Please help me.
if you know of alternate ways to make the filters work, let me know.
I tried a lot to filter with multiple checkbox but its not work can you solve this problem in this script.
Thanks in advance.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://ift.tt/1ayd29L"></script>
<script type="text/javascript">
$(function(){
$('.chkbox').click(function(){
$(':checkbox').attr('checked',false);
$('#'+$(this).attr('id')).attr('checked',true);
search_types(map.getCenter());
});
});
var map;
var infowindow;
var markersArray = [];
var pyrmont = new google.maps.LatLng(20.268455824834792, 85.84099235520011);
var marker;
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
// var waypoints = [];
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 14
});
infowindow = new google.maps.InfoWindow();
//document.getElementById('directionsPanel').innerHTML='';
search_types();
}
function createMarker(place,icon) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: icon,
visible:true
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("<b>Name:</b>"+place.name+"<br><b>Address:</b>"+place.vicinity+"<br><b>Reference:</b>"+place.reference+"<br><b>Rating:</b>"+place.rating+"<br><b>Id:</b>"+place.id);
infowindow.open(map, this);
});
}
var source="";
var dest='';
function search_types(latLng){
clearOverlays();
if(!latLng){
var latLng = pyrmont;
}
var type = $('.chkbox:checked').val();
var icon = "images/"+type+".png";
var request = {
location: latLng,
radius: 2000,
types: [type] //e.g. school, restaurant,bank,bar,city_hall,gym,night_club,park,zoo
};
var service = new google.maps.places.PlacesService(map);
service.search(request, function(results, status) {
map.setZoom(14);
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
results[i].html_attributions='';
createMarker(results[i],icon);
}
}
});
}
// Deletes all markers in the array by removing references to them
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setVisible(false)
}
//markersArray.length = 0;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function clearMarkers(){
$('#show_btn').show();
$('#hide_btn').hide();
clearOverlays()
}
function showMarkers(){
$('#show_btn').hide();
$('#hide_btn').show();
if (markersArray) {
for (i in markersArray) {
markersArray[i].setVisible(true)
}
}
}
</script>
</head>
<body>
<div>
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td> <input type="checkbox" name="mytype" class="chkbox" id="school" value="school" /><label for="school">School</label><br/></td>
<td><input type="checkbox" name="mytype" class="chkbox" id="restaurant" value="restaurant"/><label for="restaurant" >Restaurant</label></td>
</tr>
<tr>
<td> <input type="checkbox" name="mytype" class="chkbox" id="hospital" value="hospital"/><label for="hospital" >Hospital</label></td>
<td><input type="checkbox" name="mytype" class="chkbox" id="bus_station" value="bus_station"/><label for="bus_station" >Bus Stopedge</label></td>
</tr>
<tr>
<td><input type="checkbox" name="mytype" class="chkbox" id="park" value="park"/><label for="park" >Park</label></td>
<td><input type="checkbox" name="mytype" class="chkbox" id="bank" value="bank"/><label for="bank" >Bank</label></td>
</tr>
<tr>
<td><input type="checkbox" name="mytype" class="chkbox" id="bar" value="bar"/><label for="bar" >Bar</label></td>
<td><input type="checkbox" name="mytype" class="chkbox" id="movie_theater" value="movie_theater"/><label for="movie_theater" >Movie Theater</label></td>
</tr>
<tr>
<td><input type="checkbox" name="mytype" class="chkbox" id="night_club" value="night_club"/><label for="night_club" >Night Club</label></td>
<td><input type="checkbox" name="mytype" class="chkbox" id="zoo" value="zoo"/><label for="zoo" >Zoo</label><br/></td>
</tr>
<tr>
<td><input type="checkbox" name="mytype" class="chkbox" id="gym" value="gym"/><label for="gym" >Gym</label></td>
<td><input type="checkbox" name="mytype" class="chkbox" id="atm" value="atm"/><label for="atm" >ATM</label></td>
</tr>
<tr>
<td><input type="checkbox" name="mytype" class="chkbox" id="spa" value="spa"/><label for="spa" >Spa</label></td>
</tr>
</table>
</div>
<label>Address: </label><input id="address" type="text" style="width:400px;" value="Bhubaneswar,odisha,india"/>
<input type="button" value="submit" id="btn" onClick="showMap();"/>
<br/>
<div id="map"></div>
<input type="text" id="latitude" style="display:none;" placeholder="Latitude"/>
<input type="text" id="longitude" style="display:none;" placeholder="Longitude"/>
<!-- <input type="button" id="hide_btn" value="hide markers" onClick="clearMarkers();" />-->
<input type="button" id="show_btn" value="show markers" onClick="showMarkers();" style="display:none;" />
<div id="test"></div>
Aucun commentaire:
Enregistrer un commentaire