Although I have come across similar questions with related titles, none of the answers quite fit my needs.
Here is the problem I am facing:
I'm working on printing a map that contains multiple markers generated from a database. Below the map, there are checkboxes that allow me to filter the markers displayed on the map.
Initially, when I load the map, everything is correctly filtered based on the default settings of the checkboxes. However, I am unsure how to add or remove markers from the map once it has been initialized. Do I need to reload the map, or is there something else I should be doing?
Below you can find the relevant code:
<form>
<input class="test" type="checkbox" name="type" value="1" onclick="test()" checked/>1<br/>
<input class="test"type="checkbox" name="type" value="2" onclick="test()" checked/>2<br/>
<input class="test"type="checkbox" name="type" value="3" onclick="test()" checked/>3<br/>
<input class="test"type="checkbox" name="type" value="4" onclick="test()" checked/>4<br/>
<script>
var checkedValues = $('input:checkbox:checked').map(function() {
return this.value;
}).get().join('-');
function fetchPlace(filterType){
$.ajax({
url: "ajaxmap.php?type=" + filterType,
type: 'GET',
dataType: 'json',
success: function(data) {
// Loop through our array of markers and place each one on the map
for (i = 0; i < data.marker.length; i++) {
var myLatlng = new google.maps.LatLng(data.marker[i].log, data.marker[i].lat);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
},
error: function(){
/// handle errors
},
async: true
});
};
function test (){
var checkedValues = $('input:checkbox:checked').map(function() {
return this.value;
}).get().join('-');
fetchPlace(checkedValues);
};
fetchPlace(checkedValues);
Thank you in advance for any assistance you can offer.
Loneept