1

I am working on redo search functionality on map drag event. I am using php as server side language, What I do in this is that when I refresh my code it shows all restaurants in listing and all these restaurants in google map with markers. Now I click on redo search check box and drag map. for this I am using map dragend event, i call ajax function and fetch all restaurants with in the distance of 9 km from middle of the map. I get all records in listing and also in google map as a marker, but the problem is that it does not remove the markers of previous restaurants those are not showing now in listing after search I am also using marker.setMap(null). Here is my code for map.

var map;
var marker;
google.maps.event.addDomListener(window, 'load', initialize);
function initialize(){
    var bounds = new google.maps.LatLngBounds();
    map=new google.maps.Map(document.getElementById("map-canvas"));
    updateMarkers(bounds,map);

    google.maps.event.addDomListener(map,'dragend',function() {
        if($('#redo_search_in_map').is(":checked")){
            formlat = map.getCenter().lat();
            formlng = map.getCenter().lng();
            var type = $("#types").val();
            var keywords=new Array();
            $(".Check").each(function(){
                if($(this).is(":checked")){
                    keywords.push($(this).val());
                }
            }); 
            $.ajax({
                url:ajax_url+'listing/search_listings',
                data:{
                    'formlat':formlat,
                    'formlng':formlng,
                    'type':type,
                    'keywords':keywords
                },
                type:"get",
                success:function(resp)
                {   
                    $("#ajax_listing").html(resp);
                    deleteMarkers();
                    updateMarkers(bounds,map);
                    return false;
                },
                error: function()
                {
                    alert('error');
                }
            });
            return false;
        }
    })

}

function updateMarkers(bounds, map){
    <?php foreach($filterRecords as $key=>$records){ ?>
        var lat = '<?php echo $records['Listing']['latitude']; ?>';
        var longi = '<?php echo $records['Listing']['longitude']; ?>';
        var latlng = new google.maps.LatLng(lat, longi);
        marker = new google.maps.Marker({
            position:new google.maps.LatLng(lat,longi),
        });
        marker.setMap(map);
        bounds.extend(latlng);
    <?php } ?>
    map.fitBounds(bounds);
}

function deleteMarkers(){
    marker.setMap(null);
}
1

try this:

  setMapOnAll(null); // remove markers from map, but save them at source

or

  clearMarkers();
  markers = [];

source: google maps javascript api

  • in deleteMarkers() function ? – Pankaj Sharma Sep 2 '16 at 7:11
  • I updated the answer. I prefer to clear map after initialize it. map=new google.maps.Map(document.getElementById("map-canvas")); setMapOnAll(null); updateMarkers(bounds,map); – Mae Sep 2 '16 at 7:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.