Как обновить новые маркеры выбранных типов мест??

Question

Я создал пользовательскую карту Google, чтобы показать разные типы мест. Когда я нажимаю на пункт меню checkbox в списке (см. HTML). Он размещает маркеры этого типа в радиусе 20000 м (20 км) от центра карты. Теперь, когда я перетаскиваю карту в новое место, как я могу обновить значение радиуса из нового центра, а затем запросить типы мест в этой области. Типы мест будут выбраны из checkbox es, которые уже выбраны.

Это должно повторяться каждый раз, когда я перетаскиваю карту в новое место.

Я обеспечение HTML и JS код ниже для справки:

<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 Код:

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

Я не совсем уверен, что я понимаю, что вы пытаетесь сделать , но, возможно, посмотрите на слушателя «center_change»:

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