title: How do I update new markers of selected place types ..?
body: <p>I have created a custom Google map, to show different types of places. When I click on a <code>checkbox</code> 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 <code>checkbox</code>es that are already selected. </p>
  
  <p>This should repeated every time I drag the map to a new location. </p>
  
  <p>I am providing the HTML and JS code below for reference:</p>
  
  <pre><code>&lt;ul class="sub-menu"&gt;
      &lt;li&gt;&lt;a&gt;Health&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
             &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="dentist" name="dentist" value="dentist" /&gt; Dentist&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="doctor" name="doctor" value="doctor" /&gt; Doctor&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="gym" name="gym" value="gym" /&gt; Gymnasium&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="health" name="health" value="health" /&gt; Health&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="hospital" name="hospital" value="hospital" /&gt; Hospital&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="pharmacy" name="pharmacy" value="pharmacy" /&gt; Pharmacy&lt;/a&gt;&lt;/li&gt;         
           &lt;/ul&gt; 
       &lt;li&gt;&lt;a&gt;Travel&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
             &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="airport" name="airport" value="airport" /&gt; Airport&lt;/a&gt;
              &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="bus_station" name="bus_station" value="bus_station" /&gt; Bus Station&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="car_rental" name="car_rental" value="car_rental" /&gt; Car Rental&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="subway_station" name="subway_station" value="subway_station" /&gt; Subway Station&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="taxi_stand" name="taxi_stand" value="taxi_stand" /&gt; Taxi Stand&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="train_station" name="train_station" value="train_station" /&gt; Train Station&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt; &lt;input type="checkbox" class="map-checkbox" id="travel_agency" name="travel_agency" value="travel_agency" /&gt; Travel Agency&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
       &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Javascript Code:</p>
  
  
  
  <pre><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 &lt; 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: '&lt;img src="' + obj.icon + '" /&gt;&lt;font style="color:#000;"&gt;' + obj.name +
      '&lt;br /&gt;Rating: ' + obj.rating + '&lt;br /&gt;Vicinity: ' + obj.vicinity + '&lt;/font&gt;'
  });
      google.maps.event.addListener(mark, 'click', function() {
      clearInfos();
      infowindow.open(map,mark);
  });
     infos.push(infowindow);
  }
  </code></pre>