[GIS] google markers are updating but not removing previous markers

google mapsmarkers

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);
}

Best Answer

try this:

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

  clearMarkers();
  markers = [];

source: google maps javascript api

Related Solutions

[GIS] Google markers at same address not showing all markers

The clusterer is displaying correctly. All the markers are being plotted. The problem is that you can only click on the top most marker, making it seem like there is only one marker.

To see the content for coincident markers, you'll have to pass the infowindow contents of the underlying markers to the top most marker.

To do this, first off, keep track of each marker. You are using MarkerClusterer, so the markerClusterer instance will hold each marker. As each geocode result comes back, compare the latlng of that request with all the markers that have already been plotted. You can compare positions using the equals method of the latlng object.

If the new marker matches the position of an existing marker, take the infowindow contents from the first marker and append it to the new marker's infowindow contents. This way, when you click on the top most marker (the second company), it will show information from both companies. If there are more than two companies, you'll need to grab the infowindow contents for all the matching markers. This method will also allow the marker clusterer to still display the correct number of markers.

Here is a working example and the javascript code. The first and second addresses are the same. When you click the marker for 2, it will show "2 & 1".

<script type="text/javascript"> 
var map;

//marker clusterer
var mc;
var mcOptions = {gridSize: 20, maxZoom: 17};

//global infowindow
var infowindow = new google.maps.InfoWindow();

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

var address = new Array("1000 Market St, Philadelphia, PA","1000 Market St, Philadelphia, PA","1002 Market St, Philadelphia, PA","1004 Market St, Philadelphia, PA");
var content = new Array("1","2","3","4");

function createMarker(latlng,text) {

    var marker = new google.maps.Marker({
        position: latlng
    });

    ///get array of markers currently in cluster
    var allMarkers = mc.getMarkers();

    //check to see if any of the existing markers match the latlng of the new marker
    if (allMarkers.length != 0) {
        for (i=0; i < allMarkers.length; i++) {
            var currentMarker = allMarkers[i];
            var pos = currentMarker.getPosition();

            if (latlng.equals(pos)) {
                text = text + " & " + content[i];
            }

        }
    }

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.close();
        infowindow.setContent(text);
        infowindow.open(map,marker);
    });

    return marker;
}

function geocodeAddress(address,i) {

    geocoder.geocode( {'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            var marker = createMarker(results[0].geometry.location,content[i]);
            mc.addMarker(marker);

        } else { 
            alert("Geocode was not successful for the following reason: " + status); 
        } 
    });
}

function initialize(){

    var options = { 
        zoom: 13, 
        center: new google.maps.LatLng(39.96225,-75.13222), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map'), options); 

    //marker cluster
    mc = new MarkerClusterer(map, [], mcOptions);

    for (i=0; i<address.length; i++) { 
        geocodeAddress(address[i],i);
    }

}       
</script>

EDIT: Response to comment

Alternatively, you could nudge coincident markers by applying a small (random number between .999999 and 1.000001, for instance) multiplier to the position of each coincident marker. Here is an example. This is using the same data as the first example, except, instead of the markers 1 and 2 being placed on top of each other and sharing an infowindow, marker 2 is offset from marker 1. Note that your geocode results are going to be a little less accurate. Relevant code below:

//min and max limits for multiplier, for random numbers
//keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;

    function createMarker(latlng,text) {

        ///get array of markers currently in cluster
        var allMarkers = mc.getMarkers();

        //final position for marker, could be updated if another marker already exists in same position
        var finalLatLng = latlng;

        //check to see if any of the existing markers match the latlng of the new marker
        if (allMarkers.length != 0) {
            for (i=0; i < allMarkers.length; i++) {
                var existingMarker = allMarkers[i];
                var pos = existingMarker.getPosition();

                //if a marker already exists in the same position as this marker
                if (latlng.equals(pos)) {

                    //update the position of the coincident marker by applying a small multipler to its coordinates
                    var newLat = latlng.lat() * (Math.random() * (max - min) + min);
                    var newLng = latlng.lng() * (Math.random() * (max - min) + min);

                    finalLatLng = new google.maps.LatLng(newLat,newLng);

                }                   
            }
        }

        var marker = new google.maps.Marker({
            position: finalLatLng
        });     

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.close();
            infowindow.setContent(text);
            infowindow.open(map,marker);
        });

        return marker;
    }

[GIS] Leaflet / Google Map baselayer / markers not visible

Just a quick fix: you were on the right track with the z-index. Try adding this to your own css file (may break other things! I simply got it to display the markers):

.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}

Best Answer

Related Solutions

[GIS] Google markers at same address not showing all markers

[GIS] Leaflet / Google Map baselayer / markers not visible

Related Question