How do I update new markers of selected place types ..?

Question

I have created a custom Google map, to show different types of places. When I click on a checkbox menu item in the list (see HTML). It places markers of that type within a radius of 20000 m (20 km) from the center of the map. Now when I drag the map to a new location, how can I update the radius value from the new center location and then request for the place types in that area. Place types would be fetched from the checkboxes that are already selected.

This should repeated every time I drag the map to a new location.

I am providing the HTML and JS code below for reference:

<ul class="sub-menu">
    <li><a>Health</a>
        <ul class="sub-menu">
           <li><a> <input type="checkbox" class="map-checkbox" id="dentist" name="dentist" value="dentist" /> Dentist</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="doctor" name="doctor" value="doctor" /> Doctor</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="gym" name="gym" value="gym" /> Gymnasium</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="health" name="health" value="health" /> Health</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="hospital" name="hospital" value="hospital" /> Hospital</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="pharmacy" name="pharmacy" value="pharmacy" /> Pharmacy</a></li>         
         </ul> 
     <li><a>Travel</a>
        <ul class="sub-menu">
           <li><a> <input type="checkbox" class="map-checkbox" id="airport" name="airport" value="airport" /> Airport</a>
            <li><a> <input type="checkbox" class="map-checkbox" id="bus_station" name="bus_station" value="bus_station" /> Bus Station</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="car_rental" name="car_rental" value="car_rental" /> Car Rental</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="subway_station" name="subway_station" value="subway_station" /> Subway Station</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="taxi_stand" name="taxi_stand" value="taxi_stand" /> Taxi Stand</a></li> 
            <li><a> <input type="checkbox" class="map-checkbox" id="train_station" name="train_station" value="train_station" /> Train Station</a></li>
            <li><a> <input type="checkbox" class="map-checkbox" id="travel_agency" name="travel_agency" value="travel_agency" /> Travel Agency</a></li>
         </ul>
     </li>
</ul>

Javascript Code:

var loc_geocoder;
var loc_map;
var loc_marker;
var loc_image = tpl_dir + '/images/marker.png';
var placetype = [];
var selected_markers = [];

function initialize() {

//fetch lat,lng values from the post
post_location();

 // prepare Geocoder
 geocoder = new google.maps.Geocoder();

//set initial position (from the post)
map = new google.maps.Map(document.getElementById('location_map'),     {
    zoom: 10,
    center: postlatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
        });
            loc_marker = new google.maps.Marker({
            position: postlatlng,
            title: 'CFP Roar',
            map: map,
            icon: loc_image
    });
 google.maps.event.addListener(map,'dragend',function(event) {

    clearOverlays();
    selectedMarkers();
    findPlaces(selected_markers);
    }
}

function selectedMarkers() {
 selected_markers = [];
$('.map-checkbox').each(function() {
        var $this = $(this);
        if($this.is(':checked')){
    selected_markers.push($this.val());
        }
});
}

function clearOverlays() {
if (markers) {
    for (i in markers) {
         markers[i].setMap(null);
    }
}
}
function findPlaces(type) {
var radius;
var lat = document.getElementById('post_lat').value;
var lng = document.getElementById('post_lng').value;
var cur_location = map.getCenter();
var request = {
    location: cur_location,
    radius: 50000,
    types: [type]
};
if (keyword) {
    request.keyword = [keyword];
}
service = new google.maps.places.PlacesService(map);
service.search(request, createMarkers);
}

function createMarkers(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
    // if we have found something - clear map (overlays)
    //clearOverlays();
    // and create new markers by search result
    for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
    }
    //console.log(results);
    //$('#test').append( markers );
} else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
    alert('Sorry, nothing is found');
}
}
function createMarker(obj) {
    var mark = new google.maps.Marker({
    position: obj.geometry.location,
    map: map,
    title: obj.name,
marktype: placetype,
icon: gp_tpl_dir + '/gp/images/places/' + placetype + '.png'
});
     markers.push(mark);
//mark_array.push(mark);
    var infowindow = new google.maps.InfoWindow({
    content: '<img src="' + obj.icon + '" /><font style="color:#000;">' + obj.name +
    '<br />Rating: ' + obj.rating + '<br />Vicinity: ' + obj.vicinity + '</font>'
});
    google.maps.event.addListener(mark, 'click', function() {
    clearInfos();
    infowindow.open(map,mark);
});
   infos.push(infowindow);
}

Answer 1

I'm not quite sure I understand what you're trying to do, but perhaps look into the 'center_change' listener:

https://developers.google.com/maps/documentation/javascript/events